frontend-plus-react 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/grid/GenericDataGrid.tsx
-import { useState as useState15, useEffect as useEffect6, useCallback as useCallback11, useContext as useContext4, useMemo as useMemo10, useRef as useRef7 } from "react";
+import { useState as useState16, useEffect as useEffect6, useCallback as useCallback12, useContext as useContext4, useMemo as useMemo10, useRef as useRef7 } from "react";
 import { DataGrid } from "react-data-grid";
 import "react-data-grid/lib/styles.css";
 
@@ -317,7 +317,7 @@ var useApiCallWithoutSnackbar = () => {
 };
 
 // src/components/grid/GenericDataGrid.tsx
-import { CircularProgress as CircularProgress4, Typography as Typography10, Box as Box12, Alert as Alert2, useTheme as useTheme4, Dialog as Dialog4 } from "@mui/material";
+import { CircularProgress as CircularProgress4, Typography as Typography11, Box as Box13, Alert as Alert2, useTheme as useTheme4, Dialog as Dialog5 } from "@mui/material";
 
 // src/store/index.ts
 import { configureStore, combineReducers } from "@reduxjs/toolkit";
@@ -1377,7 +1377,7 @@ 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`;
+  const titulo = deshabilitado ? "Grab\xE1 la fila para ver sus detalles" : "";
   return /* @__PURE__ */ jsx5(Tooltip, { title: titulo, children: /* @__PURE__ */ jsx5("span", { className: "fpr-boton-detalle", children: /* @__PURE__ */ jsx5(
     IconButton,
     {
@@ -1478,7 +1478,7 @@ var opcionesDeReferencia = (campo, definicionReferenciada, filasReferenciadas, f
   const activo = campoDeActivo(definicionReferenciada);
   const nombres = camposDeNombre(definicionReferenciada);
   const columnasDeEtiqueta = nombres.length > 0 ? [...definicionReferenciada.primaryKey, ...nombres] : definicionReferenciada.primaryKey;
-  const opciones = filasReferenciadas.filter((fila) => (activo === null || !!fila[activo]) && anteriores.every((par) => comoTexto(fila[par.target]) === comoTexto(filaActual[par.source]))).map((fila) => {
+  const opciones = filasReferenciadas.filter((fila) => (activo === null || !!fila[activo]) && (filaActual === null || anteriores.every((par) => comoTexto(fila[par.target]) === comoTexto(filaActual[par.source])))).map((fila) => {
     const etiquetas = columnasDeEtiqueta.map((columna) => comoTexto(fila[columna]));
     return { valor: fila[columnaDelValor], etiquetas, texto: `${etiquetas.join(", ")}; ${definicionReferenciada.primaryKey.join(", ")}` };
   });
@@ -1813,7 +1813,8 @@ var useGridMenu = ({
   callApi,
   resetSorting,
   triggerImport,
-  triggerExport
+  triggerExport,
+  abrirColumnas
 }) => {
   const { showSuccess, showError, showWarning } = useSnackbar();
   const menuOptions = useMemo4(() => {
@@ -1849,7 +1850,7 @@ var useGridMenu = ({
       label: "ocultar o mostrar columnas",
       icon: React4.createElement(VisibilityOffIcon),
       handler: async () => {
-        console.log("Ocultar/mostrar columnas");
+        abrirColumnas?.();
       },
       visible: true
     });
@@ -1898,12 +1899,12 @@ var useGridMenu = ({
       visible: true
     });
     return options;
-  }, [tableDefinition, tableName, fixedFields, setTableData, callApi, resetSorting, triggerImport, triggerExport, showSuccess, showError, showWarning]);
+  }, [tableDefinition, tableName, fixedFields, setTableData, callApi, resetSorting, triggerImport, triggerExport, abrirColumnas, showSuccess, showError, showWarning]);
   return { menuOptions };
 };
 
 // src/hooks/grid/useGridColumns.ts
-import React12, { useMemo as useMemo8 } from "react";
+import React13, { useMemo as useMemo8 } from "react";
 
 // src/utils/functions.tsx
 import * as JSON4all2 from "json4all";
@@ -1969,7 +1970,7 @@ var useVistaGrilla = () => useContext3(VistaGrillaContext);
 
 // src/components/grid/renderers/headerCellRenderers.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
+var defaultColumnHeaderCellRenderer = (props, fieldDef, ocultarColumna) => {
   const { column, sortDirection, priority } = props;
   const isPrimaryKey = fieldDef.isPk;
   const sorted = sortDirection !== void 0;
@@ -1984,6 +1985,11 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
   return /* @__PURE__ */ jsxs5(
     Box3,
     {
+      onClickCapture: (e) => {
+        if (!e.altKey || !ocultarColumna) return;
+        e.stopPropagation();
+        ocultarColumna(fieldDef.name);
+      },
       sx: {
         display: "flex",
         alignItems: "center",
@@ -2061,11 +2067,11 @@ var ActionsColumnHeaderCell = ({
 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 Box4 } from "@mui/material";
-import React6 from "react";
+import { InputBase as InputBase3, Box as Box4 } from "@mui/material";
+import React10 from "react";
 
 // src/components/forms/TypedField.tsx
-import { useState as useState7, useEffect as useEffect3, useMemo as useMemo5, useCallback as useCallback7 } from "react";
+import { useState as useState11, useEffect as useEffect4, useMemo as useMemo6, useCallback as useCallback8 } from "react";
 import {
   TextField,
   FormControl,
@@ -2077,13 +2083,282 @@ import {
   useTheme
 } from "@mui/material";
 import typeStore3 from "type-store";
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
+
+// src/hooks/grid/useExpander.tsx
+import React8, { useCallback as useCallback7, useState as useState10 } from "react";
+import IconButton4 from "@mui/material/IconButton";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
+import SearchIcon2 from "@mui/icons-material/Search";
+
+// src/components/grid/MenuDeOpciones.tsx
+import { useEffect as useEffect3, useMemo as useMemo5, useRef as useRef4, useState as useState7 } from "react";
+import { InputBase, List as List2, ListItemButton as ListItemButton2, Popover as Popover2, Typography as Typography3 } from "@mui/material";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function MenuDeOpciones({ anclaje, opciones, busquedaInicial, onElegir, onCerrar }) {
+  const [busqueda, setBusqueda] = useState7(busquedaInicial);
+  const [indice, setIndice] = useState7(0);
+  const visibles = useMemo5(() => filtrarOpciones(opciones, busqueda), [opciones, busqueda]);
+  const elegida = useRef4(null);
+  useEffect3(() => {
+    elegida.current?.scrollIntoView({ block: "nearest" });
+  }, [indice, visibles]);
+  const alApretar = (evento) => {
+    if (evento.key === "ArrowDown") {
+      setIndice((i) => Math.min(i + 1, visibles.length - 1));
+    } else if (evento.key === "ArrowUp") {
+      setIndice((i) => Math.max(i - 1, 0));
+    } else if (evento.key === "Enter") {
+      if (visibles[indice]) onElegir(visibles[indice].valor);
+    } else if (evento.key === "F9" || evento.key === "Escape") {
+      onCerrar();
+    } else {
+      return;
+    }
+    evento.preventDefault();
+    evento.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs6(
+    Popover2,
+    {
+      open: true,
+      anchorEl: anclaje,
+      onClose: onCerrar,
+      disableRestoreFocus: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      slotProps: { paper: { sx: { minWidth: 300, maxWidth: 520 } } },
+      children: [
+        /* @__PURE__ */ jsx7(
+          InputBase,
+          {
+            autoFocus: true,
+            fullWidth: true,
+            value: busqueda,
+            onChange: (e) => {
+              setBusqueda(e.target.value);
+              setIndice(0);
+            },
+            onKeyDown: alApretar,
+            placeholder: "buscar",
+            sx: { px: 1, py: 0.5, fontSize: "0.8rem", borderBottom: "1px solid #ccc" },
+            inputProps: { "aria-label": "buscar" }
+          }
+        ),
+        /* @__PURE__ */ jsxs6(List2, { dense: true, disablePadding: true, sx: { maxHeight: 320, overflowY: "auto" }, role: "listbox", children: [
+          visibles.length === 0 && /* @__PURE__ */ jsx7(Typography3, { variant: "body2", sx: { p: 1, color: "text.secondary" }, children: "sin coincidencias" }),
+          visibles.map((opcion, i) => /* @__PURE__ */ jsx7(
+            ListItemButton2,
+            {
+              ref: i === indice ? elegida : null,
+              selected: i === indice,
+              role: "option",
+              onClick: () => onElegir(opcion.valor),
+              sx: { gap: 2, py: 0.25, fontSize: "0.8rem" },
+              children: opcion.etiquetas.map((etiqueta, j) => /* @__PURE__ */ jsx7("span", { style: { fontWeight: j === 0 ? 600 : 400, minWidth: j === 0 ? 40 : void 0 }, children: etiqueta }, j))
+            },
+            i
+          ))
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/grid/SelectorDeFecha.tsx
+import { useState as useState8 } from "react";
+import { Button as Button2, IconButton as IconButton3, Popover as Popover3, Typography as Typography4 } from "@mui/material";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var MESES = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];
+var DIAS = ["lu", "ma", "mi", "ju", "vi", "s\xE1", "do"];
+var mismaFecha = (a, b) => b !== null && a.anio === b.anio && a.mes === b.mes && a.dia === b.dia;
+var MOVIMIENTOS = {
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+  ArrowUp: [-7, 0],
+  ArrowDown: [7, 0],
+  PageUp: [0, -1],
+  PageDown: [0, 1]
+};
+function SelectorDeFecha({ anclaje, fechaActual, admiteNulo, onElegir, onCerrar }) {
+  const hoy = /* @__PURE__ */ new Date();
+  const fechaDeHoy = { anio: hoy.getFullYear(), mes: hoy.getMonth(), dia: hoy.getDate() };
+  const [cursor, setCursor] = useState8(fechaActual ?? fechaDeHoy);
+  const mover = (dias, meses) => {
+    const nueva = new Date(cursor.anio, cursor.mes + meses, cursor.dia + dias);
+    setCursor({ anio: nueva.getFullYear(), mes: nueva.getMonth(), dia: nueva.getDate() });
+  };
+  const alApretar = (evento) => {
+    if (evento.key in MOVIMIENTOS) {
+      mover(...MOVIMIENTOS[evento.key]);
+    } else if (evento.key === "Enter") {
+      onElegir(fechaATexto(cursor));
+    } else if (evento.key === "F9" || evento.key === "Escape") {
+      onCerrar();
+    } else {
+      return;
+    }
+    evento.preventDefault();
+    evento.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx8(Popover3, { open: true, anchorEl: anclaje, onClose: onCerrar, disableRestoreFocus: true, anchorOrigin: { vertical: "bottom", horizontal: "left" }, children: /* @__PURE__ */ jsxs7("div", { tabIndex: 0, ref: (el) => el?.focus(), onKeyDown: alApretar, style: { padding: 8, outline: "none", width: 252 }, "aria-label": "calendario", children: [
+    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx8(IconButton3, { size: "small", "aria-label": "mes anterior", onClick: () => mover(0, -1), children: "\u2039" }),
+      /* @__PURE__ */ jsxs7(Typography4, { variant: "body2", sx: { fontWeight: 600 }, children: [
+        MESES[cursor.mes],
+        " ",
+        cursor.anio
+      ] }),
+      /* @__PURE__ */ jsx8(IconButton3, { size: "small", "aria-label": "mes siguiente", onClick: () => mover(0, 1), children: "\u203A" })
+    ] }),
+    /* @__PURE__ */ jsxs7("table", { style: { borderCollapse: "collapse", width: "100%", textAlign: "center", fontSize: "0.8rem" }, children: [
+      /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { children: DIAS.map((d) => /* @__PURE__ */ jsx8("th", { style: { fontWeight: 400, color: "#777" }, children: d }, d)) }) }),
+      /* @__PURE__ */ jsx8("tbody", { children: semanasDelMes(cursor.anio, cursor.mes).map((semana, i) => /* @__PURE__ */ jsx8("tr", { children: semana.map((dia) => {
+        const elegido = mismaFecha(dia, fechaActual);
+        const enCursor = mismaFecha(dia, cursor);
+        return /* @__PURE__ */ jsx8("td", { style: { padding: 1 }, children: /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: () => onElegir(fechaATexto(dia)),
+            style: {
+              width: 32,
+              height: 26,
+              border: enCursor ? "1px solid #1976d2" : "1px solid transparent",
+              borderRadius: 4,
+              cursor: "pointer",
+              background: elegido ? "#1976d2" : "transparent",
+              color: elegido ? "#fff" : dia.delMesMostrado ? "#000" : "#aaa"
+            },
+            children: dia.dia
+          }
+        ) }, `${dia.mes}-${dia.dia}`);
+      }) }, i)) })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 4 }, children: [
+      /* @__PURE__ */ jsx8(Button2, { size: "small", onClick: () => onElegir(fechaATexto(fechaDeHoy)), children: "hoy" }),
+      admiteNulo && /* @__PURE__ */ jsx8(Button2, { size: "small", onClick: () => onElegir(null), children: "vac\xEDo" })
+    ] })
+  ] }) });
+}
+
+// src/components/grid/VentanaDeTexto.tsx
+import { useState as useState9 } from "react";
+import { Button as Button3, InputBase as InputBase2, Popover as Popover4 } from "@mui/material";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function VentanaDeTexto({ anclaje, texto, editable, onAceptar, onCerrar }) {
+  const [valor, setValor] = useState9(texto);
+  const alApretar = (evento) => {
+    if (evento.key === "Escape" || evento.key === "F9") {
+      onCerrar();
+    } else if (evento.key === "Enter" && evento.ctrlKey && editable) {
+      onAceptar(valor);
+    } else {
+      return;
+    }
+    evento.preventDefault();
+    evento.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx9(Popover4, { open: true, anchorEl: anclaje, onClose: onCerrar, disableRestoreFocus: true, anchorOrigin: { vertical: "bottom", horizontal: "left" }, children: /* @__PURE__ */ jsxs8("div", { style: { padding: 8, minWidth: 320, maxWidth: 640 }, children: [
+    /* @__PURE__ */ jsx9(
+      InputBase2,
+      {
+        autoFocus: true,
+        multiline: true,
+        fullWidth: true,
+        readOnly: !editable,
+        value: valor,
+        onChange: (e) => setValor(e.target.value),
+        onKeyDown: alApretar,
+        minRows: 2,
+        maxRows: 16,
+        sx: { fontFamily: "monospace", fontSize: "0.8rem", border: "1px solid #ccc", borderRadius: "4px", p: 0.5 },
+        inputProps: { "aria-label": "contenido de la celda" }
+      }
+    ),
+    editable && /* @__PURE__ */ jsxs8("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 4 }, children: [
+      /* @__PURE__ */ jsx9(Button3, { size: "small", onClick: onCerrar, children: "cancelar" }),
+      /* @__PURE__ */ jsx9(Button3, { size: "small", variant: "contained", onClick: () => onAceptar(valor), children: "aceptar" })
+    ] })
+  ] }) });
+}
+
+// src/hooks/grid/useExpander.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var useExpander = ({ campo, editable, fila, admiteNulo, tipos, anclaje, textoActual, valorActual, alElegirValor, alConfirmarTexto, alFallar }) => {
+  const [expansion, setExpansion] = useState10(null);
+  const abierto = React8.useRef(false);
+  const tipoDelCampo = tipoDeExpander(campo, editable);
+  const tipo = tipoDelCampo === null || tipoDelCampo === "json" || tipos && !tipos.includes(tipoDelCampo) ? null : tipoDelCampo;
+  const abrir = useCallback7(async (busqueda) => {
+    if (tipo === null || abierto.current) return;
+    abierto.current = true;
+    try {
+      if (tipo === "referencia" && esCampoConReferencia(campo)) {
+        const { definicion, filas } = await cargarReferencia(campo.references);
+        setExpansion({ tipo: "opciones", opciones: opcionesDeReferencia(campo, definicion, filas, fila, admiteNulo), busqueda });
+      } else if (tipo === "booleano") {
+        setExpansion({ tipo: "opciones", opciones: opcionesDeBooleano(admiteNulo), busqueda });
+      } else if (tipo === "opciones") {
+        setExpansion({ tipo: "opciones", opciones: opcionesDeEnumerado(campo.options ?? [], admiteNulo), busqueda });
+      } else {
+        setExpansion({ tipo: tipo === "fecha" ? "fecha" : "texto" });
+      }
+    } catch (err) {
+      abierto.current = false;
+      alFallar(mensajeDeError(err));
+    }
+  }, [tipo, campo, fila, admiteNulo, alFallar]);
+  const cerrar = useCallback7(() => {
+    abierto.current = false;
+    setExpansion(null);
+    setTimeout(() => anclaje.current?.focus(), 0);
+  }, [anclaje]);
+  const elegirValor = useCallback7((valor) => {
+    cerrar();
+    alElegirValor(valor);
+  }, [cerrar, alElegirValor]);
+  const confirmarTexto = useCallback7((texto) => {
+    cerrar();
+    alConfirmarTexto(texto);
+  }, [cerrar, alConfirmarTexto]);
+  const manejarTecla = useCallback7((event) => {
+    const esExpander = event.key === "F9" && !event.shiftKey && !event.ctrlKey && !event.altKey || event.key === "ArrowDown" && event.altKey && !event.shiftKey && !event.ctrlKey;
+    if (tipo === null || !esExpander) return false;
+    event.preventDefault();
+    void abrir("");
+    return true;
+  }, [tipo, abrir]);
+  const titulo = tipo === "fecha" ? "elegir fecha (F9)" : tipo === "texto" ? "ver el contenido completo (F9)" : "elegir un valor (F9)";
+  const lupa = tipo === null ? null : /* @__PURE__ */ jsx10(
+    IconButton4,
+    {
+      size: "small",
+      tabIndex: -1,
+      "aria-label": titulo.replace(" (F9)", ""),
+      title: titulo,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: (e) => {
+        e.stopPropagation();
+        void abrir("");
+      },
+      sx: { p: 0, ml: 0.25, color: "primary.main", "&:hover": { backgroundColor: "action.hover" } },
+      children: tipo === "fecha" ? /* @__PURE__ */ jsx10(CalendarMonthIcon, { sx: { fontSize: 16 } }) : tipo === "texto" ? /* @__PURE__ */ jsx10(SearchIcon2, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx10(ArrowDropDownIcon, { sx: { fontSize: 20 } })
+    }
+  );
+  const base = anclaje.current;
+  const ventana = !expansion || !base ? null : expansion.tipo === "opciones" ? /* @__PURE__ */ jsx10(MenuDeOpciones, { anclaje: base, opciones: expansion.opciones, busquedaInicial: expansion.busqueda, onElegir: elegirValor, onCerrar: cerrar }) : expansion.tipo === "fecha" ? /* @__PURE__ */ jsx10(SelectorDeFecha, { anclaje: base, fechaActual: fechaDeValor(valorActual), admiteNulo, onElegir: confirmarTexto, onCerrar: cerrar }) : /* @__PURE__ */ jsx10(VentanaDeTexto, { anclaje: base, texto: textoActual, editable: true, onAceptar: confirmarTexto, onCerrar: cerrar });
+  return { tipo, abierto, abrir, manejarTecla, lupa, ventana };
+};
+
+// src/components/forms/TypedField.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode = false, feedback, isMandatory = false }) => {
   const theme = useTheme();
-  const typer = useMemo5(() => typeStore3.typerFrom(fieldDef), [fieldDef]);
-  const isBoolean = fieldDef.typeName === "boolean";
-  const [localString, setLocalString] = useState7(() => {
+  const typer = useMemo6(() => typeStore3.typerFrom(fieldDef), [fieldDef]);
+  const isBoolean = fieldDef.typeName === "boolean" && !isFilterMode;
+  const [localString, setLocalString] = useState11(() => {
     if (isBoolean) return "";
     if (isFilterMode) return value !== null && value !== void 0 ? String(value) : "";
     try {
@@ -2092,10 +2367,10 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
       return value === null || value === void 0 ? "" : String(value);
     }
   });
-  const [errorMsg, setErrorMsg] = useState7(null);
-  const lastValueRef = useRef4(value);
-  const lastCommittedStringRef = useRef4(localString);
-  useEffect3(() => {
+  const [errorMsg, setErrorMsg] = useState11(null);
+  const lastValueRef = useRef5(value);
+  const lastCommittedStringRef = useRef5(localString);
+  useEffect4(() => {
     if (!isBoolean) {
       if (value !== lastValueRef.current) {
         lastValueRef.current = value;
@@ -2112,7 +2387,27 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
       }
     }
   }, [value, typer, isBoolean, isFilterMode]);
-  const handleTextChange = useCallback7((e) => {
+  const entradaRef = useRef5(null);
+  const [enfocado, setEnfocado] = useState11(false);
+  const escribirEnFiltro = useCallback8((texto) => {
+    setLocalString(texto);
+    lastValueRef.current = texto;
+    onChange(fieldDef.name, texto, true);
+  }, [onChange, fieldDef.name]);
+  const expander = useExpander({
+    campo: fieldDef,
+    editable: true,
+    fila: null,
+    admiteNulo: false,
+    tipos: isFilterMode ? ["referencia", "booleano", "opciones", "fecha"] : [],
+    anclaje: entradaRef,
+    textoActual: localString,
+    valorActual: localString,
+    alElegirValor: (valor) => escribirEnFiltro(valor === null || valor === void 0 ? "" : typeof valor === "boolean" ? typer.toLocalString(valor) : String(valor)),
+    alConfirmarTexto: (texto) => escribirEnFiltro(texto ?? ""),
+    alFallar: (mensaje) => setErrorMsg(mensaje)
+  });
+  const handleTextChange = useCallback8((e) => {
     const newValueString = e.target.value;
     setLocalString(newValueString);
     let parsedValue = null;
@@ -2133,7 +2428,7 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
     lastValueRef.current = parsedValue;
     onChange(fieldDef.name, parsedValue, isValid);
   }, [typer, onChange, fieldDef.name, isFilterMode]);
-  const handleTextCommit = useCallback7(() => {
+  const handleTextCommit = useCallback8(() => {
     if (!onCommit) return;
     if (localString === lastCommittedStringRef.current) return;
     lastCommittedStringRef.current = localString;
@@ -2151,13 +2446,14 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
     }
     onCommit(fieldDef.name, parsedValue, isValid);
   }, [onCommit, fieldDef.name, localString, isFilterMode, typer]);
-  const handleTextKeyDown = useCallback7((e) => {
+  const handleTextKeyDown = useCallback8((e) => {
+    if (expander.manejarTecla(e)) return;
     if (e.key === "Enter") {
       e.preventDefault();
       handleTextCommit();
     }
-  }, [handleTextCommit]);
-  const handleBooleanChange = useCallback7((e) => {
+  }, [handleTextCommit, expander]);
+  const handleBooleanChange = useCallback8((e) => {
     const val = e.target.value;
     let finalValue = null;
     if (val === "true") finalValue = true;
@@ -2185,28 +2481,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__ */ 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(
+    return /* @__PURE__ */ jsxs9(FormControl, { fullWidth: true, error: !!errorMsg && !isFilterMode, disabled: isDisabled, size: "small", margin: "dense", children: [
+      !isFilterMode && /* @__PURE__ */ jsx11(InputLabel, { shrink: true, children: fieldDef.name }),
+      /* @__PURE__ */ jsxs9(
         Select,
         {
           value: boolVal,
           label: !isFilterMode ? fieldDef.name : void 0,
           onChange: handleBooleanChange,
-          startAdornment: isMandatory && isEmpty && !isFilterMode ? /* @__PURE__ */ jsx7(InputAdornment, { position: "start", sx: { color: "text.secondary", ml: 0.5 }, children: "*" }) : void 0,
+          startAdornment: isMandatory && isEmpty && !isFilterMode ? /* @__PURE__ */ jsx11(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__ */ 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)" })
+            fieldDef.nullable !== false && /* @__PURE__ */ jsx11(MenuItem, { value: "", children: /* @__PURE__ */ jsx11("em", { children: "Nulo / Sin Especificar" }) }),
+            /* @__PURE__ */ jsx11(MenuItem, { value: "true", children: "S\xED (Verdadero)" }),
+            /* @__PURE__ */ jsx11(MenuItem, { value: "false", children: "No (Falso)" })
           ]
         }
       ),
-      errorMsg && !isFilterMode && /* @__PURE__ */ jsx7(FormHelperText, { children: errorMsg })
+      errorMsg && !isFilterMode && /* @__PURE__ */ jsx11(FormHelperText, { children: errorMsg })
     ] });
   }
   let inputType = "text";
@@ -2220,54 +2516,65 @@ 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__ */ jsx7(
-    TextField,
-    {
-      fullWidth: true,
-      type: inputType,
-      label: isFilterMode ? void 0 : fieldDef.name,
-      variant: "outlined",
-      size: "small",
-      margin: isFilterMode ? "none" : "dense",
-      value: localString,
-      onChange: handleTextChange,
-      disabled: isDisabled,
-      error: !!errorMsg && !isFilterMode,
-      helperText: !isFilterMode ? errorMsg || (isMandatory ? "Obligatorio" : "") : void 0,
-      InputLabelProps: !isFilterMode ? { shrink: true } : void 0,
-      InputProps: !isFilterMode && isMandatory && isEmptyText ? {
-        startAdornment: /* @__PURE__ */ jsx7(InputAdornment, { position: "start", sx: { color: "text.secondary", mr: 0.5 }, children: "*" })
-      } : {},
-      inputProps: {
-        style: {
-          textAlign: isNumericType(fieldDef.typeName) ? "right" : "left"
-        }
-      },
-      sx: isFilterMode ? {
-        "& .MuiOutlinedInput-root": {
-          backgroundColor: "background.paper",
-          height: FILTER_ROW_HEIGHT - 5,
-          minWidth: 50,
-          fontSize: "0.8rem",
-          padding: "0px"
-        }
-      } : {
-        "& .MuiOutlinedInput-root": {
-          backgroundColor: cellBackgroundColor,
-          transition: transitionStyle
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx11(
+      TextField,
+      {
+        fullWidth: true,
+        inputRef: entradaRef,
+        type: inputType,
+        label: isFilterMode ? void 0 : fieldDef.name,
+        variant: "outlined",
+        size: "small",
+        margin: isFilterMode ? "none" : "dense",
+        value: localString,
+        onChange: handleTextChange,
+        disabled: isDisabled,
+        error: !!errorMsg && !isFilterMode,
+        helperText: !isFilterMode ? errorMsg || (isMandatory ? "Obligatorio" : "") : void 0,
+        InputLabelProps: !isFilterMode ? { shrink: true } : void 0,
+        InputProps: isFilterMode ? {
+          // la lupa solo al enfocar el filtro, como en backend-plus
+          endAdornment: enfocado || expander.abierto.current ? expander.lupa : void 0
+        } : isMandatory && isEmptyText ? {
+          startAdornment: /* @__PURE__ */ jsx11(InputAdornment, { position: "start", sx: { color: "text.secondary", mr: 0.5 }, children: "*" })
+        } : {},
+        inputProps: {
+          style: {
+            textAlign: isNumericType(fieldDef.typeName) ? "right" : "left"
+          }
         },
-        "& .MuiOutlinedInput-input": {
-          padding: "6px 12px"
-        }
-      },
-      onBlur: handleTextCommit,
-      onKeyDown: handleTextKeyDown
-    }
-  );
+        sx: isFilterMode ? {
+          "& .MuiOutlinedInput-root": {
+            backgroundColor: "background.paper",
+            height: FILTER_ROW_HEIGHT - 5,
+            minWidth: 50,
+            fontSize: "0.8rem",
+            padding: "0px"
+          }
+        } : {
+          "& .MuiOutlinedInput-root": {
+            backgroundColor: cellBackgroundColor,
+            transition: transitionStyle
+          },
+          "& .MuiOutlinedInput-input": {
+            padding: "6px 12px"
+          }
+        },
+        onFocus: () => setEnfocado(true),
+        onBlur: () => {
+          setEnfocado(false);
+          handleTextCommit();
+        },
+        onKeyDown: handleTextKeyDown
+      }
+    ),
+    expander.ventana
+  ] });
 };
 
 // src/components/grid/FilterInputRender.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function FilterInputRenderer({
   columnKey,
   currentFilter,
@@ -2290,8 +2597,8 @@ function FilterInputRenderer({
         [columnKey]: { operator: newOp, value: formattedVal }
       }));
     };
-    return /* @__PURE__ */ jsxs7(Box4, { sx: { mt: 0, display: "flex", alignItems: "center", gap: 0.5, pr: 1 }, children: [
-      /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsxs10(Box4, { sx: { mt: 0, display: "flex", alignItems: "center", gap: 0.5, pr: 1 }, children: [
+      /* @__PURE__ */ jsx12(
         "select",
         {
           value: operator,
@@ -2307,10 +2614,10 @@ function FilterInputRenderer({
             textAlign: "center",
             cursor: "pointer"
           },
-          children: filterOperators.map((op) => /* @__PURE__ */ jsx8("option", { value: op.value, children: op.label }, op.value))
+          children: filterOperators.map((op) => /* @__PURE__ */ jsx12("option", { value: op.value, children: op.label }, op.value))
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx12(
         TypedField,
         {
           fieldDef,
@@ -2321,8 +2628,8 @@ function FilterInputRenderer({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx8(
-    InputBase,
+  return /* @__PURE__ */ jsx12(
+    InputBase3,
     {
       value: currentFilter || "",
       onChange: (e) => setFilters((prev) => ({
@@ -2344,18 +2651,18 @@ function FilterInputRenderer({
     }
   );
 }
-var FilterInputRender_default = React6.memo(FilterInputRenderer);
+var FilterInputRender_default = React10.memo(FilterInputRenderer);
 
 // src/components/grid/renderers/summaryCellRenderers.tsx
 import { Box as Box5 } from "@mui/material";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultColumnSummaryCellRenderer = (props, fixedFields) => {
   const { column, row } = props;
   if (row.id === "filterRow") {
     const { filters, setFilters } = row;
     if (valorFijoDe(fixedFields, column.key)) 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(
+    return /* @__PURE__ */ jsx13(Box5, { sx: { width: "100%", height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx13(
       FilterInputRender_default,
       {
         columnKey: column.key,
@@ -2397,7 +2704,7 @@ var defaultColumnSummaryCellRenderer = (props, fixedFields) => {
       label = "Cant S\xED: ";
       break;
   }
-  return /* @__PURE__ */ jsxs8(Box5, { sx: {
+  return /* @__PURE__ */ jsxs11(Box5, { sx: {
     px: 0,
     fontWeight: "bold",
     fontSize: "0.875rem",
@@ -2415,35 +2722,35 @@ var actionsColumnSummaryCellRenderer = (_props) => null;
 var detailColumnCellSummaryRenderer = (_props) => null;
 
 // src/components/grid/renderers/cellRenderers.tsx
-import React7 from "react";
-import { Box as Box8, Button as Button2, Tooltip as Tooltip4, useTheme as useTheme2 } from "@mui/material";
+import React11 from "react";
+import { Box as Box8, Button as Button4, 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 Box6, Typography as Typography3 } from "@mui/material";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { Box as Box6, Typography as Typography5 } from "@mui/material";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
   const value = row[column.key];
-  return /* @__PURE__ */ jsx10(Box6, { sx: {
+  return /* @__PURE__ */ jsx14(Box6, { sx: {
     padding: 0.5,
     width: "100%",
     height: "100%",
     display: "flex",
     alignItems: "center",
     backgroundColor: value === "Special" ? "lightblue" : "transparent"
-  }, children: /* @__PURE__ */ jsx10(Typography3, { variant: "body2", sx: { fontWeight: "bold" }, children: value ? `CS: ${value}` : "N/A" }) });
+  }, children: /* @__PURE__ */ jsx14(Typography5, { variant: "body2", sx: { fontWeight: "bold" }, children: value ? `CS: ${value}` : "N/A" }) });
 };
 var ExampleClientSideComponent_default = ExampleClientSideComponent;
 
 // src/components/grid/FallbackClientSideRenderer.tsx
-import { Box as Box7, Typography as Typography4, Tooltip as Tooltip3 } from "@mui/material";
+import { Box as Box7, Typography as Typography6, Tooltip as Tooltip3 } from "@mui/material";
 import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
   const clientSideName = fieldDefinition?.clientSide || "Desconocido";
-  return /* @__PURE__ */ jsx11(Tooltip3, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx15(Tooltip3, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs12(
     Box7,
     {
       sx: {
@@ -2464,8 +2771,8 @@ var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
         // Evita que el contenido se desborde
       },
       children: [
-        /* @__PURE__ */ jsx11(Typography4, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx15(Typography6, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
+        /* @__PURE__ */ jsx15(
           WarningAmberIcon2,
           {
             sx: {
@@ -2493,8 +2800,8 @@ var extendClientSides = (newRenderers) => {
 };
 
 // src/components/grid/renderers/cellRenderers.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var CeldaDato = React7.memo(function CeldaDato2({ row, columnKey, defaultColumn }) {
+import { jsx as jsx16 } from "react/jsx-runtime";
+var CeldaDato = React11.memo(function CeldaDato2({ row, columnKey, defaultColumn }) {
   const theme = useTheme2();
   const { primaryKey, fixedFields, typer, isMandatory, isNumeric } = defaultColumn;
   const rowId = getPrimaryKeyValues(row, primaryKey);
@@ -2515,7 +2822,7 @@ var CeldaDato = React7.memo(function CeldaDato2({ row, columnKey, defaultColumn
     displayValue = "* " + displayValue;
   }
   const signal = displayValue === "--" ? "typed-controls-signal-no-data" : displayValue === "//" ? "typed-controls-signal-unknown-data" : "";
-  const celda = /* @__PURE__ */ jsx12(
+  const celda = /* @__PURE__ */ jsx16(
     "div",
     {
       className: `fpr-celda ${isNumeric ? "fpr-celda-numerica" : ""} ${signal} ${row[NEW_ROW_INDICATOR] ? "new-row-cell-animation" : ""}`,
@@ -2523,13 +2830,13 @@ var CeldaDato = React7.memo(function CeldaDato2({ row, columnKey, defaultColumn
       children: displayValue
     }
   );
-  return currentCellFeedback?.message ? /* @__PURE__ */ jsx12(Tooltip4, { title: currentCellFeedback.message, children: celda }) : celda;
+  return currentCellFeedback?.message ? /* @__PURE__ */ jsx16(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;
+    return column.customType === "action" ? /* @__PURE__ */ jsx16(CeldaDetalle, { fila: row }) : null;
   }
   switch (column.customType) {
     case "default": {
@@ -2538,15 +2845,15 @@ var allColumnsCellRenderer = (props) => {
       if (fieldDef?.clientSide) {
         const ClientSideComponent = clientSides[fieldDef.clientSide];
         if (ClientSideComponent) {
-          return /* @__PURE__ */ jsx12(ClientSideComponent, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
+          return /* @__PURE__ */ jsx16(ClientSideComponent, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
         }
-        return /* @__PURE__ */ jsx12(FallbackClientSideRenderer_default, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
+        return /* @__PURE__ */ jsx16(FallbackClientSideRenderer_default, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
       }
-      return /* @__PURE__ */ jsx12(CeldaDato, { row, columnKey: props.column.key, defaultColumn });
+      return /* @__PURE__ */ jsx16(CeldaDato, { row, columnKey: props.column.key, defaultColumn });
     }
     case "detail": {
       const { detailTable, primaryKey } = column;
-      return /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx16(
         BotonDetalle,
         {
           row,
@@ -2581,8 +2888,8 @@ var allColumnsCellRenderer = (props) => {
           color: "primary"
         }
       ];
-      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,
+      return /* @__PURE__ */ jsx16(Box8, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", gap: 0.5 }, children: gridActionButtons.map((actionDef) => tableDefinition.allow[actionDef.action] ? /* @__PURE__ */ jsx16(
+        Button4,
         {
           variant: "outlined",
           color: actionDef.color,
@@ -2590,7 +2897,7 @@ var allColumnsCellRenderer = (props) => {
           onClick: () => actionDef.handler(row),
           title: actionDef.title,
           sx: { width: 22, minWidth: 22, height: 22, "& .MuiButton-startIcon": { m: 0 } },
-          children: /* @__PURE__ */ jsx12(actionDef.icon, { sx: { fontSize: 18 } })
+          children: /* @__PURE__ */ jsx16(actionDef.icon, { sx: { fontSize: 18 } })
         },
         actionDef.action
       ) : null) });
@@ -2601,13 +2908,13 @@ var allColumnsCellRenderer = (props) => {
 };
 
 // src/components/grid/InputRenderer.tsx
-import React11, { useCallback as useCallback9, useEffect as useEffect5, useMemo as useMemo7, useState as useState11 } from "react";
+import React12, { useCallback as useCallback10, useEffect as useEffect5, useMemo as useMemo7, useState as useState12 } from "react";
 
 // src/hooks/useTableRecordSave.ts
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 var useTableRecordSave = () => {
   const { callApi, loading, error } = useApiCall();
-  const saveRecord = useCallback8(async ({
+  const saveRecord = useCallback9(async ({
     tableDefinition,
     isNewRow,
     formData,
@@ -2654,207 +2961,9 @@ var useTableRecordSave = () => {
 
 // src/components/grid/InputRenderer.tsx
 import InputBase4 from "@mui/material/InputBase";
-import IconButton4 from "@mui/material/IconButton";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
-import SearchIcon2 from "@mui/icons-material/Search";
 import { Tooltip as Tooltip5, useTheme as useTheme3 } from "@mui/material";
-
-// src/components/grid/MenuDeOpciones.tsx
-import { useEffect as useEffect4, useMemo as useMemo6, useRef as useRef5, useState as useState8 } from "react";
-import { InputBase as InputBase2, List as List2, ListItemButton as ListItemButton2, Popover as Popover2, Typography as Typography5 } from "@mui/material";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-function MenuDeOpciones({ anclaje, opciones, busquedaInicial, onElegir, onCerrar }) {
-  const [busqueda, setBusqueda] = useState8(busquedaInicial);
-  const [indice, setIndice] = useState8(0);
-  const visibles = useMemo6(() => filtrarOpciones(opciones, busqueda), [opciones, busqueda]);
-  const elegida = useRef5(null);
-  useEffect4(() => {
-    elegida.current?.scrollIntoView({ block: "nearest" });
-  }, [indice, visibles]);
-  const alApretar = (evento) => {
-    if (evento.key === "ArrowDown") {
-      setIndice((i) => Math.min(i + 1, visibles.length - 1));
-    } else if (evento.key === "ArrowUp") {
-      setIndice((i) => Math.max(i - 1, 0));
-    } else if (evento.key === "Enter") {
-      if (visibles[indice]) onElegir(visibles[indice].valor);
-    } else if (evento.key === "F9" || evento.key === "Escape") {
-      onCerrar();
-    } else {
-      return;
-    }
-    evento.preventDefault();
-    evento.stopPropagation();
-  };
-  return /* @__PURE__ */ jsxs10(
-    Popover2,
-    {
-      open: true,
-      anchorEl: anclaje,
-      onClose: onCerrar,
-      disableRestoreFocus: true,
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      slotProps: { paper: { sx: { minWidth: 300, maxWidth: 520 } } },
-      children: [
-        /* @__PURE__ */ jsx13(
-          InputBase2,
-          {
-            autoFocus: true,
-            fullWidth: true,
-            value: busqueda,
-            onChange: (e) => {
-              setBusqueda(e.target.value);
-              setIndice(0);
-            },
-            onKeyDown: alApretar,
-            placeholder: "buscar",
-            sx: { px: 1, py: 0.5, fontSize: "0.8rem", borderBottom: "1px solid #ccc" },
-            inputProps: { "aria-label": "buscar" }
-          }
-        ),
-        /* @__PURE__ */ jsxs10(List2, { dense: true, disablePadding: true, sx: { maxHeight: 320, overflowY: "auto" }, role: "listbox", children: [
-          visibles.length === 0 && /* @__PURE__ */ jsx13(Typography5, { variant: "body2", sx: { p: 1, color: "text.secondary" }, children: "sin coincidencias" }),
-          visibles.map((opcion, i) => /* @__PURE__ */ jsx13(
-            ListItemButton2,
-            {
-              ref: i === indice ? elegida : null,
-              selected: i === indice,
-              role: "option",
-              onClick: () => onElegir(opcion.valor),
-              sx: { gap: 2, py: 0.25, fontSize: "0.8rem" },
-              children: opcion.etiquetas.map((etiqueta, j) => /* @__PURE__ */ jsx13("span", { style: { fontWeight: j === 0 ? 600 : 400, minWidth: j === 0 ? 40 : void 0 }, children: etiqueta }, j))
-            },
-            i
-          ))
-        ] })
-      ]
-    }
-  );
-}
-
-// src/components/grid/SelectorDeFecha.tsx
-import { useState as useState9 } from "react";
-import { Button as Button3, IconButton as IconButton3, Popover as Popover3, Typography as Typography6 } from "@mui/material";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-var MESES = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];
-var DIAS = ["lu", "ma", "mi", "ju", "vi", "s\xE1", "do"];
-var mismaFecha = (a, b) => b !== null && a.anio === b.anio && a.mes === b.mes && a.dia === b.dia;
-var MOVIMIENTOS = {
-  ArrowLeft: [-1, 0],
-  ArrowRight: [1, 0],
-  ArrowUp: [-7, 0],
-  ArrowDown: [7, 0],
-  PageUp: [0, -1],
-  PageDown: [0, 1]
-};
-function SelectorDeFecha({ anclaje, fechaActual, admiteNulo, onElegir, onCerrar }) {
-  const hoy = /* @__PURE__ */ new Date();
-  const fechaDeHoy = { anio: hoy.getFullYear(), mes: hoy.getMonth(), dia: hoy.getDate() };
-  const [cursor, setCursor] = useState9(fechaActual ?? fechaDeHoy);
-  const mover = (dias, meses) => {
-    const nueva = new Date(cursor.anio, cursor.mes + meses, cursor.dia + dias);
-    setCursor({ anio: nueva.getFullYear(), mes: nueva.getMonth(), dia: nueva.getDate() });
-  };
-  const alApretar = (evento) => {
-    if (evento.key in MOVIMIENTOS) {
-      mover(...MOVIMIENTOS[evento.key]);
-    } else if (evento.key === "Enter") {
-      onElegir(fechaATexto(cursor));
-    } else if (evento.key === "F9" || evento.key === "Escape") {
-      onCerrar();
-    } else {
-      return;
-    }
-    evento.preventDefault();
-    evento.stopPropagation();
-  };
-  return /* @__PURE__ */ jsx14(Popover3, { open: true, anchorEl: anclaje, onClose: onCerrar, disableRestoreFocus: true, anchorOrigin: { vertical: "bottom", horizontal: "left" }, children: /* @__PURE__ */ jsxs11("div", { tabIndex: 0, ref: (el) => el?.focus(), onKeyDown: alApretar, style: { padding: 8, outline: "none", width: 252 }, "aria-label": "calendario", children: [
-    /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx14(IconButton3, { size: "small", "aria-label": "mes anterior", onClick: () => mover(0, -1), children: "\u2039" }),
-      /* @__PURE__ */ jsxs11(Typography6, { variant: "body2", sx: { fontWeight: 600 }, children: [
-        MESES[cursor.mes],
-        " ",
-        cursor.anio
-      ] }),
-      /* @__PURE__ */ jsx14(IconButton3, { size: "small", "aria-label": "mes siguiente", onClick: () => mover(0, 1), children: "\u203A" })
-    ] }),
-    /* @__PURE__ */ jsxs11("table", { style: { borderCollapse: "collapse", width: "100%", textAlign: "center", fontSize: "0.8rem" }, children: [
-      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { children: DIAS.map((d) => /* @__PURE__ */ jsx14("th", { style: { fontWeight: 400, color: "#777" }, children: d }, d)) }) }),
-      /* @__PURE__ */ jsx14("tbody", { children: semanasDelMes(cursor.anio, cursor.mes).map((semana, i) => /* @__PURE__ */ jsx14("tr", { children: semana.map((dia) => {
-        const elegido = mismaFecha(dia, fechaActual);
-        const enCursor = mismaFecha(dia, cursor);
-        return /* @__PURE__ */ jsx14("td", { style: { padding: 1 }, children: /* @__PURE__ */ jsx14(
-          "button",
-          {
-            type: "button",
-            tabIndex: -1,
-            onClick: () => onElegir(fechaATexto(dia)),
-            style: {
-              width: 32,
-              height: 26,
-              border: enCursor ? "1px solid #1976d2" : "1px solid transparent",
-              borderRadius: 4,
-              cursor: "pointer",
-              background: elegido ? "#1976d2" : "transparent",
-              color: elegido ? "#fff" : dia.delMesMostrado ? "#000" : "#aaa"
-            },
-            children: dia.dia
-          }
-        ) }, `${dia.mes}-${dia.dia}`);
-      }) }, i)) })
-    ] }),
-    /* @__PURE__ */ jsxs11("div", { style: { display: "flex", justifyContent: "space-between", marginTop: 4 }, children: [
-      /* @__PURE__ */ jsx14(Button3, { size: "small", onClick: () => onElegir(fechaATexto(fechaDeHoy)), children: "hoy" }),
-      admiteNulo && /* @__PURE__ */ jsx14(Button3, { size: "small", onClick: () => onElegir(null), children: "vac\xEDo" })
-    ] })
-  ] }) });
-}
-
-// src/components/grid/VentanaDeTexto.tsx
-import { useState as useState10 } from "react";
-import { Button as Button4, InputBase as InputBase3, Popover as Popover4 } from "@mui/material";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-function VentanaDeTexto({ anclaje, texto, editable, onAceptar, onCerrar }) {
-  const [valor, setValor] = useState10(texto);
-  const alApretar = (evento) => {
-    if (evento.key === "Escape" || evento.key === "F9") {
-      onCerrar();
-    } else if (evento.key === "Enter" && evento.ctrlKey && editable) {
-      onAceptar(valor);
-    } else {
-      return;
-    }
-    evento.preventDefault();
-    evento.stopPropagation();
-  };
-  return /* @__PURE__ */ jsx15(Popover4, { open: true, anchorEl: anclaje, onClose: onCerrar, disableRestoreFocus: true, anchorOrigin: { vertical: "bottom", horizontal: "left" }, children: /* @__PURE__ */ jsxs12("div", { style: { padding: 8, minWidth: 320, maxWidth: 640 }, children: [
-    /* @__PURE__ */ jsx15(
-      InputBase3,
-      {
-        autoFocus: true,
-        multiline: true,
-        fullWidth: true,
-        readOnly: !editable,
-        value: valor,
-        onChange: (e) => setValor(e.target.value),
-        onKeyDown: alApretar,
-        minRows: 2,
-        maxRows: 16,
-        sx: { fontFamily: "monospace", fontSize: "0.8rem", border: "1px solid #ccc", borderRadius: "4px", p: 0.5 },
-        inputProps: { "aria-label": "contenido de la celda" }
-      }
-    ),
-    editable && /* @__PURE__ */ jsxs12("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 4 }, children: [
-      /* @__PURE__ */ jsx15(Button4, { size: "small", onClick: onCerrar, children: "cancelar" }),
-      /* @__PURE__ */ jsx15(Button4, { size: "small", variant: "contained", onClick: () => onAceptar(valor), children: "aceptar" })
-    ] })
-  ] }) });
-}
-
-// src/components/grid/InputRenderer.tsx
 import typeStore4 from "type-store";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function findChangedValues(oldRowData, newRowData, isNewRow) {
   let changes = [];
   for (const key in newRowData) {
@@ -2881,11 +2990,9 @@ function InputRenderer({
   const setLocalCellChanges = estadoGrilla.setCambiosLocales;
   const fieldDefinition = requerido(tableDefinition.fields.find((f) => f.name === column.key), `el campo '${column.key}'`);
   const typer = useMemo7(() => typeStore4.typerFrom(fieldDefinition), [fieldDefinition]);
-  const [editingValue, setEditingValue] = useState11(() => row[column.key] !== null ? isNumericType(fieldDefinition?.typeName) ? row[column.key] : typer.toLocalString(row[column.key]) : null);
-  const isCommitInProgress = React11.useRef(false);
-  const [expansion, setExpansion] = useState11(null);
-  const menuAbierto = React11.useRef(false);
-  const entradaRef = React11.useRef(null);
+  const [editingValue, setEditingValue] = useState12(() => row[column.key] !== null ? isNumericType(fieldDefinition?.typeName) ? row[column.key] : typer.toLocalString(row[column.key]) : null);
+  const isCommitInProgress = React12.useRef(false);
+  const entradaRef = React12.useRef(null);
   const theme = useTheme3();
   const { showSuccess, showError } = useSnackbar();
   const { saveRecord } = useTableRecordSave();
@@ -2901,7 +3008,7 @@ function InputRenderer({
     cellBorderColor = currentCellFeedback.type === "error" ? theme.palette.error.main : theme.palette.success.main;
   }
   const initialRowId = useMemo7(() => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
-  const handleCommit = useCallback9(async (currentValue, closeEditor, focusNextCell) => {
+  const handleCommit = useCallback10(async (currentValue, closeEditor, focusNextCell) => {
     if (isCommitInProgress.current) return;
     isCommitInProgress.current = true;
     let processedNewValue;
@@ -3044,49 +3151,30 @@ function InputRenderer({
     initialRowId,
     typer
   ]);
-  const tipoExpander = tipoDeExpander(fieldDefinition, fieldDefinition.editable !== false);
-  const abrirExpander = useCallback9(async (busqueda) => {
-    if (tipoExpander === null || tipoExpander === "json" || menuAbierto.current) return;
-    menuAbierto.current = true;
-    const admiteNulo = fieldDefinition.nullable !== false;
-    try {
-      if (tipoExpander === "referencia" && esCampoConReferencia(fieldDefinition)) {
-        const { definicion, filas } = await cargarReferencia(fieldDefinition.references);
-        setExpansion({ tipo: "opciones", opciones: opcionesDeReferencia(fieldDefinition, definicion, filas, row, admiteNulo), busqueda });
-      } else if (tipoExpander === "booleano") {
-        setExpansion({ tipo: "opciones", opciones: opcionesDeBooleano(admiteNulo), busqueda });
-      } else if (tipoExpander === "opciones") {
-        setExpansion({ tipo: "opciones", opciones: opcionesDeEnumerado(fieldDefinition.options ?? [], admiteNulo), busqueda });
-      } else {
-        setExpansion({ tipo: tipoExpander === "fecha" ? "fecha" : "texto" });
-      }
-    } catch (err) {
-      menuAbierto.current = false;
-      showError(mensajeDeError(err));
-    }
-  }, [tipoExpander, fieldDefinition, row, showError]);
-  const cerrarExpansion = useCallback9(() => {
-    menuAbierto.current = false;
-    setExpansion(null);
-    setTimeout(() => entradaRef.current?.focus(), 0);
-  }, []);
-  const confirmarEnExpansion = useCallback9((nuevo) => {
+  const confirmarEnExpansion = useCallback10((nuevo) => {
     setEditingValue(nuevo);
-    cerrarExpansion();
     void handleCommit(nuevo, true, false);
-  }, [cerrarExpansion, handleCommit]);
-  const elegirOpcion = useCallback9((valor) => {
+  }, [handleCommit]);
+  const elegirOpcion = useCallback10((valor) => {
     confirmarEnExpansion(valor === null || valor === void 0 ? null : typeof valor === "boolean" || isNumericType(fieldDefinition.typeName) ? valor : typer.toLocalString(valor));
   }, [fieldDefinition.typeName, typer, confirmarEnExpansion]);
-  const handleKeyDown = useCallback9(async (event) => {
-    if (tipoExpander !== null && (event.key === "F9" && !event.shiftKey && !event.ctrlKey && !event.altKey || event.key === "ArrowDown" && event.altKey && !event.shiftKey && !event.ctrlKey)) {
-      event.preventDefault();
-      void abrirExpander("");
-      return;
-    }
+  const expander = useExpander({
+    campo: fieldDefinition,
+    editable: fieldDefinition.editable !== false,
+    fila: row,
+    admiteNulo: fieldDefinition.nullable !== false,
+    anclaje: entradaRef,
+    textoActual: editingValue === null || editingValue === void 0 ? "" : String(editingValue),
+    valorActual: row[column.key],
+    alElegirValor: elegirOpcion,
+    alConfirmarTexto: confirmarEnExpansion,
+    alFallar: showError
+  });
+  const handleKeyDown = useCallback10(async (event) => {
+    if (expander.manejarTecla(event)) return;
     if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey && caracterRechazado(event.key, typer)) {
       event.preventDefault();
-      if (tipoExpander === "referencia") void abrirExpander(event.key);
+      if (expander.tipo === "referencia") void expander.abrir(event.key);
       return;
     }
     if (event.key === "F4") {
@@ -3099,24 +3187,24 @@ function InputRenderer({
     if (onKeyPress?.(rowIdx, column.key, event, handleCommit, editingValue)) {
       event.preventDefault();
     }
-  }, [handleCommit, editingValue, column.key, rowIdx, onKeyPress, tipoExpander, abrirExpander, typer]);
-  const procesarTecla = React11.useRef(() => {
+  }, [handleCommit, editingValue, column.key, rowIdx, onKeyPress, expander, typer]);
+  const procesarTecla = React12.useRef(() => {
   });
   procesarTecla.current = (key) => {
     if (key === "F9") {
-      void abrirExpander("");
+      void expander.abrir("");
     } else if (key === "F4" && onKeyPress) {
       onKeyPress(rowIdx, column.key, { key, target: document.activeElement ?? document.body }, handleCommit, editingValue);
     }
   };
   useEffect5(() => registrarEditor?.((key) => procesarTecla.current(key)), []);
-  const handleBlur = useCallback9(() => {
-    if (menuAbierto.current) return;
+  const handleBlur = useCallback10(() => {
+    if (expander.abierto.current) return;
     handleCommit(editingValue, true, false);
   }, [handleCommit, editingValue]);
   const isFieldEditable = fieldDefinition?.editable !== false;
   const isNumeric = isNumericType(fieldDefinition?.typeName);
-  const editor = /* @__PURE__ */ jsx16(
+  const editor = /* @__PURE__ */ jsx17(
     InputBase4,
     {
       autoFocus: true,
@@ -3149,61 +3237,19 @@ function InputRenderer({
       },
       onClick: (e) => e.stopPropagation(),
       disabled: !isFieldEditable,
-      endAdornment: tipoExpander !== null && tipoExpander !== "json" && /* @__PURE__ */ jsx16(
-        IconButton4,
-        {
-          size: "small",
-          tabIndex: -1,
-          "aria-label": tipoExpander === "fecha" ? "elegir fecha" : tipoExpander === "texto" ? "ver el contenido completo" : "elegir un valor",
-          title: tipoExpander === "fecha" ? "elegir fecha (F9)" : tipoExpander === "texto" ? "ver el contenido completo (F9)" : "elegir un valor (F9)",
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: (e) => {
-            e.stopPropagation();
-            void abrirExpander("");
-          },
-          sx: { p: 0, ml: 0.25, color: "primary.main", "&:hover": { backgroundColor: "action.hover" } },
-          children: tipoExpander === "fecha" ? /* @__PURE__ */ jsx16(CalendarMonthIcon, { sx: { fontSize: 16 } }) : tipoExpander === "texto" ? /* @__PURE__ */ jsx16(SearchIcon2, { sx: { fontSize: 16 } }) : /* @__PURE__ */ jsx16(ArrowDropDownIcon, { sx: { fontSize: 20 } })
-        }
-      )
+      endAdornment: expander.lupa
     }
   );
-  const conMenu = /* @__PURE__ */ jsxs13(Fragment3, { children: [
+  const conMenu = /* @__PURE__ */ jsxs13(Fragment4, { children: [
     editor,
-    expansion && entradaRef.current && (expansion.tipo === "opciones" ? /* @__PURE__ */ jsx16(
-      MenuDeOpciones,
-      {
-        anclaje: entradaRef.current,
-        opciones: expansion.opciones,
-        busquedaInicial: expansion.busqueda,
-        onElegir: elegirOpcion,
-        onCerrar: cerrarExpansion
-      }
-    ) : expansion.tipo === "fecha" ? /* @__PURE__ */ jsx16(
-      SelectorDeFecha,
-      {
-        anclaje: entradaRef.current,
-        fechaActual: fechaDeValor(row[column.key]),
-        admiteNulo: fieldDefinition.nullable !== false,
-        onElegir: confirmarEnExpansion,
-        onCerrar: cerrarExpansion
-      }
-    ) : /* @__PURE__ */ jsx16(
-      VentanaDeTexto,
-      {
-        anclaje: entradaRef.current,
-        texto: editingValue === null || editingValue === void 0 ? "" : String(editingValue),
-        editable: true,
-        onAceptar: confirmarEnExpansion,
-        onCerrar: cerrarExpansion
-      }
-    ))
+    expander.ventana
   ] });
-  return currentCellFeedback?.message ? /* @__PURE__ */ jsx16(Tooltip5, { title: currentCellFeedback.message, children: /* @__PURE__ */ jsx16("div", { style: { width: "100%" }, children: conMenu }) }) : conMenu;
+  return currentCellFeedback?.message ? /* @__PURE__ */ jsx17(Tooltip5, { title: currentCellFeedback.message, children: /* @__PURE__ */ jsx17("div", { style: { width: "100%" }, children: conMenu }) }) : conMenu;
 }
 var InputRenderer_default = InputRenderer;
 
 // src/components/grid/renderers/editCellRenderers.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var allColumnsEditCellRenderer = (props, allColumns) => {
   const column = props.column;
   if (!esColumnaPropia(column)) return void 0;
@@ -3225,7 +3271,7 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         if (!isFieldEditableByUI) {
           return void 0;
         }
-        return /* @__PURE__ */ jsx17(
+        return /* @__PURE__ */ jsx18(
           InputRenderer_default,
           {
             ...props,
@@ -3250,6 +3296,14 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
   }
 };
 
+// src/utils/columnasOcultas.ts
+function columnasOcultasIniciales(tableDefinition) {
+  return Array.from(new Set(tableDefinition.hiddenColumns ?? []));
+}
+function campoDibujable(field) {
+  return field.visible !== false;
+}
+
 // src/hooks/grid/useGridColumns.ts
 var estimateTextWidth = (text) => text.length * 8 + 16;
 var calcularAnchosDeColumnas = (tableDefinition, filas) => {
@@ -3287,6 +3341,8 @@ var useGridColumns = ({
   tableDefinition,
   anchosCalculados,
   fixedFields,
+  columnasOcultas,
+  ocultarColumna,
   primaryKey,
   setTableData,
   handleKeyPressInEditor,
@@ -3300,7 +3356,7 @@ var useGridColumns = ({
   const columns = useMemo8(() => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
-      return !columnaOcultaPorFixedField(fixedFields, field.name) && field.visible !== false;
+      return campoDibujable(field) && !columnaOcultaPorFixedField(fixedFields, field.name) && !columnasOcultas.has(field.name);
     });
     const defaultColumns = fieldsToShow.map((fieldDef) => {
       const isFixedField = valorFijoDe(fixedFields, fieldDef.name) !== void 0;
@@ -3325,7 +3381,7 @@ var useGridColumns = ({
         registrarEditor,
         width: colWidth,
         minWidth: 40,
-        renderHeaderCell: (props) => defaultColumnHeaderCellRenderer(props, fieldDef),
+        renderHeaderCell: (props) => defaultColumnHeaderCellRenderer(props, fieldDef, ocultarColumna),
         renderSummaryCell: (props) => defaultColumnSummaryCellRenderer(props, fixedFields)
       };
       return column;
@@ -3348,7 +3404,7 @@ var useGridColumns = ({
       editable: false,
       resizable: false,
       sortable: false,
-      renderHeaderCell: () => React12.createElement(ActionsColumnHeaderCell, {
+      renderHeaderCell: () => React13.createElement(ActionsColumnHeaderCell, {
         toggleFilterVisibility,
         handleDataGridOptions: (e) => abrirOpcionesDeGrilla(e.currentTarget),
         handleAddRow,
@@ -3388,12 +3444,12 @@ var useGridColumns = ({
       renderEditCell: (props) => allColumnsEditCellRenderer(props, allColumns),
       renderCell: (props) => allColumnsCellRenderer(props)
     }));
-  }, [tableDefinition, anchosCalculados, fixedFields, primaryKey, setTableData, handleKeyPressInEditor, registrarEditor, handleDeleteRow, handleAddRow, handleVerticalEditRow, toggleFilterVisibility, abrirOpcionesDeGrilla]);
+  }, [tableDefinition, anchosCalculados, fixedFields, columnasOcultas, ocultarColumna, primaryKey, setTableData, handleKeyPressInEditor, registrarEditor, handleDeleteRow, handleAddRow, handleVerticalEditRow, toggleFilterVisibility, abrirOpcionesDeGrilla]);
   return { columns };
 };
 
 // src/components/grid/ImportDialog.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import {
   Dialog as Dialog2,
   DialogTitle as DialogTitle2,
@@ -3408,10 +3464,10 @@ import {
   Divider
 } from "@mui/material";
 import FileUploadIcon2 from "@mui/icons-material/FileUpload";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var ImportDialog = ({ open, onClose, onImport, loading }) => {
-  const [file, setFile] = useState12(null);
-  const [options, setOptions] = useState12({
+  const [file, setFile] = useState13(null);
+  const [options, setOptions] = useState13({
     skipUnknownFieldsAtImport: false,
     simplificateSpaces: true,
     replaceNewLineWithSpace: true
@@ -3432,12 +3488,12 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
   };
   return /* @__PURE__ */ jsxs14(Dialog2, { open, onClose: loading ? void 0 : onClose, maxWidth: "sm", fullWidth: true, children: [
     /* @__PURE__ */ jsxs14(DialogTitle2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-      /* @__PURE__ */ jsx18(FileUploadIcon2, { color: "primary" }),
+      /* @__PURE__ */ jsx19(FileUploadIcon2, { color: "primary" }),
       "Importar datos desde archivo"
     ] }),
-    /* @__PURE__ */ jsx18(DialogContent2, { dividers: true, children: /* @__PURE__ */ jsxs14(Stack, { spacing: 3, sx: { mt: 1 }, children: [
+    /* @__PURE__ */ jsx19(DialogContent2, { dividers: true, children: /* @__PURE__ */ jsxs14(Stack, { spacing: 3, sx: { mt: 1 }, children: [
       /* @__PURE__ */ jsxs14(Box9, { children: [
-        /* @__PURE__ */ jsx18(Typography7, { variant: "subtitle2", gutterBottom: true, fontWeight: "bold", children: "Seleccionar archivo" }),
+        /* @__PURE__ */ jsx19(Typography7, { variant: "subtitle2", gutterBottom: true, fontWeight: "bold", children: "Seleccionar archivo" }),
         /* @__PURE__ */ jsxs14(
           Box9,
           {
@@ -3451,7 +3507,7 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
               position: "relative"
             },
             children: [
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx19(
                 "input",
                 {
                   type: "file",
@@ -3468,19 +3524,19 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx18(Typography7, { variant: "body2", color: file ? "textPrimary" : "textSecondary", children: file ? file.name : "Haz clic aqu\xED para seleccionar un archivo" })
+              /* @__PURE__ */ jsx19(Typography7, { variant: "body2", color: file ? "textPrimary" : "textSecondary", children: file ? file.name : "Haz clic aqu\xED para seleccionar un archivo" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx18(Divider, {}),
+      /* @__PURE__ */ jsx19(Divider, {}),
       /* @__PURE__ */ jsxs14(Box9, { children: [
-        /* @__PURE__ */ jsx18(Typography7, { variant: "subtitle2", gutterBottom: true, fontWeight: "bold", children: "Opciones de importaci\xF3n" }),
+        /* @__PURE__ */ jsx19(Typography7, { variant: "subtitle2", gutterBottom: true, fontWeight: "bold", children: "Opciones de importaci\xF3n" }),
         /* @__PURE__ */ jsxs14(Stack, { children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             FormControlLabel,
             {
-              control: /* @__PURE__ */ jsx18(
+              control: /* @__PURE__ */ jsx19(
                 Checkbox,
                 {
                   checked: options.skipUnknownFieldsAtImport,
@@ -3488,13 +3544,13 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
                   size: "small"
                 }
               ),
-              label: /* @__PURE__ */ jsx18(Typography7, { variant: "body2", children: "Omitir campos desconocidos al importar" })
+              label: /* @__PURE__ */ jsx19(Typography7, { variant: "body2", children: "Omitir campos desconocidos al importar" })
             }
           ),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             FormControlLabel,
             {
-              control: /* @__PURE__ */ jsx18(
+              control: /* @__PURE__ */ jsx19(
                 Checkbox,
                 {
                   checked: options.simplificateSpaces,
@@ -3502,13 +3558,13 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
                   size: "small"
                 }
               ),
-              label: /* @__PURE__ */ jsx18(Typography7, { variant: "body2", children: "Simplificar espacios" })
+              label: /* @__PURE__ */ jsx19(Typography7, { variant: "body2", children: "Simplificar espacios" })
             }
           ),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             FormControlLabel,
             {
-              control: /* @__PURE__ */ jsx18(
+              control: /* @__PURE__ */ jsx19(
                 Checkbox,
                 {
                   checked: options.replaceNewLineWithSpace,
@@ -3516,21 +3572,21 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
                   size: "small"
                 }
               ),
-              label: /* @__PURE__ */ jsx18(Typography7, { variant: "body2", children: "Reemplazar saltos de l\xEDnea con espacios" })
+              label: /* @__PURE__ */ jsx19(Typography7, { variant: "body2", children: "Reemplazar saltos de l\xEDnea con espacios" })
             }
           )
         ] })
       ] })
     ] }) }),
     /* @__PURE__ */ jsxs14(DialogActions2, { sx: { px: 3, py: 2 }, children: [
-      /* @__PURE__ */ jsx18(Button5, { onClick: onClose, disabled: loading, children: "Cancelar" }),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(Button5, { onClick: onClose, disabled: loading, children: "Cancelar" }),
+      /* @__PURE__ */ jsx19(
         Button5,
         {
           onClick: handleConfirm,
           variant: "contained",
           disabled: !file || loading,
-          startIcon: /* @__PURE__ */ jsx18(FileUploadIcon2, {}),
+          startIcon: /* @__PURE__ */ jsx19(FileUploadIcon2, {}),
           children: loading ? "Procesando..." : "Confirmar Importaci\xF3n"
         }
       )
@@ -3539,7 +3595,7 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
 };
 
 // src/components/grid/ExportDialog.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import {
   Dialog as Dialog3,
   DialogTitle as DialogTitle3,
@@ -3559,22 +3615,23 @@ import {
 } from "@mui/material";
 import * as XLSX from "xlsx";
 import typeStore5 from "type-store";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var ExportDialog = ({
   open,
   onClose,
   tableDefinition,
+  columnasOcultas,
   tableData,
   filteredRows,
   username = "anonymous"
 }) => {
-  const [format, setFormat] = useState13("xlsx");
-  const [options, setOptions] = useState13({
+  const [format, setFormat] = useState14("xlsx");
+  const [options, setOptions] = useState14({
     fromOtherTables: true,
     readOnly: true,
     hiddens: false
   });
-  const [isPreparing, setIsPreparing] = useState13(false);
+  const [isPreparing, setIsPreparing] = useState14(false);
   const handleOptionChange = (event) => {
     setOptions({
       ...options,
@@ -3594,8 +3651,7 @@ var ExportDialog = ({
   };
   const executeExport = async () => {
     const fieldsDef2Export = tableDefinition.fields.filter((fieldDef) => {
-      const isVisible = fieldDef.visible !== false;
-      return (fieldDef.inTable !== false || options.fromOtherTables) && isVisible && (fieldDef.editable !== false || options.readOnly || tableDefinition.primaryKey?.includes(fieldDef.name)) && (isVisible || options.hiddens);
+      return (fieldDef.inTable !== false || options.fromOtherTables) && campoDibujable(fieldDef) && (fieldDef.editable !== false || options.readOnly || tableDefinition.primaryKey?.includes(fieldDef.name)) && (!columnasOcultas.has(fieldDef.name) || options.hiddens);
     });
     if (format === "xlsx") {
       await excelExport(fieldsDef2Export);
@@ -3705,47 +3761,47 @@ var ExportDialog = ({
     }, 0);
   };
   return /* @__PURE__ */ jsxs15(Dialog3, { open, onClose, maxWidth: "xs", fullWidth: true, children: [
-    /* @__PURE__ */ jsx19(DialogTitle3, { children: "Exportar Datos" }),
-    /* @__PURE__ */ jsx19(DialogContent3, { children: isPreparing ? /* @__PURE__ */ jsxs15(Box10, { display: "flex", flexDirection: "column", alignItems: "center", py: 4, children: [
-      /* @__PURE__ */ jsx19(CircularProgress2, {}),
-      /* @__PURE__ */ jsx19(Typography8, { sx: { mt: 2 }, children: "Preparando exportaci\xF3n..." })
+    /* @__PURE__ */ jsx20(DialogTitle3, { children: "Exportar Datos" }),
+    /* @__PURE__ */ jsx20(DialogContent3, { children: isPreparing ? /* @__PURE__ */ jsxs15(Box10, { display: "flex", flexDirection: "column", alignItems: "center", py: 4, children: [
+      /* @__PURE__ */ jsx20(CircularProgress2, {}),
+      /* @__PURE__ */ jsx20(Typography8, { sx: { mt: 2 }, children: "Preparando exportaci\xF3n..." })
     ] }) : /* @__PURE__ */ jsxs15(Box10, { sx: { mt: 1 }, children: [
       /* @__PURE__ */ jsxs15(FormControl2, { component: "fieldset", children: [
-        /* @__PURE__ */ jsx19(FormLabel, { component: "legend", children: "Formato" }),
+        /* @__PURE__ */ jsx20(FormLabel, { component: "legend", children: "Formato" }),
         /* @__PURE__ */ jsxs15(
           RadioGroup,
           {
             value: format,
             onChange: (e) => setFormat(e.target.value),
             children: [
-              /* @__PURE__ */ jsx19(FormControlLabel2, { value: "xlsx", control: /* @__PURE__ */ jsx19(Radio, {}), label: "Excel (.xlsx)" }),
-              /* @__PURE__ */ jsx19(FormControlLabel2, { value: "tab", control: /* @__PURE__ */ jsx19(Radio, {}), label: "Tabulado (.tab | )" }),
-              /* @__PURE__ */ jsx19(FormControlLabel2, { value: "csv", control: /* @__PURE__ */ jsx19(Radio, {}), label: "CSV (.csv , )" })
+              /* @__PURE__ */ jsx20(FormControlLabel2, { value: "xlsx", control: /* @__PURE__ */ jsx20(Radio, {}), label: "Excel (.xlsx)" }),
+              /* @__PURE__ */ jsx20(FormControlLabel2, { value: "tab", control: /* @__PURE__ */ jsx20(Radio, {}), label: "Tabulado (.tab | )" }),
+              /* @__PURE__ */ jsx20(FormControlLabel2, { value: "csv", control: /* @__PURE__ */ jsx20(Radio, {}), label: "CSV (.csv , )" })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ jsxs15(Box10, { sx: { mt: 3 }, children: [
-        /* @__PURE__ */ jsx19(Typography8, { variant: "subtitle2", gutterBottom: true, children: "Opciones de campos:" }),
+        /* @__PURE__ */ jsx20(Typography8, { variant: "subtitle2", gutterBottom: true, children: "Opciones de campos:" }),
         /* @__PURE__ */ jsxs15(FormGroup, { children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             FormControlLabel2,
             {
-              control: /* @__PURE__ */ jsx19(Checkbox2, { checked: options.fromOtherTables, onChange: handleOptionChange, name: "fromOtherTables" }),
+              control: /* @__PURE__ */ jsx20(Checkbox2, { checked: options.fromOtherTables, onChange: handleOptionChange, name: "fromOtherTables" }),
               label: "Desde otras tablas"
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             FormControlLabel2,
             {
-              control: /* @__PURE__ */ jsx19(Checkbox2, { checked: options.readOnly, onChange: handleOptionChange, name: "readOnly" }),
+              control: /* @__PURE__ */ jsx20(Checkbox2, { checked: options.readOnly, onChange: handleOptionChange, name: "readOnly" }),
               label: "Solo lectura"
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             FormControlLabel2,
             {
-              control: /* @__PURE__ */ jsx19(Checkbox2, { checked: options.hiddens, onChange: handleOptionChange, name: "hiddens" }),
+              control: /* @__PURE__ */ jsx20(Checkbox2, { checked: options.hiddens, onChange: handleOptionChange, name: "hiddens" }),
               label: "Ocultos"
             }
           )
@@ -3753,46 +3809,66 @@ var ExportDialog = ({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxs15(DialogActions3, { children: [
-      /* @__PURE__ */ jsx19(Button6, { onClick: onClose, disabled: isPreparing, children: "Cancelar" }),
-      /* @__PURE__ */ jsx19(Button6, { onClick: handlePrepareExport, variant: "contained", disabled: isPreparing, children: "Descargar" })
+      /* @__PURE__ */ jsx20(Button6, { onClick: onClose, disabled: isPreparing, children: "Cancelar" }),
+      /* @__PURE__ */ jsx20(Button6, { onClick: handlePrepareExport, variant: "contained", disabled: isPreparing, children: "Descargar" })
     ] })
   ] });
 };
 
+// src/components/grid/DialogoDeColumnas.tsx
+import { Box as Box11, Button as Button7, Dialog as Dialog4, DialogActions as DialogActions4, DialogContent as DialogContent4, DialogTitle as DialogTitle4, List as List3, ListItemButton as ListItemButton3, ListItemText as ListItemText2, Typography as Typography9 } from "@mui/material";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var DialogoDeColumnas = ({ open, onClose, columnas, ocultas, alternarColumna }) => {
+  const lista = (titulo, nombres, idDeLista) => /* @__PURE__ */ jsxs16(Box11, { sx: { flex: 1, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx21(Typography9, { variant: "subtitle2", sx: { mb: 1 }, children: titulo }),
+    /* @__PURE__ */ jsx21(List3, { dense: true, "data-testid": idDeLista, sx: { maxHeight: 360, overflow: "auto", border: 1, borderColor: "divider", borderRadius: 1 }, children: nombres.map((nombre) => /* @__PURE__ */ jsx21(ListItemButton3, { onClick: () => alternarColumna(nombre), children: /* @__PURE__ */ jsx21(ListItemText2, { primary: nombre }) }, nombre)) })
+  ] });
+  return /* @__PURE__ */ jsxs16(Dialog4, { open, onClose, maxWidth: "sm", fullWidth: true, children: [
+    /* @__PURE__ */ jsx21(DialogTitle4, { children: "Ocultar o mostrar columnas" }),
+    /* @__PURE__ */ jsx21(DialogContent4, { children: /* @__PURE__ */ jsxs16(Box11, { sx: { display: "flex", gap: 2, pt: 1 }, children: [
+      lista("Columnas mostradas", columnas.filter((nombre) => !ocultas.has(nombre)), "columnas-mostradas"),
+      lista("Columnas ocultas", columnas.filter((nombre) => ocultas.has(nombre)), "columnas-ocultas")
+    ] }) }),
+    /* @__PURE__ */ jsx21(DialogActions4, { children: /* @__PURE__ */ jsx21(Button7, { onClick: onClose, children: "Cerrar" }) })
+  ] });
+};
+
 // src/pages/VerticalEditorPage.tsx
-import { useState as useState14, useCallback as useCallback10, useMemo as useMemo9, useRef as useRef6 } from "react";
+import { useState as useState15, useCallback as useCallback11, useMemo as useMemo9, useRef as useRef6 } from "react";
 import {
-  DialogTitle as DialogTitle4,
-  DialogContent as DialogContent4,
-  DialogActions as DialogActions4,
-  Button as Button7,
+  DialogTitle as DialogTitle5,
+  DialogContent as DialogContent5,
+  DialogActions as DialogActions5,
+  Button as Button8,
   Alert,
-  Box as Box11,
+  Box as Box12,
   CircularProgress as CircularProgress3,
   IconButton as IconButton5,
-  Typography as Typography9
+  Typography as Typography10
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var SIN_OCULTAS = /* @__PURE__ */ new Set();
 var VerticalEditorPage = ({
   tableName,
   tableDefinition,
   initialData,
   fixedFields,
+  columnasOcultas = SIN_OCULTAS,
   isNewRow = false,
   onSaveSuccess,
   onClose
 }) => {
   const { saveRecord } = useTableRecordSave();
-  const [internalIsNewRow, setInternalIsNewRow] = useState14(isNewRow);
-  const [formData, setFormData] = useState14(initialData);
-  const [lastSavedData, setLastSavedData] = useState14(initialData);
-  const [validityMap, setValidityMap] = useState14({});
-  const [globalError, setGlobalError] = useState14(null);
-  const [isSaving, setIsSaving] = useState14(false);
-  const [fieldFeedback, setFieldFeedback] = useState14({});
+  const [internalIsNewRow, setInternalIsNewRow] = useState15(isNewRow);
+  const [formData, setFormData] = useState15(initialData);
+  const [lastSavedData, setLastSavedData] = useState15(initialData);
+  const [validityMap, setValidityMap] = useState15({});
+  const [globalError, setGlobalError] = useState15(null);
+  const [isSaving, setIsSaving] = useState15(false);
+  const [fieldFeedback, setFieldFeedback] = useState15({});
   const feedbackTimersRef = useRef6({});
-  const handleFieldChange = useCallback10((fieldName, newValue, isValid) => {
+  const handleFieldChange = useCallback11((fieldName, newValue, isValid) => {
     setFormData((prev) => ({ ...prev, [fieldName]: newValue }));
     setValidityMap((prev) => ({ ...prev, [fieldName]: isValid }));
     setGlobalError(null);
@@ -3810,7 +3886,7 @@ var VerticalEditorPage = ({
     }
     return true;
   }, [formData, validityMap, tableDefinition.fields]);
-  const handleCommit = useCallback10(async (fieldName, newValue, isValid) => {
+  const handleCommit = useCallback11(async (fieldName, newValue, isValid) => {
     if (!isValid) return;
     if (sameValue(newValue, lastSavedData[fieldName])) {
       return;
@@ -3900,21 +3976,21 @@ var VerticalEditorPage = ({
     tableDefinition,
     onSaveSuccess
   ]);
-  return /* @__PURE__ */ jsxs16(Box11, { sx: { p: 2, display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs16(DialogTitle4, { sx: { px: 0, pt: 0, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxs16(Typography9, { component: "div", variant: "h6", children: [
+  return /* @__PURE__ */ jsxs17(Box12, { sx: { p: 2, display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs17(DialogTitle5, { sx: { px: 0, pt: 0, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs17(Typography10, { component: "div", variant: "h6", children: [
         isNewRow ? "Nuevo Registro" : "Editar Registro",
         " - ",
         tableDefinition.title || tableName
       ] }),
-      /* @__PURE__ */ jsx20(IconButton5, { onClick: onClose, size: "small", edge: "end", children: /* @__PURE__ */ jsx20(CloseIcon, {}) })
+      /* @__PURE__ */ jsx22(IconButton5, { onClick: onClose, size: "small", edge: "end", children: /* @__PURE__ */ jsx22(CloseIcon, {}) })
     ] }),
-    /* @__PURE__ */ jsxs16(DialogContent4, { dividers: true, sx: { px: 2, flexGrow: 1, py: 1 }, children: [
-      globalError && /* @__PURE__ */ jsx20(Alert, { severity: "error", sx: { mb: 2 }, children: globalError }),
-      /* @__PURE__ */ jsx20(Box11, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: tableDefinition.fields.map((field) => {
+    /* @__PURE__ */ jsxs17(DialogContent5, { dividers: true, sx: { px: 2, flexGrow: 1, py: 1 }, children: [
+      globalError && /* @__PURE__ */ jsx22(Alert, { severity: "error", sx: { mb: 2 }, children: globalError }),
+      /* @__PURE__ */ jsx22(Box12, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: tableDefinition.fields.filter((field) => campoDibujable(field) && !columnasOcultas.has(field.name)).map((field) => {
         const isFixed = fixedFields?.some((ff) => ff.fieldName === field.name);
         const isMandatory = field.nullable === false || tableDefinition.primaryKey.includes(field.name);
-        return /* @__PURE__ */ jsx20(Box11, { sx: { width: "100%", maxWidth: "100%" }, children: /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx22(Box12, { sx: { width: "100%", maxWidth: "100%" }, children: /* @__PURE__ */ jsx22(
           TypedField,
           {
             fieldDef: field,
@@ -3928,12 +4004,12 @@ var VerticalEditorPage = ({
         ) }, field.name);
       }) })
     ] }),
-    /* @__PURE__ */ jsxs16(DialogActions4, { sx: { px: 0, pb: 0, pt: 2, justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxs16(Box11, { children: [
-        isSaving && /* @__PURE__ */ jsx20(CircularProgress3, { size: 20, sx: { ml: 2 } }),
-        /* @__PURE__ */ jsx20("span", { style: { marginLeft: 10, fontSize: "0.8rem", color: "#666" }, children: isSaving ? "Guardando..." : "Cambios auto-guardados" })
+    /* @__PURE__ */ jsxs17(DialogActions5, { sx: { px: 0, pb: 0, pt: 2, justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs17(Box12, { children: [
+        isSaving && /* @__PURE__ */ jsx22(CircularProgress3, { size: 20, sx: { ml: 2 } }),
+        /* @__PURE__ */ jsx22("span", { style: { marginLeft: 10, fontSize: "0.8rem", color: "#666" }, children: isSaving ? "Guardando..." : "Cambios auto-guardados" })
       ] }),
-      /* @__PURE__ */ jsx20(Button7, { variant: "outlined", onClick: onClose, children: "Cerrar" })
+      /* @__PURE__ */ jsx22(Button8, { variant: "outlined", onClick: onClose, children: "Cerrar" })
     ] })
   ] });
 };
@@ -4010,7 +4086,7 @@ var baseDelBundler = import.meta.env?.BASE_URL ?? "/";
 var rutaBase = baseDelBundler.replace(/\/+$/, "");
 
 // src/components/grid/GenericDataGrid.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var SUMMARY_ROW_HEIGHT = 35;
 var FILTER_ROW_HEIGHT = 35;
 var HEADER_ROW_HEIGHT = 30;
@@ -4042,8 +4118,8 @@ var StaticAncestorGrid = ({ ancestor, index, fieldsToHide }) => {
         name: field.label || cambiarGuionesBajosPorEspacios(field.name),
         width: 150,
         editable: false,
-        renderHeaderCell: () => /* @__PURE__ */ jsx21(Box12, { sx: { p: 0.5, height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx21(
-          Typography10,
+        renderHeaderCell: () => /* @__PURE__ */ jsx23(Box13, { sx: { p: 0.5, height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx23(
+          Typography11,
           {
             variant: "caption",
             sx: {
@@ -4054,11 +4130,11 @@ var StaticAncestorGrid = ({ ancestor, index, fieldsToHide }) => {
             children: field.label || cambiarGuionesBajosPorEspacios(field.name)
           }
         ) }),
-        renderCell: (props) => /* @__PURE__ */ jsx21(Box12, { sx: { px: 1, height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx21(Typography10, { variant: "body2", sx: { fontSize: "0.875rem" }, noWrap: true, children: String(props.row[field.name] ?? "") }) })
+        renderCell: (props) => /* @__PURE__ */ jsx23(Box13, { sx: { px: 1, height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx23(Typography11, { variant: "body2", sx: { fontSize: "0.875rem" }, noWrap: true, children: String(props.row[field.name] ?? "") }) })
       };
     });
   }, [tableDefinition, fieldsToHide]);
-  return /* @__PURE__ */ jsxs17(Box12, { sx: {
+  return /* @__PURE__ */ jsxs18(Box13, { sx: {
     mb: 1.5,
     ml: index * 4,
     // El primer ancestro (index 0) no tiene margen, los siguientes sí
@@ -4069,7 +4145,7 @@ var StaticAncestorGrid = ({ ancestor, index, fieldsToHide }) => {
     boxShadow: theme.shadows[1],
     bgcolor: "background.paper"
   }, children: [
-    /* @__PURE__ */ jsx21(Box12, { sx: {
+    /* @__PURE__ */ jsx23(Box13, { sx: {
       bgcolor: "primary.main",
       color: "primary.contrastText",
       px: 1.5,
@@ -4080,8 +4156,8 @@ var StaticAncestorGrid = ({ ancestor, index, fieldsToHide }) => {
       alignItems: "center",
       fontWeight: "bold",
       gap: 1
-    }, children: /* @__PURE__ */ jsx21(Typography10, { variant: "subtitle2", component: "div", children: cambiarGuionesBajosPorEspacios(ancestor.tableName) }) }),
-    /* @__PURE__ */ jsx21(
+    }, children: /* @__PURE__ */ jsx23(Typography11, { variant: "subtitle2", component: "div", children: cambiarGuionesBajosPorEspacios(ancestor.tableName) }) }),
+    /* @__PURE__ */ jsx23(
       DataGrid,
       {
         className: "rdg-light",
@@ -4122,32 +4198,38 @@ var GenericDataGrid = ({
     // eslint-disable-line react-hooks/exhaustive-deps
   );
   const cacheHeredado = useContext4(CacheGrillasContext);
-  const [cachePropio] = useState15(() => /* @__PURE__ */ new Map());
+  const [cachePropio] = useState16(() => /* @__PURE__ */ new Map());
   const cache = cacheHeredado ?? cachePropio;
-  const [guardada] = useState15(() => claveCache ? cache.get(claveCache) : void 0);
+  const [guardada] = useState16(() => claveCache ? cache.get(claveCache) : void 0);
   const claveCargadaRef = useRef7(guardada ? `${tableName}|${claveFixedFields}|${claveParametros}` : null);
-  const [tableDefinition, setTableDefinition] = useState15(guardada?.tableDefinition ?? null);
-  const [tableData, setTableData] = useState15(guardada?.tableData ?? []);
-  const [cargandoInicial, setCargandoInicial] = useState15(!guardada);
-  const [errorDeCarga, setErrorDeCarga] = useState15(null);
-  const [anchosCalculados, setAnchosCalculados] = useState15(() => guardada?.anchosCalculados ?? /* @__PURE__ */ new Map());
-  const [detallesAbiertos, setDetallesAbiertos] = useState15(guardada?.detallesAbiertos ?? []);
-  const [altosDetalle, setAltosDetalle] = useState15(() => guardada?.altosDetalle ?? /* @__PURE__ */ new Map());
-  const [anchosDetalle, setAnchosDetalle] = useState15(() => /* @__PURE__ */ new Map());
-  const [selectedRows, setSelectedRows] = useState15(() => /* @__PURE__ */ new Set());
-  const [, setSelectedCell] = useState15(void 0);
-  const [estadoGrilla] = useState15(crearEstadoGrilla);
+  const [tableDefinition, setTableDefinition] = useState16(guardada?.tableDefinition ?? null);
+  const [tableData, setTableData] = useState16(guardada?.tableData ?? []);
+  const [cargandoInicial, setCargandoInicial] = useState16(!guardada);
+  const [errorDeCarga, setErrorDeCarga] = useState16(null);
+  const [anchosCalculados, setAnchosCalculados] = useState16(() => guardada?.anchosCalculados ?? /* @__PURE__ */ new Map());
+  const [columnasOcultas, setColumnasOcultas] = useState16(() => guardada?.columnasOcultas ?? []);
+  const [openDialogoDeColumnas, setOpenDialogoDeColumnas] = useState16(false);
+  const conjuntoDeOcultas = useMemo10(() => new Set(columnasOcultas), [columnasOcultas]);
+  const ocultarColumna = useCallback12((columna) => setColumnasOcultas((anteriores) => anteriores.includes(columna) ? anteriores : [...anteriores, columna]), []);
+  const alternarColumna = useCallback12((columna) => setColumnasOcultas((anteriores) => anteriores.includes(columna) ? anteriores.filter((oculta) => oculta !== columna) : [...anteriores, columna]), []);
+  const abrirDialogoDeColumnas = useCallback12(() => setOpenDialogoDeColumnas(true), []);
+  const [detallesAbiertos, setDetallesAbiertos] = useState16(guardada?.detallesAbiertos ?? []);
+  const [altosDetalle, setAltosDetalle] = useState16(() => guardada?.altosDetalle ?? /* @__PURE__ */ new Map());
+  const [anchosDetalle, setAnchosDetalle] = useState16(() => /* @__PURE__ */ new Map());
+  const [selectedRows, setSelectedRows] = useState16(() => /* @__PURE__ */ new Set());
+  const [, setSelectedCell] = useState16(void 0);
+  const [estadoGrilla] = useState16(crearEstadoGrilla);
   const theme = useTheme4();
-  const [openDataGridOptions, setOpenDataGridOptions] = useState15(false);
-  const [dataGridOptionsAnchorEl, setDataGridOptionsAnchorEl] = useState15(null);
-  const [exitingRowIds, setExitingRowIds] = useState15(/* @__PURE__ */ new Set());
+  const [openDataGridOptions, setOpenDataGridOptions] = useState16(false);
+  const [dataGridOptionsAnchorEl, setDataGridOptionsAnchorEl] = useState16(null);
+  const [exitingRowIds, setExitingRowIds] = useState16(/* @__PURE__ */ new Set());
   const { showError } = useSnackbar();
   const { username: usuario } = useClientContext();
   const dataGridRef = useRef7(null);
   const rowAtEditStartRef = useRef7(null);
-  const [openImportDialog, setOpenImportDialog] = useState15(false);
-  const [openExportDialog, setOpenExportDialog] = useState15(false);
-  const [columnWidths, setColumnWidths] = useState15(() => /* @__PURE__ */ new Map());
+  const [openImportDialog, setOpenImportDialog] = useState16(false);
+  const [openExportDialog, setOpenExportDialog] = useState16(false);
+  const [columnWidths, setColumnWidths] = useState16(() => /* @__PURE__ */ new Map());
   const { callApi, callApiUpload, loading } = useApiCall();
   const primaryKey = useMemo10(() => {
     if (!tableDefinition) return ["id"];
@@ -4197,7 +4279,7 @@ var GenericDataGrid = ({
     filasDetalleRef.current = nuevas;
     return filas;
   }, [filteredRows, abiertos, tableDefinition, primaryKey]);
-  const altoDeDetalle = useCallback11((clave) => altosDetalle.get(clave) ?? ALTO_INICIAL_DETALLE, [altosDetalle]);
+  const altoDeDetalle = useCallback12((clave) => altosDetalle.get(clave) ?? ALTO_INICIAL_DETALLE, [altosDetalle]);
   const altoDetalles = useMemo10(
     () => filasMostradas.reduce((total, row) => esFilaDetalle(row) ? total + altoDeDetalle(row.clave) : total, 0),
     [filasMostradas, altoDeDetalle]
@@ -4244,9 +4326,9 @@ var GenericDataGrid = ({
     filasVisiblesMax,
     conPie
   });
-  const [contenidoDeCelda, setContenidoDeCelda] = useState15(null);
-  const verContenido = useCallback11((anclaje, texto) => setContenidoDeCelda({ anclaje, texto }), []);
-  const cerrarContenidoDeCelda = useCallback11(() => {
+  const [contenidoDeCelda, setContenidoDeCelda] = useState16(null);
+  const verContenido = useCallback12((anclaje, texto) => setContenidoDeCelda({ anclaje, texto }), []);
+  const cerrarContenidoDeCelda = useCallback12(() => {
     const anclaje = contenidoDeCelda?.anclaje;
     setContenidoDeCelda(null);
     setTimeout(() => anclaje?.focus(), 0);
@@ -4325,6 +4407,7 @@ var GenericDataGrid = ({
         setTableDefinition(definition);
         setSortColumns(getInitialSortColumns(definition));
         setAnchosCalculados(calcularAnchosDeColumnas(definition, data));
+        setColumnasOcultas(columnasOcultasIniciales(definition));
         setTableData(data);
         const filasDeFiltros = parametros.filterColumns ?? aFiltrosIniciales(definition.filterColumns);
         if (filasDeFiltros.length > 1) console.warn(`'${tableName}': varias filas de filtros (alternativas) todav\xEDa no est\xE1n soportadas; se aplica la primera`);
@@ -4347,8 +4430,8 @@ var GenericDataGrid = ({
   }, [tableName, claveFixedFields, fixedFields, claveParametros, parametros, showError, callApi, getInitialSortColumns, setSortColumns, aplicarFiltrosIniciales, guardada]);
   useEffect6(() => {
     if (!claveCache || !tableDefinition || cargandoInicial) return;
-    cache.set(claveCache, { tableDefinition, tableData, anchosCalculados, sortColumns, detallesAbiertos, altosDetalle });
-  }, [cache, claveCache, tableDefinition, tableData, anchosCalculados, sortColumns, detallesAbiertos, altosDetalle, cargandoInicial]);
+    cache.set(claveCache, { tableDefinition, tableData, anchosCalculados, columnasOcultas, sortColumns, detallesAbiertos, altosDetalle });
+  }, [cache, claveCache, tableDefinition, tableData, anchosCalculados, columnasOcultas, sortColumns, detallesAbiertos, altosDetalle, cargandoInicial]);
   useEffect6(() => {
     let timer = null;
     const desuscribir = estadoGrilla.suscribir(() => {
@@ -4374,11 +4457,11 @@ var GenericDataGrid = ({
       if (timer) clearTimeout(timer);
     };
   }, [estadoGrilla]);
-  const resetSortingDeLaTabla = useCallback11(() => {
+  const resetSortingDeLaTabla = useCallback12(() => {
     if (tableDefinition) resetSorting(tableDefinition);
   }, [tableDefinition, resetSorting]);
-  const abrirImportacion = useCallback11(() => setOpenImportDialog(true), []);
-  const abrirExportacion = useCallback11(() => setOpenExportDialog(true), []);
+  const abrirImportacion = useCallback12(() => setOpenImportDialog(true), []);
+  const abrirExportacion = useCallback12(() => setOpenExportDialog(true), []);
   const { menuOptions } = useGridMenu({
     tableDefinition,
     tableName,
@@ -4387,13 +4470,14 @@ var GenericDataGrid = ({
     callApi,
     resetSorting: tableDefinition ? resetSortingDeLaTabla : void 0,
     triggerImport: abrirImportacion,
-    triggerExport: abrirExportacion
+    triggerExport: abrirExportacion,
+    abrirColumnas: abrirDialogoDeColumnas
   });
-  const abrirOpcionesDeGrilla = useCallback11((anchorEl) => {
+  const abrirOpcionesDeGrilla = useCallback12((anchorEl) => {
     setDataGridOptionsAnchorEl(anchorEl);
     setOpenDataGridOptions(true);
   }, []);
-  const editarEnFicha = useCallback11((row) => {
+  const editarEnFicha = useCallback12((row) => {
     rowAtEditStartRef.current = { ...row };
     handleVerticalEditRow(row);
   }, [handleVerticalEditRow]);
@@ -4401,6 +4485,8 @@ var GenericDataGrid = ({
     tableDefinition,
     anchosCalculados,
     fixedFields,
+    columnasOcultas: conjuntoDeOcultas,
+    ocultarColumna,
     primaryKey,
     setTableData,
     handleKeyPressInEditor,
@@ -4411,7 +4497,7 @@ var GenericDataGrid = ({
     toggleFilterVisibility,
     abrirOpcionesDeGrilla
   });
-  const abrirDetalleEnPestana = useCallback11((row, detailTable) => {
+  const abrirDetalleEnPestana = useCallback12((row, detailTable) => {
     if (!onOpenDetail || !tableDefinition || !detailTable.table) return;
     const porCampo = /* @__PURE__ */ new Map();
     [...fixedFields ?? [], ...calcularFixedFieldsDetalle(detailTable, row)].forEach((ff) => porCampo.set(ff.fieldName, ff));
@@ -4421,12 +4507,12 @@ var GenericDataGrid = ({
     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 abrirWScreenEnPestana = useCallback12((row, detailTable) => {
     const parametros2 = new URLSearchParams();
     calcularFixedFieldsDetalle(detailTable, row).forEach((ff) => parametros2.set(ff.fieldName, String(ff.value)));
     window.open(`${window.location.origin}${rutaBase}/wScreens/${detailTable.wScreen}?${parametros2}`, "_blank");
   }, []);
-  const alternarDetalle = useCallback11((row, rowId, detailTable, enOtraPestana) => {
+  const alternarDetalle = useCallback12((row, rowId, detailTable, enOtraPestana) => {
     if (enOtraPestana && detailTable.wScreen) {
       abrirWScreenEnPestana(row, detailTable);
       return;
@@ -4438,7 +4524,7 @@ var GenericDataGrid = ({
     const clave = claveDetalle(rowId, detailTable);
     setDetallesAbiertos((anteriores) => anteriores.includes(clave) ? anteriores.filter((c) => c !== clave) : [...anteriores, clave]);
   }, [onOpenDetail, abrirDetalleEnPestana, abrirWScreenEnPestana]);
-  const [medidas, setMedidas] = useState15(null);
+  const [medidas, setMedidas] = useState16(null);
   useEffect6(() => {
     const elemento = dataGridRef.current?.element;
     if (!elemento) return;
@@ -4452,7 +4538,7 @@ var GenericDataGrid = ({
     return () => observador.disconnect();
   }, [tableDefinition, cargandoInicial]);
   const anchoVisible = medidas?.ancho ?? null;
-  const [altoDeVentana, setAltoDeVentana] = useState15(null);
+  const [altoDeVentana, setAltoDeVentana] = useState16(null);
   useEffect6(() => {
     if (anidada) return;
     const elemento = dataGridRef.current?.element;
@@ -4465,22 +4551,22 @@ var GenericDataGrid = ({
   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) => {
+  const cambiarAnchoDetalle = useCallback12((clave, ancho) => {
     setAnchosDetalle((anteriores) => anteriores.get(clave) === ancho ? anteriores : new Map(anteriores).set(clave, ancho));
   }, []);
-  const cambiarAltoDetalle = useCallback11((clave, altoDeseado2) => {
+  const cambiarAltoDetalle = useCallback12((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 renderDetalle = useCallback12((fila) => {
     const { detailTable } = fila;
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         className: "fpr-detalle",
         style: { maxWidth: anchoVisible ? anchoVisible - 2 : void 0 },
         onKeyDown: (e) => e.stopPropagation(),
-        children: detailTable.table ? /* @__PURE__ */ jsx21(
+        children: detailTable.table ? /* @__PURE__ */ jsx23(
           GenericDataGrid,
           {
             tableName: detailTable.table,
@@ -4493,7 +4579,7 @@ var GenericDataGrid = ({
             onOpenDetail,
             ancestors: tableDefinition ? [...ancestors, { tableName: tableDefinition.name, row: fila.filaPadre, tableDefinition, fixedFields: fila.fixedFields }] : ancestors
           }
-        ) : detailTable.wScreen ? /* @__PURE__ */ jsx21(
+        ) : detailTable.wScreen ? /* @__PURE__ */ jsx23(
           DetalleWScreen,
           {
             fila,
@@ -4501,7 +4587,7 @@ var GenericDataGrid = ({
             onAlto: (alto) => cambiarAltoDetalle(fila.clave, alto),
             onAncho: (ancho) => cambiarAnchoDetalle(fila.clave, ancho)
           }
-        ) : /* @__PURE__ */ jsxs17(Alert2, { severity: "warning", children: [
+        ) : /* @__PURE__ */ jsxs18(Alert2, { severity: "warning", children: [
           "El detalle '",
           detailTable.abr,
           "' no tiene ni tabla ni wScreen."
@@ -4514,9 +4600,9 @@ var GenericDataGrid = ({
   useEffect6(() => {
     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(
+  const rowKeyGetter = useCallback12((row) => esFilaDetalle(row) ? `detalle:${row.clave}` : getPrimaryKeyValues(row, primaryKey), [primaryKey]);
+  const rowHeight = useCallback12((row) => esFilaDetalle(row) ? altoDeDetalle(row.clave) : ROW_HEIGHT, [altoDeDetalle]);
+  const rowClass = useCallback12(
     (row) => esFilaDetalle(row) ? "fpr-fila-detalle" : exitingRowIds.has(getPrimaryKeyValues(row, primaryKey)) ? "fpr-fila-saliendo" : void 0,
     [exitingRowIds, primaryKey]
   );
@@ -4547,19 +4633,19 @@ var GenericDataGrid = ({
   };
   const fallBackMessage = getFallBackMessage();
   if (cargandoInicial) {
-    return /* @__PURE__ */ jsxs17(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
-      /* @__PURE__ */ jsx21(CircularProgress4, {}),
-      /* @__PURE__ */ jsx21(Typography10, { variant: "h6", sx: { ml: 2 }, children: "Cargando tabla..." })
+    return /* @__PURE__ */ jsxs18(Box13, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
+      /* @__PURE__ */ jsx23(CircularProgress4, {}),
+      /* @__PURE__ */ jsx23(Typography11, { variant: "h6", sx: { ml: 2 }, children: "Cargando tabla..." })
     ] });
   }
   if (errorDeCarga) {
-    return /* @__PURE__ */ jsx21(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx21(Alert2, { severity: "error", children: errorDeCarga }) });
+    return /* @__PURE__ */ jsx23(Box13, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx23(Alert2, { severity: "error", children: errorDeCarga }) });
   }
   if (!tableDefinition) {
-    return /* @__PURE__ */ jsx21(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx21(Alert2, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
+    return /* @__PURE__ */ jsx23(Box13, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx23(Alert2, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
   }
-  return /* @__PURE__ */ jsx21(CacheGrillasContext.Provider, { value: cache, children: /* @__PURE__ */ jsxs17(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__ */ jsx21(Box12, { sx: { px: 2, pt: 0, pb: 1, display: "flex", flexDirection: "column" }, children: ancestors.map((ancestor, index) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(CacheGrillasContext.Provider, { value: cache, children: /* @__PURE__ */ jsxs18(Box13, { 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__ */ jsx23(Box13, { sx: { px: 2, pt: 0, pb: 1, display: "flex", flexDirection: "column" }, children: ancestors.map((ancestor, index) => /* @__PURE__ */ jsx23(
       StaticAncestorGrid,
       {
         ancestor,
@@ -4568,8 +4654,8 @@ var GenericDataGrid = ({
       },
       index
     )) }),
-    /* @__PURE__ */ jsxs17(
-      Box12,
+    /* @__PURE__ */ jsxs18(
+      Box13,
       {
         sx: {
           backgroundColor: theme.palette.primary.main,
@@ -4591,17 +4677,17 @@ var GenericDataGrid = ({
           gap: 1
         },
         children: [
-          /* @__PURE__ */ jsxs17(Typography10, { variant: "subtitle2", component: "div", children: [
+          /* @__PURE__ */ jsxs18(Typography11, { variant: "subtitle2", component: "div", children: [
             titulo ?? cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name),
             " - ",
             filteredRows.length === tableData.length ? `${tableData.length} registros` : `${filteredRows.length} (F)`
           ] }),
-          loading && /* @__PURE__ */ jsx21(CircularProgress4, { size: 14, color: "inherit" })
+          loading && /* @__PURE__ */ jsx23(CircularProgress4, { size: 14, color: "inherit" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs17(
-      Box12,
+    /* @__PURE__ */ jsxs18(
+      Box13,
       {
         sx: {
           // Una grilla anidada se acota con px (el alto que le dio la de arriba, o el de una wScreen): una wScreen
@@ -4619,7 +4705,7 @@ var GenericDataGrid = ({
           pb: anidada ? 0 : 3
         },
         children: [
-          /* @__PURE__ */ jsx21(EstadoGrillaContext.Provider, { value: estadoGrilla, children: /* @__PURE__ */ jsx21(VistaGrillaContext.Provider, { value: vistaGrilla, children: /* @__PURE__ */ jsx21(DetallesGrillaContext.Provider, { value: detallesGrilla, children: /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx23(EstadoGrillaContext.Provider, { value: estadoGrilla, children: /* @__PURE__ */ jsx23(VistaGrillaContext.Provider, { value: vistaGrilla, children: /* @__PURE__ */ jsx23(DetallesGrillaContext.Provider, { value: detallesGrilla, children: /* @__PURE__ */ jsx23(
             DataGrid,
             {
               className: "rdg-light",
@@ -4649,8 +4735,8 @@ var GenericDataGrid = ({
               onCellKeyDown: handleCellKeyDown
             }
           ) }) }) }),
-          fallBackMessage && /* @__PURE__ */ jsx21(
-            Box12,
+          fallBackMessage && /* @__PURE__ */ jsx23(
+            Box13,
             {
               sx: {
                 position: "absolute",
@@ -4666,24 +4752,35 @@ var GenericDataGrid = ({
                 zIndex: tableData.length === 0 ? 10 : 1
                 // Mantenemos el zIndex superior para el estado vacío total
               },
-              children: /* @__PURE__ */ jsx21(Typography10, { variant: "body2", color: "textSecondary", children: fallBackMessage })
+              children: /* @__PURE__ */ jsx23(Typography11, { variant: "body2", color: "textSecondary", children: fallBackMessage })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx23(
       ExportDialog,
       {
         open: openExportDialog,
         onClose: () => setOpenExportDialog(false),
         tableDefinition,
+        columnasOcultas: conjuntoDeOcultas,
         tableData,
         filteredRows,
         username: usuario || "anonymous"
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx23(
+      DialogoDeColumnas,
+      {
+        open: openDialogoDeColumnas,
+        onClose: () => setOpenDialogoDeColumnas(false),
+        columnas: (tableDefinition?.fields ?? []).filter(campoDibujable).map((field) => field.name).filter((nombre) => !columnaOcultaPorFixedField(fixedFields, nombre)),
+        ocultas: conjuntoDeOcultas,
+        alternarColumna
+      }
+    ),
+    /* @__PURE__ */ jsx23(
       ConfirmDialog,
       {
         open: openConfirmDialog,
@@ -4692,7 +4789,7 @@ var GenericDataGrid = ({
         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__ */ jsx21(
+    /* @__PURE__ */ jsx23(
       DataGridOptionsDialog,
       {
         open: openDataGridOptions,
@@ -4701,7 +4798,7 @@ var GenericDataGrid = ({
         anchorEl: dataGridOptionsAnchorEl
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx23(
       ImportDialog,
       {
         open: openImportDialog,
@@ -4710,20 +4807,21 @@ var GenericDataGrid = ({
         loading
       }
     ),
-    /* @__PURE__ */ jsx21(
-      Dialog4,
+    /* @__PURE__ */ jsx23(
+      Dialog5,
       {
         open: openVerticalEditDialog,
         onClose: () => setOpenVerticalEditDialog(false),
         maxWidth: "sm",
         fullWidth: true,
-        children: rowToEditVertical && /* @__PURE__ */ jsx21(
+        children: rowToEditVertical && /* @__PURE__ */ jsx23(
           VerticalEditorPage,
           {
             tableName,
             tableDefinition,
             initialData: rowToEditVertical,
             fixedFields,
+            columnasOcultas: conjuntoDeOcultas,
             isNewRow: !!rowToEditVertical[NEW_ROW_INDICATOR],
             onSaveSuccess: (savedRow, isNewItem) => {
               setRowToEditVertical(savedRow);
@@ -4762,24 +4860,24 @@ var GenericDataGrid = ({
         )
       }
     ),
-    contenidoDeCelda && /* @__PURE__ */ jsx21(VentanaDeTexto, { anclaje: contenidoDeCelda.anclaje, texto: contenidoDeCelda.texto, editable: false, onAceptar: cerrarContenidoDeCelda, onCerrar: cerrarContenidoDeCelda })
+    contenidoDeCelda && /* @__PURE__ */ jsx23(VentanaDeTexto, { anclaje: contenidoDeCelda.anclaje, texto: contenidoDeCelda.texto, editable: false, onAceptar: cerrarContenidoDeCelda, onCerrar: cerrarContenidoDeCelda })
   ] }) });
 };
 var GenericDataGrid_default = GenericDataGrid;
 
 // src/App.tsx
-import React32, { useEffect as useEffect18, useMemo as useMemo16 } from "react";
+import React33, { useEffect as useEffect18, useMemo as useMemo16 } from "react";
 import { BrowserRouter, Routes, Route, useLocation as useLocation8, Navigate as Navigate4, Outlet as Outlet2 } from "react-router-dom";
 
 // src/components/MainLayout.tsx
 import { useEffect as useEffect9 } from "react";
 import { Outlet } from "react-router-dom";
 import {
-  Box as Box14,
+  Box as Box15,
   AppBar,
   Toolbar,
-  Typography as Typography12,
-  Button as Button8,
+  Typography as Typography13,
+  Button as Button9,
   Drawer,
   CssBaseline,
   IconButton as IconButton6,
@@ -4788,10 +4886,10 @@ import {
 } from "@mui/material";
 
 // src/contexts/AppContext.tsx
-import { createContext as createContext4, useContext as useContext5, useState as useState16, useEffect as useEffect7, useCallback as useCallback12, useMemo as useMemo11, useRef as useRef8 } from "react";
+import { createContext as createContext4, useContext as useContext5, useState as useState17, useEffect as useEffect7, useCallback as useCallback13, useMemo as useMemo11, useRef as useRef8 } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useSelector as useSelector2, useDispatch as useDispatch2 } from "react-redux";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var AuthContext = createContext4(void 0);
 var useApp = () => {
   const context = useContext5(AuthContext);
@@ -4803,15 +4901,15 @@ var useApp = () => {
 };
 var AppProvider = ({ children, publicPaths = [] }) => {
   console.log("AppProvider rendered/re-rendered");
-  const [isLoggedIn, setIsLoggedIn] = useState16(false);
-  const [showSessionExpiredMessage, setShowSessionExpiredMessage] = useState16(false);
+  const [isLoggedIn, setIsLoggedIn] = useState17(false);
+  const [showSessionExpiredMessage, setShowSessionExpiredMessage] = useState17(false);
   const isRedirectingRef = useRef8(false);
   const huboSesionRef = useRef8(false);
   const dispatch = useDispatch2();
   const clientContext = useSelector2((state) => state.clientContext);
   if (clientContext.status === "succeeded") huboSesionRef.current = true;
   const navigate = useNavigate();
-  const handleExpiredSessionRedirect = useCallback12(() => {
+  const handleExpiredSessionRedirect = useCallback13(() => {
     isRedirectingRef.current = true;
     setShowSessionExpiredMessage(false);
     setIsLoggedIn(false);
@@ -4821,11 +4919,11 @@ var AppProvider = ({ children, publicPaths = [] }) => {
     }, 2e3);
   }, [navigate]);
   const location = useLocation();
-  const isCurrentPathPublic = useCallback12(() => {
+  const isCurrentPathPublic = useCallback13(() => {
     const current = location.pathname;
     return publicPaths.some((path) => current === path || current.startsWith(`${path}/`));
   }, [location.pathname, publicPaths]);
-  const checkSession = useCallback12(async () => {
+  const checkSession = useCallback13(async () => {
     if (isRedirectingRef.current) return;
     try {
       const response = await fetchApi("/keep-alive.json", { method: "GET" });
@@ -4885,7 +4983,7 @@ var AppProvider = ({ children, publicPaths = [] }) => {
     setShowSessionExpiredMessage,
     handleExpiredSessionRedirect
   ]);
-  return /* @__PURE__ */ jsx22(AuthContext.Provider, { value: authContextValue, children });
+  return /* @__PURE__ */ jsx24(AuthContext.Provider, { value: authContextValue, children });
 };
 
 // src/components/MainLayout.tsx
@@ -4894,8 +4992,8 @@ import MenuIcon from "@mui/icons-material/Menu";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 
 // src/components/SideMenu.tsx
-import React18, { useEffect as useEffect8 } from "react";
-import { List as List3, ListItem, ListItemButton as ListItemButton3, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, Divider as Divider2, Box as Box13, Typography as Typography11, Collapse } from "@mui/material";
+import React19, { useEffect as useEffect8 } from "react";
+import { List as List4, ListItem, ListItemButton as ListItemButton4, ListItemIcon as ListItemIcon2, ListItemText as ListItemText3, Divider as Divider2, Box as Box14, Typography as Typography12, 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";
@@ -4909,12 +5007,43 @@ import { useNavigate as useNavigate2, useLocation as useLocation2 } from "react-
 import { blue, orange, teal, red, grey } from "@mui/material/colors";
 
 // src/utils/menuInicial.ts
-function rutaDeItemDeMenu(item) {
+function rutaDeTablaDeMenu(camino) {
+  return `/menu/${camino.map(encodeURIComponent).join("/")}`;
+}
+function gruposDeItem(menu, item) {
+  for (const candidato of menu) {
+    if (candidato === item) return [];
+    if (candidato.menuType === "menu") {
+      const grupos = gruposDeItem(candidato.menuContent, item);
+      if (grupos) return [candidato.name, ...grupos];
+    }
+  }
+  return void 0;
+}
+function itemDeCamino(menu, camino) {
+  const [nombre, ...resto] = camino;
+  const item = menu.find((candidato) => candidato.name === nombre && candidato.menuType === (resto.length ? "menu" : "table"));
+  return item && resto.length ? itemDeCamino(item.menuContent, resto) : item;
+}
+function primeraTablaConNombre(menu, nombre) {
+  for (const item of menu) {
+    if (item.menuType === "table" && item.name === nombre) return item;
+    const encontrado = item.menuType === "menu" ? primeraTablaConNombre(item.menuContent, nombre) : void 0;
+    if (encontrado) return encontrado;
+  }
+  return void 0;
+}
+function itemDeRuta(menu, camino) {
+  if (camino.length === 0) return void 0;
+  const item = itemDeCamino(menu, camino) ?? primeraTablaConNombre(menu, camino[camino.length - 1]);
+  return item;
+}
+function rutaDeItemDeMenu(item, grupos = []) {
   if (item.menuType === "table") {
     const consulta = new URLSearchParams();
     if (item.td) consulta.append("td", JSON.stringify(item.td));
     if (item.fc) consulta.append("fc", JSON.stringify(item.fc));
-    return `/menu/${item.name}${consulta.size ? `?${consulta.toString()}` : ""}`;
+    return `${rutaDeTablaDeMenu([...grupos, item.name])}${consulta.size ? `?${consulta.toString()}` : ""}`;
   }
   if (item.menuType === "proc") return `/procedures/${item.name}`;
   if (wScreens[item.menuType] !== void 0) return `/wScreens/${item.menuType}`;
@@ -4928,8 +5057,8 @@ function itemInicial(menu) {
 }
 
 // src/components/SideMenu.tsx
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
-var MenuListItem = ({ item, level, onMenuItemClick }) => {
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+var MenuListItem = ({ item, level, grupos = [], onMenuItemClick }) => {
   const navigate = useNavigate2();
   const location = useLocation2();
   const open = useSubMenuOpenState(item.name);
@@ -4938,7 +5067,7 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
     if (item.menuType === "menu") {
       dispatch(toggleSubMenu(item.name));
     } else {
-      navigate(rutaDeItemDeMenu(item));
+      navigate(rutaDeItemDeMenu(item, grupos));
       if (onMenuItemClick) {
         onMenuItemClick();
       }
@@ -4947,17 +5076,17 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const getIcon = (item2) => {
     switch (item2.menuType) {
       case "table":
-        return /* @__PURE__ */ jsx23(TableChartIcon, { sx: { color: blue[700] } });
+        return /* @__PURE__ */ jsx25(TableChartIcon, { sx: { color: blue[700] } });
       case "proc":
-        return /* @__PURE__ */ jsx23(DnsIcon, { sx: { color: teal[700] } });
+        return /* @__PURE__ */ jsx25(DnsIcon, { sx: { color: teal[700] } });
       case "menu":
-        return /* @__PURE__ */ jsx23(FolderIcon, { sx: { color: orange[800] } });
+        return /* @__PURE__ */ jsx25(FolderIcon, { sx: { color: orange[800] } });
       default:
         const WScreenComponent = wScreens[item2.menuType];
         if (WScreenComponent !== void 0) {
-          return /* @__PURE__ */ jsx23(DesktopWindowsIcon, { sx: { color: grey[700] } });
+          return /* @__PURE__ */ jsx25(DesktopWindowsIcon, { sx: { color: grey[700] } });
         }
-        return /* @__PURE__ */ jsx23(WarningAmberIcon3, { sx: { color: red[500] } });
+        return /* @__PURE__ */ jsx25(WarningAmberIcon3, { sx: { color: red[500] } });
     }
   };
   const currentPath = location.pathname;
@@ -4965,37 +5094,38 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const pathParts = currentPath.split("/");
   const urlTableName = pathParts[1] === "table" ? pathParts[2] : null;
   if (item.menuType === "table") {
-    isSelected = currentPath === `/menu/${item.name}` || urlTableName === (item.table || item.name);
+    isSelected = currentPath === rutaDeTablaDeMenu([...grupos, item.name]) || urlTableName === (item.table || item.name);
   } else if (item.menuType === "proc") {
     isSelected = currentPath === `/procedures/${item.name}`;
   } else if (item.menuType !== "menu") {
     isSelected = currentPath.startsWith(`/wScreens/${item.menuType}`) || currentPath.startsWith(`/wScreens-fallback/${item.menuType}`);
   }
-  const itemRef = React18.useRef(null);
+  const itemRef = React19.useRef(null);
   useEffect8(() => {
     if (isSelected && itemRef.current) {
       itemRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }, [isSelected]);
-  return /* @__PURE__ */ jsxs18("div", { ref: itemRef, children: [
-    /* @__PURE__ */ jsxs18(
-      ListItemButton3,
+  return /* @__PURE__ */ jsxs19("div", { ref: itemRef, children: [
+    /* @__PURE__ */ jsxs19(
+      ListItemButton4,
       {
         onClick: handleClick,
         sx: { pl: level * 2 },
         selected: isSelected,
         children: [
-          /* @__PURE__ */ jsx23(ListItemIcon2, { sx: { minWidth: "38px" }, children: getIcon(item) }),
-          /* @__PURE__ */ jsx23(ListItemText2, { primary: item.label || item.name }),
-          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx23(ExpandLess, {}) : /* @__PURE__ */ jsx23(ExpandMore, {}) : null
+          /* @__PURE__ */ jsx25(ListItemIcon2, { sx: { minWidth: "38px" }, children: getIcon(item) }),
+          /* @__PURE__ */ jsx25(ListItemText3, { primary: item.label || item.name }),
+          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx25(ExpandLess, {}) : /* @__PURE__ */ jsx25(ExpandMore, {}) : null
         ]
       }
     ),
-    item.menuType === "menu" && /* @__PURE__ */ jsx23(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx23(List3, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx23(
+    item.menuType === "menu" && /* @__PURE__ */ jsx25(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx25(List4, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx25(
       MenuListItem,
       {
         item: subItem,
         level: level + 1,
+        grupos: [...grupos, item.name],
         onMenuItemClick
       },
       subItem.name
@@ -5015,7 +5145,7 @@ var SideMenu = ({ onMenuItemClick }) => {
     dispatch(setAllSubMenusOpen(!isMostlyOpen));
   };
   if (!clientContext || !clientContext.menu) {
-    return /* @__PURE__ */ jsx23(Box13, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx23(Typography11, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
+    return /* @__PURE__ */ jsx25(Box14, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx25(Typography12, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
   }
   useEffect8(() => {
     if (!clientContext?.menu) return;
@@ -5025,7 +5155,7 @@ var SideMenu = ({ onMenuItemClick }) => {
       for (const item of items) {
         let matches = false;
         if (item.menuType === "table") {
-          matches = targetPath === `/menu/${item.name}` || urlTableName === (item.table || item.name);
+          matches = targetPath === rutaDeTablaDeMenu([...parentNames, item.name]) || urlTableName === (item.table || item.name);
         } else if (item.menuType === "proc") {
           matches = targetPath === `/procedures/${item.name}`;
         } else if (item.menuType !== "menu") {
@@ -5046,13 +5176,13 @@ var SideMenu = ({ onMenuItemClick }) => {
     };
     expandParents(clientContext.menu, location.pathname);
   }, [location.pathname, clientContext, dispatch]);
-  return /* @__PURE__ */ jsxs18(Box13, { sx: { width: "100%", flexShrink: 0 }, children: [
-    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx23(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs18(ListItemButton3, { onClick: handleToggleAllSubMenus, children: [
-      /* @__PURE__ */ jsx23(ListItemIcon2, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx23(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx23(UnfoldMoreIcon, {}) }),
-      /* @__PURE__ */ jsx23(ListItemText2, { primary: isMostlyOpen ? "colapsar " : "expandir" })
+  return /* @__PURE__ */ jsxs19(Box14, { sx: { width: "100%", flexShrink: 0 }, children: [
+    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx25(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs19(ListItemButton4, { onClick: handleToggleAllSubMenus, children: [
+      /* @__PURE__ */ jsx25(ListItemIcon2, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx25(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx25(UnfoldMoreIcon, {}) }),
+      /* @__PURE__ */ jsx25(ListItemText3, { primary: isMostlyOpen ? "colapsar " : "expandir" })
     ] }) }),
-    /* @__PURE__ */ jsx23(Divider2, {}),
-    /* @__PURE__ */ jsx23(List3, { children: clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx25(Divider2, {}),
+    /* @__PURE__ */ jsx25(List4, { children: clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx25(
       MenuListItem,
       {
         item: menuItem,
@@ -5066,14 +5196,14 @@ var SideMenu = ({ onMenuItemClick }) => {
 var SideMenu_default = SideMenu;
 
 // src/hooks/useLogout.tsx
-import { useCallback as useCallback13 } from "react";
+import { useCallback as useCallback14 } from "react";
 import { useNavigate as useNavigate3 } from "react-router-dom";
 import { useDispatch as useDispatch3 } from "react-redux";
 var useLogout = () => {
   const { setIsLoggedIn } = useApp();
   const dispatch = useDispatch3();
   const navigate = useNavigate3();
-  const logout = useCallback13(async () => {
+  const logout = useCallback14(async () => {
     try {
       const response = await fetchApi("/logout", { method: "GET" });
       if (response.status === 401 || response.ok) {
@@ -5094,7 +5224,7 @@ var useLogout = () => {
 var useLogout_default = useLogout;
 
 // src/components/MainLayout.tsx
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var drawerWidth = 240;
 var MainLayout = () => {
   const { clientContext } = useApp();
@@ -5117,11 +5247,11 @@ var MainLayout = () => {
     }
   };
   if (!clientContext) {
-    return /* @__PURE__ */ jsx24(Box14, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx24(Typography12, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
+    return /* @__PURE__ */ jsx26(Box15, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx26(Typography13, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
   }
-  return /* @__PURE__ */ jsxs19(Box14, { sx: { display: "flex", height: "100vh" }, children: [
-    /* @__PURE__ */ jsx24(CssBaseline, {}),
-    /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs20(Box15, { sx: { display: "flex", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx26(CssBaseline, {}),
+    /* @__PURE__ */ jsx26(
       AppBar,
       {
         position: "fixed",
@@ -5140,8 +5270,8 @@ var MainLayout = () => {
             })
           }
         },
-        children: /* @__PURE__ */ jsxs19(Toolbar, { children: [
-          /* @__PURE__ */ jsx24(
+        children: /* @__PURE__ */ jsxs20(Toolbar, { children: [
+          /* @__PURE__ */ jsx26(
             IconButton6,
             {
               color: "inherit",
@@ -5151,10 +5281,10 @@ var MainLayout = () => {
               sx: {
                 marginRight: 2
               },
-              children: isDrawerOpen ? /* @__PURE__ */ jsx24(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx24(MenuIcon, {})
+              children: isDrawerOpen ? /* @__PURE__ */ jsx26(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx26(MenuIcon, {})
             }
           ),
-          !isDrawerOpen && /* @__PURE__ */ jsx24(
+          !isDrawerOpen && /* @__PURE__ */ jsx26(
             "img",
             {
               src: `${envConfig.backendUrl}/img/logo-128.png`,
@@ -5162,21 +5292,21 @@ var MainLayout = () => {
               style: { height: "32px", marginRight: "12px", objectFit: "contain" }
             }
           ),
-          /* @__PURE__ */ jsx24(Typography12, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
-          /* @__PURE__ */ jsx24(Typography12, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
-          /* @__PURE__ */ jsx24(
-            Button8,
+          /* @__PURE__ */ jsx26(Typography13, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
+          /* @__PURE__ */ jsx26(Typography13, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
+          /* @__PURE__ */ jsx26(
+            Button9,
             {
               color: "inherit",
               onClick: logout,
-              startIcon: /* @__PURE__ */ jsx24(LogoutIcon, {}),
+              startIcon: /* @__PURE__ */ jsx26(LogoutIcon, {}),
               children: "Salir"
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs19(
+    /* @__PURE__ */ jsxs20(
       Drawer,
       {
         variant: "persistent",
@@ -5193,7 +5323,7 @@ var MainLayout = () => {
           }
         },
         children: [
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs20(
             Toolbar,
             {
               sx: {
@@ -5206,7 +5336,7 @@ var MainLayout = () => {
                 gap: 1.5
               },
               children: [
-                /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsx26(
                   "img",
                   {
                     src: `${envConfig.backendUrl}/img/logo-128.png`,
@@ -5214,16 +5344,16 @@ var MainLayout = () => {
                     style: { height: "32px", objectFit: "contain" }
                   }
                 ),
-                /* @__PURE__ */ jsx24(Typography12, { variant: "h6", sx: { fontWeight: "bold" }, children: clientContext.config.title })
+                /* @__PURE__ */ jsx26(Typography13, { variant: "h6", sx: { fontWeight: "bold" }, children: clientContext.config.title })
               ]
             }
           ),
-          /* @__PURE__ */ jsx24(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
+          /* @__PURE__ */ jsx26(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs19(
-      Box14,
+    /* @__PURE__ */ jsxs20(
+      Box15,
       {
         component: "main",
         sx: {
@@ -5249,8 +5379,8 @@ var MainLayout = () => {
           width: isDrawerOpen ? `calc(100% - ${drawerWidth}px)` : "100%"
         },
         children: [
-          /* @__PURE__ */ jsx24(Toolbar, {}),
-          /* @__PURE__ */ jsx24(Box14, { sx: { flex: 1, minHeight: 0, overflowY: "auto", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx24(Outlet, {}) })
+          /* @__PURE__ */ jsx26(Toolbar, {}),
+          /* @__PURE__ */ jsx26(Box15, { sx: { flex: 1, minHeight: 0, overflowY: "auto", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx26(Outlet, {}) })
         ]
       }
     )
@@ -5259,8 +5389,8 @@ var MainLayout = () => {
 var MainLayout_default = MainLayout;
 
 // src/components/SessionExpiredMessage.tsx
-import { Box as Box15, Typography as Typography13, Button as Button9, Modal } from "@mui/material";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Box as Box16, Typography as Typography14, Button as Button10, Modal } from "@mui/material";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var style = {
   position: "absolute",
   top: "50%",
@@ -5279,7 +5409,7 @@ var SessionExpiredMessage = () => {
   const handleClose = () => {
     handleExpiredSessionRedirect();
   };
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     Modal,
     {
       open: showSessionExpiredMessage,
@@ -5299,10 +5429,10 @@ var SessionExpiredMessage = () => {
           }
         }
       },
-      children: /* @__PURE__ */ jsxs20(Box15, { sx: style, children: [
-        /* @__PURE__ */ jsx25(Typography13, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
-        /* @__PURE__ */ jsx25(Typography13, { 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__ */ jsx25(Button9, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
+      children: /* @__PURE__ */ jsxs21(Box16, { sx: style, children: [
+        /* @__PURE__ */ jsx27(Typography14, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
+        /* @__PURE__ */ jsx27(Typography14, { 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__ */ jsx27(Button10, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
       ] })
     }
   );
@@ -5311,24 +5441,24 @@ var SessionExpiredMessage_default = SessionExpiredMessage;
 
 // src/pages/PantallaInicial.tsx
 import { Navigate } from "react-router-dom";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var PantallaInicial = () => {
   const { clientContext } = useApp();
   const item = clientContext.menu ? itemInicial(clientContext.menu) : void 0;
-  return item ? /* @__PURE__ */ jsx26(Navigate, { to: rutaDeItemDeMenu(item), replace: true }) : null;
+  return item && clientContext.menu ? /* @__PURE__ */ jsx28(Navigate, { to: rutaDeItemDeMenu(item, gruposDeItem(clientContext.menu, item)), replace: true }) : null;
 };
 var PantallaInicial_default = PantallaInicial;
 
 // src/pages/LogoutPage.tsx
 import { useEffect as useEffect10 } from "react";
-import { Box as Box16, Typography as Typography14, CircularProgress as CircularProgress5 } from "@mui/material";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Box as Box17, Typography as Typography15, CircularProgress as CircularProgress5 } from "@mui/material";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 var LogoutPage = () => {
   const logout = useLogout_default();
   useEffect10(() => {
     logout();
   }, [logout]);
-  return /* @__PURE__ */ jsxs21(Box16, { sx: {
+  return /* @__PURE__ */ jsxs22(Box17, { sx: {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -5336,20 +5466,20 @@ var LogoutPage = () => {
     height: "100vh",
     textAlign: "center"
   }, children: [
-    /* @__PURE__ */ jsx27(CircularProgress5, { size: 60 }),
-    /* @__PURE__ */ jsx27(Typography14, { variant: "h6", sx: { mt: 2 }, children: "Cerrando sesi\xF3n..." })
+    /* @__PURE__ */ jsx29(CircularProgress5, { size: 60 }),
+    /* @__PURE__ */ jsx29(Typography15, { variant: "h6", sx: { mt: 2 }, children: "Cerrando sesi\xF3n..." })
   ] });
 };
 var LogoutPage_default = LogoutPage;
 
 // src/pages/LoginPage.tsx
-import { useState as useState17 } from "react";
-import { Button as Button10, TextField as TextField2, Typography as Typography15, Alert as Alert3, AlertTitle, Box as Box17, CircularProgress as CircularProgress6 } from "@mui/material";
+import { useState as useState18 } from "react";
+import { Button as Button11, TextField as TextField2, Typography as Typography16, 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 { useDispatch as useDispatch4 } from "react-redux";
-import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var loginSchema = z.object({
   username: z.string().min(1, "El usuario es requerido"),
   // Añadir validación básica
@@ -5357,8 +5487,8 @@ var loginSchema = z.object({
   // Añadir validación básica
 });
 var LoginPage = () => {
-  const [loginError, setLoginError] = useState17(null);
-  const [isSubmitting, setIsSubmitting] = useState17(false);
+  const [loginError, setLoginError] = useState18(null);
+  const [isSubmitting, setIsSubmitting] = useState18(false);
   const { setIsLoggedIn, checkSession } = useApp();
   const dispatch = useDispatch4();
   const {
@@ -5403,16 +5533,16 @@ var LoginPage = () => {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx28(
-    Box17,
+  return /* @__PURE__ */ jsx30(
+    Box18,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       minHeight: "100vh",
       bgcolor: "#f5f5f5",
-      children: /* @__PURE__ */ jsxs22(
-        Box17,
+      children: /* @__PURE__ */ jsxs23(
+        Box18,
         {
           width: "100%",
           maxWidth: "400px",
@@ -5421,7 +5551,7 @@ var LoginPage = () => {
           borderRadius: 8,
           boxShadow: 3,
           children: [
-            /* @__PURE__ */ jsx28(Box17, { sx: { display: "flex", justifyContent: "center", mb: 3 }, children: /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx30(Box18, { sx: { display: "flex", justifyContent: "center", mb: 3 }, children: /* @__PURE__ */ jsx30(
               "img",
               {
                 src: `${envConfig.backendUrl}/img/login-logo-icon.png`,
@@ -5429,16 +5559,16 @@ var LoginPage = () => {
                 style: { height: "192px", maxWidth: "100%", objectFit: "contain" }
               }
             ) }),
-            /* @__PURE__ */ jsx28(Typography15, { variant: "h5", align: "center", gutterBottom: true, sx: { fontWeight: "bold", color: "primary.main" }, children: "Iniciar Sesi\xF3n" }),
-            /* @__PURE__ */ jsxs22("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs22("div", { children: [
-                /* @__PURE__ */ jsx28("label", { htmlFor: "username", children: /* @__PURE__ */ jsx28(Typography15, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
-                /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx30(Typography16, { variant: "h5", align: "center", gutterBottom: true, sx: { fontWeight: "bold", color: "primary.main" }, children: "Iniciar Sesi\xF3n" }),
+            /* @__PURE__ */ jsxs23("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs23("div", { children: [
+                /* @__PURE__ */ jsx30("label", { htmlFor: "username", children: /* @__PURE__ */ jsx30(Typography16, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
+                /* @__PURE__ */ jsx30(
                   Controller,
                   {
                     name: "username",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx28(
+                    render: ({ field }) => /* @__PURE__ */ jsx30(
                       TextField2,
                       {
                         ...field,
@@ -5454,14 +5584,14 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs22("div", { children: [
-                /* @__PURE__ */ jsx28("label", { htmlFor: "password", children: /* @__PURE__ */ jsx28(Typography15, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
-                /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsxs23("div", { children: [
+                /* @__PURE__ */ jsx30("label", { htmlFor: "password", children: /* @__PURE__ */ jsx30(Typography16, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
+                /* @__PURE__ */ jsx30(
                   Controller,
                   {
                     name: "password",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx28(
+                    render: ({ field }) => /* @__PURE__ */ jsx30(
                       TextField2,
                       {
                         ...field,
@@ -5477,14 +5607,14 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx28(Button10, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
-                /* @__PURE__ */ jsx28(CircularProgress6, { size: 20, sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx30(Button11, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs23(Fragment5, { children: [
+                /* @__PURE__ */ jsx30(CircularProgress6, { size: 20, sx: { mr: 1 } }),
                 "Iniciando sesi\xF3n..."
               ] }) : "Iniciar Sesi\xF3n" })
             ] }),
-            loginError && /* @__PURE__ */ jsxs22(Alert3, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
+            loginError && /* @__PURE__ */ jsxs23(Alert3, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
               " ",
-              /* @__PURE__ */ jsx28(AlertTitle, { children: "Error" }),
+              /* @__PURE__ */ jsx30(AlertTitle, { children: "Error" }),
               loginError
             ] })
           ]
@@ -5496,11 +5626,11 @@ var LoginPage = () => {
 var LoginPage_default = LoginPage;
 
 // src/components/ProcedureForm.tsx
-import React22, { useState as useState18, useCallback as useCallback14, useMemo as useMemo12 } from "react";
+import React23, { useState as useState19, useCallback as useCallback15, useMemo as useMemo12 } from "react";
 import { useParams } from "react-router-dom";
 import {
   TextField as TextField3,
-  Button as Button11,
+  Button as Button12,
   FormControl as FormControl3,
   InputLabel as InputLabel2,
   Select as Select2,
@@ -5508,8 +5638,8 @@ import {
   Checkbox as Checkbox3,
   FormControlLabel as FormControlLabel3,
   FormHelperText as FormHelperText2,
-  Typography as Typography17,
-  Box as Box19,
+  Typography as Typography18,
+  Box as Box20,
   CircularProgress as CircularProgress7,
   Alert as Alert4,
   Divider as Divider3,
@@ -5517,14 +5647,14 @@ import {
 } from "@mui/material";
 
 // src/pages/procedure-results/SuccessDisplay.tsx
-import { Box as Box18, Typography as Typography16, Paper as Paper3 } from "@mui/material";
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Box as Box19, Typography as Typography17, Paper as Paper3 } from "@mui/material";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var SuccessDisplay = ({ data }) => {
-  return /* @__PURE__ */ jsxs23(Paper3, { elevation: 2, sx: { p: 2, mt: 2, bgcolor: "success.light", color: "success.contrastText" }, children: [
-    /* @__PURE__ */ jsx29(Typography16, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
-    /* @__PURE__ */ jsx29(Typography16, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
-    /* @__PURE__ */ jsx29(Box18, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx29("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
-    /* @__PURE__ */ jsx29(Typography16, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
+  return /* @__PURE__ */ jsxs24(Paper3, { elevation: 2, sx: { p: 2, mt: 2, bgcolor: "success.light", color: "success.contrastText" }, children: [
+    /* @__PURE__ */ jsx31(Typography17, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
+    /* @__PURE__ */ jsx31(Typography17, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
+    /* @__PURE__ */ jsx31(Box19, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx31("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
+    /* @__PURE__ */ jsx31(Typography17, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
   ] });
 };
 var SuccessDisplay_default = SuccessDisplay;
@@ -5538,22 +5668,22 @@ var extendResultsOk = (newComponents) => {
 };
 
 // src/components/ProcedureForm.tsx
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var ProcedureForm = () => {
   const { procedureName } = useParams();
   const { clientContext } = useApp();
   const { callApi, loading: apiLoading, error: apiError } = useApiCall();
-  const [validationErrors, setValidationErrors] = useState18({});
-  const [successMessage, setSuccessMessage] = useState18(null);
-  const [executionLog, setExecutionLog] = useState18([]);
-  const [procedureResultData, setProcedureResultData] = useState18(null);
+  const [validationErrors, setValidationErrors] = useState19({});
+  const [successMessage, setSuccessMessage] = useState19(null);
+  const [executionLog, setExecutionLog] = useState19([]);
+  const [procedureResultData, setProcedureResultData] = useState19(null);
   const procedure = useMemo12(() => {
     if (procedureName && clientContext?.procedure) {
       return clientContext.procedure[procedureName];
     }
     return void 0;
   }, [procedureName, clientContext]);
-  const [formValues, setFormValues] = useState18(() => {
+  const [formValues, setFormValues] = useState19(() => {
     if (!procedure) return {};
     const initialValues = {};
     procedure.parameters.forEach((param) => {
@@ -5578,7 +5708,7 @@ var ProcedureForm = () => {
     });
     return initialValues;
   });
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (procedure) {
       setValidationErrors({});
       setSuccessMessage(null);
@@ -5608,11 +5738,11 @@ var ProcedureForm = () => {
       setExecutionLog([]);
     }
   }, [procedure]);
-  const addLogMessage = useCallback14((message, isError = false) => {
+  const addLogMessage = useCallback15((message, isError = false) => {
     const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString("es-AR");
     setExecutionLog((prev) => [...prev, `[${timestamp}] ${isError ? "ERROR: " : ""}${message}`]);
   }, []);
-  const handleChange = useCallback14((e, child) => {
+  const handleChange = useCallback15((e, child) => {
     const { name, value } = e.target;
     let newValue = value;
     if (e.target.type === "checkbox") {
@@ -5734,7 +5864,7 @@ var ProcedureForm = () => {
       addLogMessage("Ejecuci\xF3n finalizada.");
     }
   };
-  const renderInputField = useCallback14((param) => {
+  const renderInputField = useCallback15((param) => {
     const hasError = !!validationErrors[param.name];
     const errorMessage = validationErrors[param.name];
     const commonProps = {
@@ -5753,9 +5883,9 @@ var ProcedureForm = () => {
       sx: { fontSize: "0.8rem" }
     };
     if (param.options && param.options.length > 0) {
-      return /* @__PURE__ */ jsxs24(FormControl3, { fullWidth: true, margin: "dense", size: "small", error: hasError, required: commonProps.required, children: [
-        /* @__PURE__ */ jsx30(InputLabel2, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
-        /* @__PURE__ */ jsxs24(
+      return /* @__PURE__ */ jsxs25(FormControl3, { fullWidth: true, margin: "dense", size: "small", error: hasError, required: commonProps.required, children: [
+        /* @__PURE__ */ jsx32(InputLabel2, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
+        /* @__PURE__ */ jsxs25(
           Select2,
           {
             labelId: `${param.name}-label`,
@@ -5766,14 +5896,14 @@ var ProcedureForm = () => {
             label: param.label || param.name,
             disabled: apiLoading,
             sx: { fontSize: "0.8rem" },
-            renderValue: (selected) => /* @__PURE__ */ jsx30(Typography17, { sx: { fontSize: "0.8rem" }, children: selected }),
+            renderValue: (selected) => /* @__PURE__ */ jsx32(Typography18, { sx: { fontSize: "0.8rem" }, children: selected }),
             children: [
-              (!commonProps.required || formValues[param.name] === "") && /* @__PURE__ */ jsx30(MenuItem2, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx30("em", { children: "Seleccione..." }) }),
-              param.options.map((option) => /* @__PURE__ */ jsx30(MenuItem2, { value: option, sx: { fontSize: "0.8rem" }, children: option }, option))
+              (!commonProps.required || formValues[param.name] === "") && /* @__PURE__ */ jsx32(MenuItem2, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx32("em", { children: "Seleccione..." }) }),
+              param.options.map((option) => /* @__PURE__ */ jsx32(MenuItem2, { value: option, sx: { fontSize: "0.8rem" }, children: option }, option))
             ]
           }
         ),
-        (param.description || errorMessage) && /* @__PURE__ */ jsx30(FormHelperText2, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+        (param.description || errorMessage) && /* @__PURE__ */ jsx32(FormHelperText2, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
       ] });
     }
     switch (param.typeName) {
@@ -5782,18 +5912,18 @@ var ProcedureForm = () => {
       case "tsrange":
       case "time_range":
       case "daterange":
-        return /* @__PURE__ */ jsx30(TextField3, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx32(TextField3, { type: "text", value: formValues[param.name] || "", ...commonProps });
       case "decimal":
       case "double":
-        return /* @__PURE__ */ jsx30(TextField3, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx32(TextField3, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "integer":
       case "bigint":
-        return /* @__PURE__ */ jsx30(TextField3, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx32(TextField3, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "boolean":
-        return /* @__PURE__ */ jsx30(
+        return /* @__PURE__ */ jsx32(
           FormControlLabel3,
           {
-            control: /* @__PURE__ */ jsx30(
+            control: /* @__PURE__ */ jsx32(
               Checkbox3,
               {
                 checked: !!formValues[param.name],
@@ -5804,21 +5934,21 @@ var ProcedureForm = () => {
                 size: "small"
               }
             ),
-            label: /* @__PURE__ */ jsx30(Typography17, { sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "inherit" }, children: param.label || param.name }),
+            label: /* @__PURE__ */ jsx32(Typography18, { 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__ */ jsx30(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__ */ jsx32(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__ */ jsx30(TextField3, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
+        return /* @__PURE__ */ jsx32(TextField3, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
       case "bytea":
-        return /* @__PURE__ */ jsxs24(FormControl3, { fullWidth: true, margin: "dense", error: hasError, required: commonProps.required, children: [
-          /* @__PURE__ */ jsx30(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__ */ jsx30(
+        return /* @__PURE__ */ jsxs25(FormControl3, { fullWidth: true, margin: "dense", error: hasError, required: commonProps.required, children: [
+          /* @__PURE__ */ jsx32(Typography18, { 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__ */ jsx32(
             "input",
             {
               type: "file",
@@ -5832,34 +5962,34 @@ var ProcedureForm = () => {
               style: { padding: "6px 0", fontSize: "0.8rem" }
             }
           ),
-          (param.description || errorMessage) && /* @__PURE__ */ jsx30(FormHelperText2, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+          (param.description || errorMessage) && /* @__PURE__ */ jsx32(FormHelperText2, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
         ] });
       default:
-        return /* @__PURE__ */ jsx30(TextField3, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx32(TextField3, { type: "text", value: formValues[param.name] || "", ...commonProps });
     }
   }, [formValues, handleChange, apiLoading, validationErrors]);
   const ResultDisplayContent = useMemo12(() => {
     if (!procedureResultData || !procedure?.resultOk) return null;
     const ComponentToRender = resultsOk[procedure.resultOk];
     if (ComponentToRender) {
-      return /* @__PURE__ */ jsx30(ComponentToRender, { data: procedureResultData });
+      return /* @__PURE__ */ jsx32(ComponentToRender, { data: procedureResultData });
     } else {
-      return /* @__PURE__ */ jsxs24(Paper4, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
-        /* @__PURE__ */ jsxs24(Typography17, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
+      return /* @__PURE__ */ jsxs25(Paper4, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
+        /* @__PURE__ */ jsxs25(Typography18, { 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__ */ jsx30(Box19, { sx: {
+        /* @__PURE__ */ jsx32(Box20, { sx: {
           bgcolor: "warning.dark",
           p: 1,
           borderRadius: 1
-        }, children: /* @__PURE__ */ jsx30("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
+        }, children: /* @__PURE__ */ jsx32("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
       ] });
     }
   }, [procedureResultData, procedure]);
   if (!procedure) {
-    return /* @__PURE__ */ jsxs24(Box19, { sx: {
+    return /* @__PURE__ */ jsxs25(Box20, { sx: {
       p: 2,
       width: "100%",
       boxSizing: "border-box",
@@ -5869,13 +5999,13 @@ var ProcedureForm = () => {
       boxShadow: 3,
       textAlign: "center"
     }, children: [
-      /* @__PURE__ */ jsx30(CircularProgress7, { sx: { mb: 2 } }),
-      /* @__PURE__ */ jsx30(Typography17, { variant: "h6", color: "text.secondary", children: "Cargando procedimiento o no encontrado..." })
+      /* @__PURE__ */ jsx32(CircularProgress7, { sx: { mb: 2 } }),
+      /* @__PURE__ */ jsx32(Typography18, { 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__ */ jsxs24(Box19, { sx: {
+    /* @__PURE__ */ jsxs25(Box20, { sx: {
       p: 2,
       ml: 1,
       mt: 2,
@@ -5892,17 +6022,17 @@ var ProcedureForm = () => {
       overflowX: "hidden"
       // Oculta el scroll horizontal si no es necesario para el contenedor principal
     }, children: [
-      /* @__PURE__ */ jsx30(Typography17, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
-      Object.values(validationErrors).some((err) => err !== null) && /* @__PURE__ */ jsxs24(Alert4, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: [
+      /* @__PURE__ */ jsx32(Typography18, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
+      Object.values(validationErrors).some((err) => err !== null) && /* @__PURE__ */ jsxs25(Alert4, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: [
         "Por favor, corrige los errores en el formulario antes de enviar.",
-        /* @__PURE__ */ jsx30("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx30("li", { children: err }, idx)) })
+        /* @__PURE__ */ jsx32("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx32("li", { children: err }, idx)) })
       ] }),
-      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx30(Alert4, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
-      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx30(Alert4, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
-      /* @__PURE__ */ jsxs24("form", { onSubmit: handleSubmit, children: [
-        procedure.parameters.map((param) => /* @__PURE__ */ jsx30("div", { children: renderInputField(param) }, param.name)),
-        /* @__PURE__ */ jsx30(
-          Button11,
+      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx32(Alert4, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
+      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx32(Alert4, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
+      /* @__PURE__ */ jsxs25("form", { onSubmit: handleSubmit, children: [
+        procedure.parameters.map((param) => /* @__PURE__ */ jsx32("div", { children: renderInputField(param) }, param.name)),
+        /* @__PURE__ */ jsx32(
+          Button12,
           {
             type: "submit",
             variant: "contained",
@@ -5910,20 +6040,20 @@ var ProcedureForm = () => {
             disabled: apiLoading || Object.values(validationErrors).some((err) => err !== null),
             sx: { mt: 2 },
             size: "medium",
-            startIcon: apiLoading ? /* @__PURE__ */ jsx30(CircularProgress7, { size: 20, color: "inherit" }) : null,
+            startIcon: apiLoading ? /* @__PURE__ */ jsx32(CircularProgress7, { size: 20, color: "inherit" }) : null,
             children: apiLoading ? "Ejecutando..." : procedure.proceedLabel || "Ejecutar"
           }
         )
       ] }),
-      ResultDisplayContent && /* @__PURE__ */ jsxs24(Box19, { sx: { mt: 2 }, children: [
+      ResultDisplayContent && /* @__PURE__ */ jsxs25(Box20, { sx: { mt: 2 }, children: [
         " ",
         ResultDisplayContent
       ] }),
-      executionLog.length > 0 && /* @__PURE__ */ jsxs24(Box19, { sx: { mt: 3 }, children: [
-        /* @__PURE__ */ jsx30(Divider3, { sx: { mb: 2 } }),
-        /* @__PURE__ */ jsx30(Typography17, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
-        /* @__PURE__ */ jsx30(
-          Box19,
+      executionLog.length > 0 && /* @__PURE__ */ jsxs25(Box20, { sx: { mt: 3 }, children: [
+        /* @__PURE__ */ jsx32(Divider3, { sx: { mb: 2 } }),
+        /* @__PURE__ */ jsx32(Typography18, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
+        /* @__PURE__ */ jsx32(
+          Box20,
           {
             sx: {
               bgcolor: "grey.100",
@@ -5936,8 +6066,8 @@ var ProcedureForm = () => {
               fontSize: "0.75rem",
               whiteSpace: "pre-wrap"
             },
-            children: executionLog.map((log, index) => /* @__PURE__ */ jsx30(
-              Typography17,
+            children: executionLog.map((log, index) => /* @__PURE__ */ jsx32(
+              Typography18,
               {
                 component: "pre",
                 sx: {
@@ -5964,7 +6094,7 @@ import { PersistGate } from "redux-persist/integration/react";
 // src/components/PrivateRoute.tsx
 import { useEffect as useEffect11 } from "react";
 import { Navigate as Navigate2, useLocation as useLocation3 } from "react-router-dom";
-import { Fragment as Fragment5, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx33 } from "react/jsx-runtime";
 var PrivateRoute = ({ children }) => {
   const location = useLocation3();
   const dispatch = useAppDispatch();
@@ -5988,14 +6118,14 @@ var PrivateRoute = ({ children }) => {
   }, [isAuthenticated, isLoadingAuth, location, dispatch, clientContextStatus]);
   if (isLoadingAuth) {
     console.log(`[PrivateRoute] Returning loading state...`);
-    return /* @__PURE__ */ jsx31("p", { children: "Verificando autenticaci\xF3n..." });
+    return /* @__PURE__ */ jsx33("p", { children: "Verificando autenticaci\xF3n..." });
   }
   if (!isAuthenticated) {
     console.log(`[PrivateRoute] User not authenticated, navigating to /login`);
-    return /* @__PURE__ */ jsx31(Navigate2, { to: "/login", replace: true });
+    return /* @__PURE__ */ jsx33(Navigate2, { to: "/login", replace: true });
   }
   console.log(`[PrivateRoute] User authenticated, rendering children.`);
-  return /* @__PURE__ */ jsx31(Fragment5, { children });
+  return /* @__PURE__ */ jsx33(Fragment6, { children });
 };
 var PrivateRoute_default = PrivateRoute;
 
@@ -6033,11 +6163,11 @@ var InitialRedirectHandler = () => {
 var InitialRedirectHandler_default = InitialRedirectHandler;
 
 // src/pages/GenericDataGridPage.tsx
-import React25, { useState as useState19, useCallback as useCallback15, useMemo as useMemo13 } from "react";
+import React26, { useState as useState20, useCallback as useCallback16, useMemo as useMemo13 } from "react";
 import { useParams as useParams2, useLocation as useLocation5 } from "react-router-dom";
-import { Box as Box20, Alert as Alert5, Typography as Typography18, Tabs, Tab, IconButton as IconButton7 } from "@mui/material";
+import { Box as Box21, Alert as Alert5, Typography as Typography19, Tabs, Tab, IconButton as IconButton7 } from "@mui/material";
 import CloseIcon2 from "@mui/icons-material/Close";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var GenericDataGridPage = ({
   initialTableName,
   initialFixedFields = [],
@@ -6045,14 +6175,14 @@ var GenericDataGridPage = ({
 }) => {
   const { tableName: urlTableName } = useParams2();
   const effectiveTableName = initialTableName || urlTableName;
-  const [tabs, setTabs] = useState19([]);
-  const [activeTabIdx, setActiveTabIdx] = useState19(0);
+  const [tabs, setTabs] = useState20([]);
+  const [activeTabIdx, setActiveTabIdx] = useState20(0);
   const ffKey = JSON.stringify(initialFixedFields);
   const location = useLocation5();
   const parametros = useMemo13(() => parametrosRecibidos ?? parametrosDeTabla(void 0, location.search), [parametrosRecibidos, location.search]);
   const fixedFieldsIniciales = initialFixedFields.length > 0 ? initialFixedFields : parametros.fixedFields ?? [];
   const parametrosKey = JSON.stringify(parametros);
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (effectiveTableName) {
       setTabs([{
         id: `main-${effectiveTableName}-${ffKey}-${parametrosKey}`,
@@ -6066,7 +6196,7 @@ var GenericDataGridPage = ({
       setActiveTabIdx(0);
     }
   }, [effectiveTableName, ffKey, parametrosKey, location.key]);
-  const handleOpenDetail = useCallback15((tableName, fixedFields, label, ancestors) => {
+  const handleOpenDetail = useCallback16((tableName, fixedFields, label, ancestors) => {
     const tabId = `${tableName}-${JSON.stringify(fixedFields)}`;
     setTabs((prevTabs) => {
       const existingTabIdx = prevTabs.findIndex((t) => t.id === tabId);
@@ -6088,26 +6218,26 @@ var GenericDataGridPage = ({
     else if (activeTabIdx === index) setActiveTabIdx(index - 1);
   };
   if (!effectiveTableName) {
-    return /* @__PURE__ */ jsx32(Box20, { p: 3, children: /* @__PURE__ */ jsx32(Alert5, { severity: "error", children: "No se especific\xF3 una tabla." }) });
+    return /* @__PURE__ */ jsx34(Box21, { p: 3, children: /* @__PURE__ */ jsx34(Alert5, { severity: "error", children: "No se especific\xF3 una tabla." }) });
   }
-  return /* @__PURE__ */ jsxs25(Box20, { sx: { width: "100%", height: "calc(100vh - 64px)", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsx32(Box20, { sx: { borderBottom: 1, borderColor: "divider", bgcolor: "background.paper" }, children: /* @__PURE__ */ jsx32(Tabs, { value: activeTabIdx, onChange: (_, v) => setActiveTabIdx(v), variant: "scrollable", children: tabs.map((tab, index) => /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs26(Box21, { sx: { width: "100%", height: "calc(100vh - 64px)", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx34(Box21, { sx: { borderBottom: 1, borderColor: "divider", bgcolor: "background.paper" }, children: /* @__PURE__ */ jsx34(Tabs, { value: activeTabIdx, onChange: (_, v) => setActiveTabIdx(v), variant: "scrollable", children: tabs.map((tab, index) => /* @__PURE__ */ jsx34(
       Tab,
       {
-        label: /* @__PURE__ */ jsxs25(Box20, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ jsx32(Typography18, { variant: "caption", sx: { fontWeight: "bold" }, children: tab.label }),
-          index !== 0 && /* @__PURE__ */ jsx32(IconButton7, { size: "small", onClick: (e) => handleCloseTab(index, e), children: /* @__PURE__ */ jsx32(CloseIcon2, { fontSize: "inherit" }) })
+        label: /* @__PURE__ */ jsxs26(Box21, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx34(Typography19, { variant: "caption", sx: { fontWeight: "bold" }, children: tab.label }),
+          index !== 0 && /* @__PURE__ */ jsx34(IconButton7, { size: "small", onClick: (e) => handleCloseTab(index, e), children: /* @__PURE__ */ jsx34(CloseIcon2, { fontSize: "inherit" }) })
         ] })
       },
       tab.id
     )) }) }),
-    tabs.map((tab, index) => /* @__PURE__ */ jsx32(
-      Box20,
+    tabs.map((tab, index) => /* @__PURE__ */ jsx34(
+      Box21,
       {
         role: "tabpanel",
         hidden: activeTabIdx !== index,
         sx: { flexGrow: 1, display: activeTabIdx === index ? "flex" : "none", flexDirection: "column", overflow: "hidden" },
-        children: /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsx34(
           GenericDataGrid_default,
           {
             tableName: tab.tableName,
@@ -6130,42 +6260,30 @@ var GenericDataGridPage_default = GenericDataGridPage;
 // src/pages/PantallaDeRuta.tsx
 import { useMemo as useMemo14 } from "react";
 import { useSearchParams } from "react-router-dom";
-import { Box as Box21 } from "@mui/material";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { Box as Box22 } from "@mui/material";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var PantallaDeRuta = ({ screenName }) => {
   const [busqueda] = useSearchParams();
   const params = useMemo14(() => Object.fromEntries(busqueda.entries()), [busqueda]);
   const Pantalla = wScreens[screenName];
-  return /* @__PURE__ */ jsx33(Box21, { sx: { pt: 3, pl: 4 }, children: Pantalla ? /* @__PURE__ */ jsx33(Pantalla, { screenName, params }) : /* @__PURE__ */ jsx33(FallbackWScreen, { screenName }) });
+  return /* @__PURE__ */ jsx35(Box22, { sx: { pt: 3, pl: 4 }, children: Pantalla ? /* @__PURE__ */ jsx35(Pantalla, { screenName, params }) : /* @__PURE__ */ jsx35(FallbackWScreen, { screenName }) });
 };
 
 // src/pages/MenuTablePage.tsx
 import { useMemo as useMemo15 } from "react";
 import { useLocation as useLocation6, useParams as useParams3 } from "react-router-dom";
-import { Box as Box22, Alert as Alert6, Typography as Typography19 } from "@mui/material";
-import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Box as Box23, Alert as Alert6, Typography as Typography20 } from "@mui/material";
+import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 var MenuTablePage = () => {
-  const { menuName } = useParams3();
+  const { "*": menuName } = useParams3();
   const { clientContext } = useApp();
   const { search } = useLocation6();
-  const findMenuItem = (items, nameToFind) => {
-    for (const item of items) {
-      if (item.name === nameToFind && item.menuType === "table") {
-        return item;
-      }
-      if (item.menuType === "menu" && item.menuContent) {
-        const found = findMenuItem(item.menuContent, nameToFind);
-        if (found) return found;
-      }
-    }
-    return void 0;
-  };
   const { currentTableName, currentFixedFields, parametros } = useMemo15(() => {
     let tableName = void 0;
     let fixedFields = [];
     let parametros2 = {};
     if (menuName && clientContext && clientContext.menu) {
-      const menuItem = findMenuItem(clientContext.menu, menuName);
+      const menuItem = itemDeRuta(clientContext.menu, menuName.split("/").filter((tramo) => tramo !== ""));
       if (menuItem) {
         tableName = menuItem.table || menuItem.name;
         parametros2 = parametrosDeTabla(menuItem, search);
@@ -6181,12 +6299,12 @@ var MenuTablePage = () => {
     };
   }, [menuName, clientContext, search]);
   if (!currentTableName) {
-    return /* @__PURE__ */ jsx34(Box22, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs26(Alert6, { severity: "error", children: [
-      /* @__PURE__ */ jsx34(Typography19, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
-      /* @__PURE__ */ jsx34(Typography19, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
+    return /* @__PURE__ */ jsx36(Box23, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs27(Alert6, { severity: "error", children: [
+      /* @__PURE__ */ jsx36(Typography20, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
+      /* @__PURE__ */ jsx36(Typography20, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
     ] }) });
   }
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     GenericDataGridPage_default,
     {
       initialTableName: currentTableName,
@@ -6198,9 +6316,9 @@ var MenuTablePage = () => {
 var MenuTablePage_default = MenuTablePage;
 
 // src/puente/PantallaBP.tsx
-import { useEffect as useEffect15, useRef as useRef10, useState as useState20 } from "react";
+import { useEffect as useEffect15, useRef as useRef10, useState as useState21 } from "react";
 import { Navigate as Navigate3, useLocation as useLocation7, useParams as useParams4 } from "react-router-dom";
-import { Alert as Alert7, Box as Box24, CircularProgress as CircularProgress8 } from "@mui/material";
+import { Alert as Alert7, Box as Box25, CircularProgress as CircularProgress8 } from "@mui/material";
 
 // src/puente/clienteBP.ts
 function extraerRecursos(html) {
@@ -6290,8 +6408,8 @@ async function cargarSinMemoria(urlBackend) {
 
 // src/puente/ConsolaBP.tsx
 import { useEffect as useEffect14 } from "react";
-import { Box as Box23 } from "@mui/material";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { Box as Box24 } from "@mui/material";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var MARGEN_DE_REPETIDO_MS = 1e3;
 function descartarRepetidos(consola, agregados, ahora) {
   for (const nodo of agregados) {
@@ -6313,8 +6431,8 @@ var ConsolaBP = () => {
     observador.observe(consola, { childList: true });
     return () => observador.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx35(
-    Box23,
+  return /* @__PURE__ */ jsx37(
+    Box24,
     {
       id: "mini-console",
       sx: (tema) => ({
@@ -6410,7 +6528,7 @@ var habilitarPuenteBP = () => {
 var puenteBPHabilitado = () => habilitado;
 
 // src/puente/PantallaBP.tsx
-import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function buscarItemDeMenu(items, tipo) {
   for (const item of items) {
     if (item.menuType === tipo) return item;
@@ -6423,9 +6541,9 @@ function buscarItemDeMenu(items, tipo) {
 }
 var PantallaBP = ({ nombre, direccion }) => {
   const { clientContext } = useApp();
-  const [cargando, setCargando] = useState20(true);
-  const [error, setError] = useState20(null);
-  const [noExiste, setNoExiste] = useState20(false);
+  const [cargando, setCargando] = useState21(true);
+  const [error, setError] = useState21(null);
+  const [noExiste, setNoExiste] = useState21(false);
   const contenedor = useRef10(null);
   const menu = clientContext.menu;
   useEffect15(() => {
@@ -6459,14 +6577,14 @@ var PantallaBP = ({ nombre, direccion }) => {
       elemento.replaceChildren();
     };
   }, [nombre, direccion, menu]);
-  if (noExiste) return /* @__PURE__ */ jsx36(FallbackWScreen, { screenName: nombre });
+  if (noExiste) return /* @__PURE__ */ jsx38(FallbackWScreen, { screenName: nombre });
   return (
     // el indicador de carga flota: si ocupara lugar, el contenido de backend-plus empezaría más abajo mientras carga y subiría al terminar
-    /* @__PURE__ */ jsxs27(Box24, { sx: { position: "relative" }, children: [
-      cargando && /* @__PURE__ */ jsx36(CircularProgress8, { size: 24, sx: { position: "absolute", top: 16, left: 16 } }),
-      error && /* @__PURE__ */ jsx36(Alert7, { severity: "error", sx: { m: 2 }, children: error }),
-      /* @__PURE__ */ jsx36("div", { id: "main_layout", ref: contenedor }),
-      /* @__PURE__ */ jsx36(ConsolaBP, {})
+    /* @__PURE__ */ jsxs28(Box25, { sx: { position: "relative" }, children: [
+      cargando && /* @__PURE__ */ jsx38(CircularProgress8, { size: 24, sx: { position: "absolute", top: 16, left: 16 } }),
+      error && /* @__PURE__ */ jsx38(Alert7, { severity: "error", sx: { m: 2 }, children: error }),
+      /* @__PURE__ */ jsx38("div", { id: "main_layout", ref: contenedor }),
+      /* @__PURE__ */ jsx38(ConsolaBP, {})
     ] })
   );
 };
@@ -6474,32 +6592,32 @@ var PantallaDeRespaldo = () => {
   const { screenName = "" } = useParams4();
   const { search } = useLocation7();
   if (!puenteBPHabilitado()) {
-    return /* @__PURE__ */ jsx36(Box24, { sx: { p: 3 }, children: /* @__PURE__ */ jsx36(FallbackWScreen, { screenName }) });
+    return /* @__PURE__ */ jsx38(Box25, { sx: { p: 3 }, children: /* @__PURE__ */ jsx38(FallbackWScreen, { screenName }) });
   }
-  return /* @__PURE__ */ jsx36(Navigate3, { to: rutaDePantallaBP(screenName, search), replace: true });
+  return /* @__PURE__ */ jsx38(Navigate3, { to: rutaDePantallaBP(screenName, search), replace: true });
 };
 var PaginaBP = () => {
   const { hash, search } = useLocation7();
   const direccion = hash || search;
   const nombre = new URLSearchParams(direccion.replace(/^[#?]/, "")).get("w");
-  if (!puenteBPHabilitado()) return /* @__PURE__ */ jsx36(Navigate3, { to: "/", replace: true });
-  if (!nombre) return /* @__PURE__ */ jsx36(Box24, { sx: { p: 3 }, children: /* @__PURE__ */ jsxs27(Alert7, { severity: "warning", children: [
+  if (!puenteBPHabilitado()) return /* @__PURE__ */ jsx38(Navigate3, { to: "/", replace: true });
+  if (!nombre) return /* @__PURE__ */ jsx38(Box25, { sx: { p: 3 }, children: /* @__PURE__ */ jsxs28(Alert7, { severity: "warning", children: [
     "Falta la pantalla de backend-plus (",
-    /* @__PURE__ */ jsx36("code", { children: "#w=..." }),
+    /* @__PURE__ */ jsx38("code", { children: "#w=..." }),
     ")."
   ] }) });
-  return /* @__PURE__ */ jsx36(PantallaBP, { nombre, direccion }, nombre);
+  return /* @__PURE__ */ jsx38(PantallaBP, { nombre, direccion }, nombre);
 };
 
 // src/puente/GrillaBP.tsx
-import { useEffect as useEffect16, useRef as useRef11, useState as useState21 } from "react";
+import { useEffect as useEffect16, useRef as useRef11, useState as useState22 } from "react";
 import { useParams as useParams5 } from "react-router-dom";
-import { Alert as Alert8, Box as Box25, CircularProgress as CircularProgress9 } from "@mui/material";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Alert as Alert8, Box as Box26, CircularProgress as CircularProgress9 } from "@mui/material";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var GrillaBP = ({ tabla, fixedFields }) => {
   const contenedor = useRef11(null);
-  const [cargando, setCargando] = useState21(true);
-  const [error, setError] = useState21(null);
+  const [cargando, setCargando] = useState22(true);
+  const [error, setError] = useState22(null);
   const clave = JSON.stringify(fixedFields ?? []);
   useEffect16(() => {
     const elemento = contenedor.current;
@@ -6524,17 +6642,17 @@ var GrillaBP = ({ tabla, fixedFields }) => {
   }, [tabla, clave]);
   return (
     // el indicador de carga flota: si ocupara lugar, el contenido de backend-plus empezaría más abajo mientras carga y subiría al terminar
-    /* @__PURE__ */ jsxs28(Box25, { sx: { position: "relative" }, children: [
-      cargando && /* @__PURE__ */ jsx37(CircularProgress9, { size: 24, sx: { position: "absolute", top: 16, left: 16 } }),
-      error && /* @__PURE__ */ jsx37(Alert8, { severity: "error", sx: { m: 2 }, children: error }),
-      /* @__PURE__ */ jsx37("div", { ref: contenedor }),
-      /* @__PURE__ */ jsx37(ConsolaBP, {})
+    /* @__PURE__ */ jsxs29(Box26, { sx: { position: "relative" }, children: [
+      cargando && /* @__PURE__ */ jsx39(CircularProgress9, { size: 24, sx: { position: "absolute", top: 16, left: 16 } }),
+      error && /* @__PURE__ */ jsx39(Alert8, { severity: "error", sx: { m: 2 }, children: error }),
+      /* @__PURE__ */ jsx39("div", { ref: contenedor }),
+      /* @__PURE__ */ jsx39(ConsolaBP, {})
     ] })
   );
 };
 var PaginaGrillaBP = () => {
   const { tableName = "" } = useParams5();
-  return /* @__PURE__ */ jsx37(GrillaBP, { tabla: tableName }, tableName);
+  return /* @__PURE__ */ jsx39(GrillaBP, { tabla: tableName }, tableName);
 };
 
 // src/puente/CapturaBP.tsx
@@ -6591,7 +6709,7 @@ var CapturaBP = () => {
 
 // src/App.tsx
 import typeStore6 from "type-store";
-import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var LocationTracker = () => {
   const location = useLocation8();
   const dispatch = useAppDispatch();
@@ -6601,45 +6719,45 @@ var LocationTracker = () => {
   return null;
 };
 function FrontendPlusReactRoutes({ myRoutes, myUnloggedRoutes, layout: Layout = MainLayout_default, unloggedLayout: UnloggedLayout }) {
-  return /* @__PURE__ */ jsxs29(Fragment6, { children: [
-    /* @__PURE__ */ jsx38(InitialRedirectHandler_default, {}),
-    puenteBPHabilitado() && /* @__PURE__ */ jsx38(CapturaBP, {}),
-    /* @__PURE__ */ jsxs29(Routes, { children: [
-      /* @__PURE__ */ jsxs29(Route, { element: UnloggedLayout ? /* @__PURE__ */ jsx38(UnloggedLayout, {}) : /* @__PURE__ */ jsx38(Outlet2, {}), children: [
-        /* @__PURE__ */ jsx38(Route, { path: "/login", element: /* @__PURE__ */ jsx38(LoginPage_default, {}) }),
-        /* @__PURE__ */ jsx38(Route, { path: "/logout", element: /* @__PURE__ */ jsx38(LogoutPage_default, {}) }),
+  return /* @__PURE__ */ jsxs30(Fragment7, { children: [
+    /* @__PURE__ */ jsx40(InitialRedirectHandler_default, {}),
+    puenteBPHabilitado() && /* @__PURE__ */ jsx40(CapturaBP, {}),
+    /* @__PURE__ */ jsxs30(Routes, { children: [
+      /* @__PURE__ */ jsxs30(Route, { element: UnloggedLayout ? /* @__PURE__ */ jsx40(UnloggedLayout, {}) : /* @__PURE__ */ jsx40(Outlet2, {}), children: [
+        /* @__PURE__ */ jsx40(Route, { path: "/login", element: /* @__PURE__ */ jsx40(LoginPage_default, {}) }),
+        /* @__PURE__ */ jsx40(Route, { path: "/logout", element: /* @__PURE__ */ jsx40(LogoutPage_default, {}) }),
         myUnloggedRoutes
       ] }),
-      /* @__PURE__ */ jsxs29(Route, { element: /* @__PURE__ */ jsx38(PrivateRoute_default, { children: /* @__PURE__ */ jsx38(Layout, {}) }), children: [
-        /* @__PURE__ */ jsx38(Route, { path: "/", element: /* @__PURE__ */ jsx38(PantallaInicial_default, {}) }),
-        /* @__PURE__ */ jsx38(Route, { path: "/table/:tableName", element: /* @__PURE__ */ jsx38(GenericDataGridPage_default, {}) }),
-        /* @__PURE__ */ jsx38(Route, { path: "/menu/:menuName", element: /* @__PURE__ */ jsx38(MenuTablePage_default, {}) }),
-        /* @__PURE__ */ jsx38(Route, { path: "/procedures/:procedureName", element: /* @__PURE__ */ jsx38(ProcedureForm_default, {}) }),
-        Object.keys(wScreens).map((screenName) => /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsxs30(Route, { element: /* @__PURE__ */ jsx40(PrivateRoute_default, { children: /* @__PURE__ */ jsx40(Layout, {}) }), children: [
+        /* @__PURE__ */ jsx40(Route, { path: "/", element: /* @__PURE__ */ jsx40(PantallaInicial_default, {}) }),
+        /* @__PURE__ */ jsx40(Route, { path: "/table/:tableName", element: /* @__PURE__ */ jsx40(GenericDataGridPage_default, {}) }),
+        /* @__PURE__ */ jsx40(Route, { path: "/menu/*", element: /* @__PURE__ */ jsx40(MenuTablePage_default, {}) }),
+        /* @__PURE__ */ jsx40(Route, { path: "/procedures/:procedureName", element: /* @__PURE__ */ jsx40(ProcedureForm_default, {}) }),
+        Object.keys(wScreens).map((screenName) => /* @__PURE__ */ jsx40(
           Route,
           {
             path: `/wScreens/${screenName}`,
-            element: /* @__PURE__ */ jsx38(PantallaDeRuta, { screenName })
+            element: /* @__PURE__ */ jsx40(PantallaDeRuta, { screenName })
           },
           screenName
         )),
-        /* @__PURE__ */ jsx38(Route, { path: "/wScreens-fallback/:screenName", element: /* @__PURE__ */ jsx38(PantallaDeRespaldo, {}) }),
-        puenteBPHabilitado() && /* @__PURE__ */ jsx38(Route, { path: "/bp/menu", element: /* @__PURE__ */ jsx38(PaginaBP, {}) }),
-        puenteBPHabilitado() && /* @__PURE__ */ jsx38(Route, { path: "/bp/table/:tableName", element: /* @__PURE__ */ jsx38(PaginaGrillaBP, {}) }),
+        /* @__PURE__ */ jsx40(Route, { path: "/wScreens-fallback/:screenName", element: /* @__PURE__ */ jsx40(PantallaDeRespaldo, {}) }),
+        puenteBPHabilitado() && /* @__PURE__ */ jsx40(Route, { path: "/bp/menu", element: /* @__PURE__ */ jsx40(PaginaBP, {}) }),
+        puenteBPHabilitado() && /* @__PURE__ */ jsx40(Route, { path: "/bp/table/:tableName", element: /* @__PURE__ */ jsx40(PaginaGrillaBP, {}) }),
         myRoutes,
-        /* @__PURE__ */ jsx38(Route, { path: "*", element: /* @__PURE__ */ jsx38("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
+        /* @__PURE__ */ jsx40(Route, { path: "*", element: /* @__PURE__ */ jsx40("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
       ] }),
-      /* @__PURE__ */ jsx38(Route, { path: "*", element: /* @__PURE__ */ jsx38(Navigate4, { to: "/", replace: true }) })
+      /* @__PURE__ */ jsx40(Route, { path: "*", element: /* @__PURE__ */ jsx40(Navigate4, { to: "/", replace: true }) })
     ] })
   ] });
 }
 var FrontendPlusProviders = ({ children, publicPaths }) => {
-  return /* @__PURE__ */ jsx38(Provider, { store, children: /* @__PURE__ */ jsx38(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs29(BrowserRouter, { basename: rutaBase, children: [
-    /* @__PURE__ */ jsx38(LocationTracker, {}),
+  return /* @__PURE__ */ jsx40(Provider, { store, children: /* @__PURE__ */ jsx40(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs30(BrowserRouter, { basename: rutaBase, children: [
+    /* @__PURE__ */ jsx40(LocationTracker, {}),
     " ",
-    /* @__PURE__ */ jsx38(AppProvider, { publicPaths, children: /* @__PURE__ */ jsxs29(SnackbarProvider, { children: [
+    /* @__PURE__ */ jsx40(AppProvider, { publicPaths, children: /* @__PURE__ */ jsxs30(SnackbarProvider, { children: [
       children,
-      /* @__PURE__ */ jsx38(SessionExpiredMessage_default, {})
+      /* @__PURE__ */ jsx40(SessionExpiredMessage_default, {})
     ] }) })
   ] }) }) });
 };
@@ -6679,11 +6797,11 @@ var App = ({
     link.href = `${envConfig.backendUrl}/img/logo-128.png`;
     document.getElementsByTagName("head")[0].appendChild(link);
   }, []);
-  const safePaths = React32.useMemo(() => {
+  const safePaths = React33.useMemo(() => {
     const extracted = extractPathsFromRoutes(myUnloggedRoutes);
     return ["/login", "/logout", ...extracted];
   }, [myUnloggedRoutes]);
-  return /* @__PURE__ */ jsx38(FrontendPlusProviders, { publicPaths: safePaths, children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx40(FrontendPlusProviders, { publicPaths: safePaths, children: /* @__PURE__ */ jsx40(
     FrontendPlusReactRoutes,
     {
       myRoutes,