@amsintegra/design-system 1.1.1 → 2.0.1

package/dist/index.d.ts

@@ -1,528 +1,1392 @@
 import * as react from 'react';
-import { PropsWithChildren, ReactNode, ForwardRefExoticComponent } from 'react';
-import { Locale } from 'antd/es/locale';
-import { ThemeConfig, ButtonProps as ButtonProps$1, TagProps as TagProps$1, PaginationProps as PaginationProps$1, CardProps, Card as Card$1, SwitchProps, TableProps, ModalProps, SelectProps, UploadProps } from 'antd';
-export { Affix, AffixProps, Alert, AlertProps, Anchor, AnchorProps, AutoComplete, AutoCompleteProps, Avatar, AvatarProps, BackTop, BackTopProps, Badge, BadgeProps, Breadcrumb, BreadcrumbProps, Calendar, CardProps, Carousel, CarouselProps, Cascader, CascaderProps, Checkbox, CheckboxProps, Col, ColProps, Collapse, CollapseProps, ColorPicker, ColorPickerProps, DatePicker, DatePickerProps, Descriptions, DescriptionsProps, Divider, DividerProps, Drawer, DrawerProps, Dropdown, DropdownProps, Empty, EmptyProps, Flex, FlexProps, FloatButton, FloatButtonProps, Form, FormInstance, FormItemProps, FormListFieldData, FormListOperation, FormProps, FormRule, Image, ImageProps, Input, InputNumber, InputNumberProps, Layout, LayoutProps, List, ListProps, MentionProps, Mentions, Menu, MenuProps, MessageArgsProps, Modal, ModalFuncProps, ModalProps, NotificationArgsProps, Popconfirm, PopconfirmProps, Popover, PopoverProps, Progress, ProgressProps, QRCode, QRCodeProps, Radio, RadioProps, Rate, RateProps, Result, ResultProps, Row, RowProps, Segmented, SegmentedProps, Select, SelectProps, Skeleton, SkeletonProps, Slider, SliderSingleProps, Space, SpaceProps, Spin, SpinProps, Splitter, SplitterProps, Statistic, StatisticProps, Steps, StepsProps, Switch, SwitchProps, Table, TableColumnType, TableColumnsType, TableProps, Tabs, TabsProps, TimePicker, TimePickerProps, Timeline, TimelineProps, Tooltip, TooltipProps, Tour, TourProps, Transfer, Tree, TreeSelect, TreeSelectProps, Typography, Upload, Watermark, WatermarkProps } from 'antd';
-export { TitleProps } from 'antd/es/typography/Title';
-export { TextProps } from 'antd/es/typography/Text';
-export { ParagraphProps } from 'antd/es/typography/Paragraph';
-export { LinkProps } from 'antd/es/typography/Link';
-import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
-export { GroupProps as InputGroupProps, InputProps, InputRef, PasswordProps, SearchProps, TextAreaProps } from 'antd/es/input';
-export { DraggerProps, RcFile, UploadChangeParam, UploadFile, UploadListProps, UploadProps } from 'antd/es/upload';
-import { MessageInstance } from 'antd/es/message/interface';
-export { MessageInstance } from 'antd/es/message/interface';
-import { NotificationInstance } from 'antd/es/notification/interface';
-export { NotificationInstance } from 'antd/es/notification/interface';
-export { CheckCircleOutlined, CheckOutlined, CloseCircleOutlined, CloseOutlined, DeleteOutlined, DownOutlined, DownloadOutlined, EditOutlined, ExclamationCircleOutlined, EyeInvisibleOutlined, EyeOutlined, FileExcelOutlined, FileOutlined, FilePdfOutlined, FilterOutlined, FolderOutlined, InfoCircleOutlined, LeftOutlined, LoadingOutlined, LogoutOutlined, MenuOutlined, PlusOutlined, ReloadOutlined, RightOutlined, SearchOutlined, SettingOutlined, UpOutlined, UploadOutlined, UserOutlined, WarningOutlined } from '@ant-design/icons';
-
-/**
- * Design tokens — the single source of truth for the AMS Design System.
- *
- * Values are taken from the B2BMX Metronic theme:
- *   b2bmx-web-metronic/src/_metronic/assets/sass/components/_variables.custom.scss
- *   b2bmx-web-metronic/tailwind.config.js
- *
- * Two tiers:
- *   - `primitives`: raw values, no semantic meaning.
- *   - `semantic`:  role aliases consumed by the antd theme (and Tailwind).
- */
-/** Raw Metronic brand values. */
-declare const primitives: {
-    readonly brandRed: "#A72432";
-    readonly brandRedActive: "#8B1D28";
-    readonly brandRedLight: "#f1faff";
-    readonly green: "#50cd89";
-    readonly greenActive: "#47be7d";
-    readonly greenLight: "#e8fff3";
-    readonly purple: "#7239ea";
-    readonly purpleActive: "#5014d0";
-    readonly purpleLight: "#f8f5ff";
-    readonly pink: "#f1416c";
-    readonly pinkActive: "#d9214e";
-    readonly pinkLight: "#fff5f8";
-    readonly yellow: "#ffc700";
-    readonly yellowActive: "#f1bc00";
-    readonly yellowLight: "#fff8dd";
-    readonly white: "#ffffff";
-    readonly gray: {
-        readonly 100: "#f9f9f9";
-        readonly 200: "#f4f4f4";
-        readonly 300: "#e1e3ea";
-        readonly 400: "#b5b5c3";
-        readonly 500: "#a1a5b7";
-        readonly 600: "#7e8299";
-        readonly 700: "#5e6278";
-        readonly 800: "#3f4254";
-        readonly 900: "#181c32";
+import { CSSProperties, ReactNode, AnchorHTMLAttributes, ComponentType } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+/**
+ * Tema (paleta + marca) por omision. Basado en `web/src/lib/tema.ts` de la plataforma SIN la llamada a su backend:
+ * se conservan los NOMBRES de los tokens (`color_primario`, `badge_exito`...). Los valores por omision son la MARCA
+ * AMS (rojo), que coinciden con el `:root` de `tokens.css` (deben mantenerse sincronizados). `variablesDeTema` es la
+ * funcion de `app/layout.tsx` que inyecta la paleta como variables CSS en `<html style=...>`.
+ *
+ * Como una marca sobreescribe los tokens (3 formas, de mas a menos recomendada):
+ *  1. Runtime: construye un `Tema` propio (de tu API/config) y pasa `variablesDeTema(tema)` al `style` de `<html>`.
+ *  2. Estatica: un CSS de marca importado despues de globals.css con `:root { --tema-primario: #...; ... }`.
+ *  3. Cambiar `TEMA_DEFAULT` y `:root` de globals.css a la vez (deben coincidir).
+ * Nunca cambies colores dentro de un componente.
+ */
+
+type Tema = {
+    logo_url: string | null;
+    /** Icono de pestana (ruta o URL); sin valor rige el de la marca por omision. */
+    favicon_url?: string | null;
+    color_primario: string;
+    color_primario_oscuro: string;
+    /** Acento de marca (reflejo de la pantalla de acceso, spinner); sin valor rige el del tema por omision. */
+    color_acento?: string;
+    /**
+     * Rojo de PELIGRO (acciones destructivas y texto de error). Reservado: cuando la marca es roja, el boton
+     * primario va en neutro oscuro y este rojo queda solo para destructivos/error (ver docs/criterio-color-acciones.md).
+     */
+    color_peligro: string;
+    color_fondo: string;
+    color_texto: string;
+    color_borde: string;
+    badge_exito: string;
+    badge_advertencia: string;
+    badge_error: string;
+    badge_neutro: string;
+};
+declare const NOMBRE_PRODUCTO_DEFAULT = "Backoffice";
+/**
+ * Tema por omision = marca AMS (rojo). Mismos valores que el `:root` de `tokens.css` (deben coincidir).
+ * El rojo es la identidad/acento; el boton primario va en neutro oscuro y el rojo queda reservado a peligro
+ * (ver docs/criterio-color-acciones.md). Una marca distinta sobreescribe estos tokens via `variablesDeTema`.
+ */
+declare const TEMA_DEFAULT: Tema;
+/**
+ * Variables CSS del tema como `style` inline en el `<html>`. Sobreescriben los defaults de `globals.css`; con el tema por
+ * omision son un no-op visual. (Extraido de `app/layout.tsx`.)
+ */
+declare function variablesDeTema(tema: Tema): CSSProperties;
+
+/**
+ * Framework-agnostic link.
+ *
+ * The kit used `next/link` directly, which a publishable library cannot depend on. Components now
+ * render `LinkBase`, which by default is a plain `<a href>`. A consumer that wants client-side
+ * routing (Next's <Link>, React Router's <Link>, etc.) injects their component once via
+ * `LinkComponentProvider`; everything inside then routes through it, with no component API change.
+ */
+type LinkBaseProps = {
+    href: string;
+    children: ReactNode;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
+/** Shape of an injected link component: anything that accepts `href` + anchor props. */
+type LinkComponent = ComponentType<LinkBaseProps>;
+declare const LinkComponentProvider: react.Provider<LinkComponent | null>;
+declare const LinkBase: react.ForwardRefExoticComponent<{
+    href: string;
+    children: ReactNode;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & react.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * Framework-agnostic listing navigation (option A of the migration).
+ *
+ * The kit originally read Next's router (usePathname/useRouter/useSearchParams). A publishable
+ * library cannot depend on Next, so navigation is injected via React context instead: the consumer
+ * wires `ListadoNavProvider` to whatever drives their URL/query state (Next's router, React Router,
+ * or plain component state). The listing components (BarraListado, PaginadorUrl, EncabezadoOrdenUrl)
+ * keep their public API unchanged — only the source of `ir`/`params`/`pendiente` moved to context.
+ *
+ * `cambios` semantics are preserved: apply the given key/value changes to the current query; a null
+ * or empty value clears the key; any non-page change resets to page 1 (see hrefListado in listado.ts).
+ */
+type CambiosListado = Record<string, string | null | undefined>;
+type ListadoNav = {
+    /** Apply `cambios` to the current query. `scroll` hints the consumer to scroll to top (page changes). */
+    ir: (cambios: CambiosListado, opciones?: {
+        scroll?: boolean;
+    }) => void;
+    /** True while a navigation is in flight, so controls can show a pending indicator. */
+    pendiente: boolean;
+    /** The current query string params (same shape as URLSearchParams). */
+    params: URLSearchParams;
+};
+declare const ListadoNavProvider: react.Provider<ListadoNav | null>;
+/**
+ * Read the listing navigation injected by the nearest `ListadoNavProvider`. Throws a clear error if
+ * used outside a provider, so misuse fails loudly instead of silently doing nothing.
+ */
+declare function useNavegarListado(): ListadoNav;
+
+/**
+ * MAPA SEMANTICO CENTRAL DE ICONOGRAFIA (kit-ui-plataforma).
+ *
+ * Extraido de `web/src/lib/iconos.ts` de la plataforma: las constantes genericas (ICONO_NAV_*, ICONO_ALTA, ICONO_BAJA,
+ * ICONO_FILTRO, ICONO_COLUMNAS, ICONO_ACCIONES_FILA, ICONOS_SEMAFORO...) se copiaron TAL CUAL (mismo nombre, mismo glifo de
+ * Lucide). Se quitaron las propias del dominio de la plataforma original. Las constantes ICONO_COL_*, ICONO_KPI_*,
+ * ICONO_AVISO/ERROR/OK/SEGURIDAD y ICONOS_ESTATUS son alias NEUTROS de conceptos que alli tienen nombre de dominio (mismos
+ * glifos). Al final, "EXTENSIONES DEL KIT": conceptos del Backoffice que la plataforma no tiene; solo reutilizan glifos ya
+ * importados aqui, nunca introducen una libreria nueva.
+ *
+ * REGLAS (obligatorias):
+ * - Libreria UNICA: `lucide-react` (trazo de 2 px). Ninguna otra libreria de iconos, ningun emoji, ningun SVG suelto.
+ * - Ninguna pantalla ni componente importa de `lucide-react` directamente: importa la constante `ICONO_*` de este
+ *   archivo. Un concepto nuevo se agrega AQUI una sola vez (y se documenta en references/iconos.md).
+ * - Tamanos: `TAMANO_BADGE` (16) en contextos densos (insignias, tablas, titulos de tarjeta); `TAMANO_BOTON` (20) en
+ *   botones, menu lateral y titulo de pagina; el icono (i) es de 14. Iconos pequenos de apoyo: 12-13.
+ * - Color: hereda `currentColor`; jamas un color fijo nuevo.
+ * - Accesibilidad: decorativo -> `aria-hidden="true"`; unico contenido de un control -> `aria-label` y `title`.
+ * - Un icono por concepto: dos conceptos distintos no comparten glifo (p. ej. Dashboard=Activity, Salud=Gauge).
+ */
+
+declare const TAMANO_BADGE = 16;
+declare const TAMANO_BOTON = 20;
+/** Icono por defecto cuando un tipo/estatus no esta en el mapa: nunca un componente roto por un valor nuevo. */
+declare const ICONO_DEFAULT: LucideIcon;
+/** Tipo publico del icono (alias de `LucideIcon`) para tipar props sin importar de `lucide-react`. */
+type LucideIconType = LucideIcon;
+declare const ICONO_NAV_DASHBOARD: LucideIcon;
+declare const ICONO_NAV_SALUD: LucideIcon;
+declare const ICONO_NAV_ANALITICA: LucideIcon;
+declare const ICONO_NAV_ENTIDADES: LucideIcon;
+declare const ICONO_NAV_INVITACIONES: LucideIcon;
+declare const ICONO_NAV_ETIQUETAS: LucideIcon;
+declare const ICONO_NAV_JOBS: LucideIcon;
+declare const ICONO_NAV_TEMA: LucideIcon;
+declare const ICONO_NAV_CONFIGURACION: LucideIcon;
+declare const ICONO_NAV_API_KEYS: LucideIcon;
+declare const ICONO_NAV_BITACORA: LucideIcon;
+declare const ICONO_NAV_NOTIFICACIONES: LucideIcon;
+declare const ICONO_NAV_MANUAL: LucideIcon;
+declare const ICONO_NAV_CLIENTE: LucideIcon;
+declare const ICONO_NAV_EXTRACCIONES: LucideIcon;
+declare const ICONO_CERRAR_SESION: LucideIcon;
+declare const ICONO_INICIAR_SESION: LucideIcon;
+declare const ICONO_NAV_COLAPSAR: LucideIcon;
+declare const ICONO_NAV_EXPANDIR: LucideIcon;
+declare const ICONO_NAV_MENU_MOVIL: LucideIcon;
+declare const ICONO_CERRAR: LucideIcon;
+declare const ICONO_ALTA: LucideIcon;
+declare const ICONO_GENERAR: LucideIcon;
+declare const ICONO_GUARDAR: LucideIcon;
+declare const ICONO_EDITAR: LucideIcon;
+declare const ICONO_BAJA: LucideIcon;
+declare const ICONO_DESHABILITAR: LucideIcon;
+declare const ICONO_INACTIVAR: LucideIcon;
+declare const ICONO_REACTIVAR_ETIQUETA: LucideIcon;
+declare const ICONO_REACTIVAR: LucideIcon;
+declare const ICONO_RESTABLECER: LucideIcon;
+declare const ICONO_REINTENTAR: LucideIcon;
+declare const ICONO_COPIAR: LucideIcon;
+declare const ICONO_LINK: LucideIcon;
+declare const ICONO_DESCARGAR: LucideIcon;
+declare const ICONO_EXPORTAR: LucideIcon;
+declare const ICONO_EXPORTAR_CSV: LucideIcon;
+declare const ICONO_CONFIRMAR: LucideIcon;
+declare const ICONO_VOLVER: LucideIcon;
+declare const ICONO_VER_TODOS: LucideIcon;
+declare const ICONO_ROTAR_KEY: LucideIcon;
+declare const ICONO_REVOCAR_KEY: LucideIcon;
+declare const ICONO_API_KEY: LucideIcon;
+declare const ICONO_EMAIL: LucideIcon;
+declare const ICONO_INVITACION_GENERICA: LucideIcon;
+declare const ICONO_SEGURIDAD: LucideIcon;
+declare const ICONO_CAMPANA: LucideIcon;
+declare const ICONO_SILENCIAR: LucideIcon;
+declare const ICONO_FILTRO: LucideIcon;
+declare const ICONO_BUSCAR: LucideIcon;
+declare const ICONO_LIMPIAR: LucideIcon;
+declare const ICONO_SELECCIONADO: LucideIcon;
+declare const ICONO_ORDENAR_ASC: LucideIcon;
+declare const ICONO_ORDENAR_DESC: LucideIcon;
+declare const ICONO_ORDENAR_NEUTRO: LucideIcon;
+declare const ICONO_PAGINA_ANTERIOR: LucideIcon;
+declare const ICONO_PAGINA_SIGUIENTE: LucideIcon;
+declare const ICONO_VISTA_TABLA: LucideIcon;
+declare const ICONO_VISTA_TARJETAS: LucideIcon;
+declare const ICONO_ARRASTRAR_COLUMNA: LucideIcon;
+declare const ICONO_COLUMNAS: LucideIcon;
+declare const ICONO_COLUMNA_VISIBLE: LucideIcon;
+declare const ICONO_COLUMNA_OCULTA: LucideIcon;
+declare const ICONO_ACCIONES_FILA: LucideIcon;
+declare const ICONO_DENSIDAD_COMPACTA: LucideIcon;
+declare const ICONO_DENSIDAD_COMODA: LucideIcon;
+declare const ICONO_CARGANDO: LucideIcon;
+declare const ICONO_INFO_EXPLICACION: LucideIcon;
+declare const ICONO_COL_CODIGO: LucideIcon;
+declare const ICONO_COL_NOMBRE: LucideIcon;
+declare const ICONO_COL_ESTADO: LucideIcon;
+declare const ICONO_COL_MECANISMO: LucideIcon;
+declare const ICONO_COL_TOTAL: LucideIcon;
+declare const ICONO_COL_FECHA: LucideIcon;
+declare const ICONO_COL_FECHA_HORA: LucideIcon;
+declare const ICONO_COL_ETIQUETA: LucideIcon;
+declare const ICONO_COL_USUARIO: LucideIcon;
+declare const ICONO_COL_DOCUMENTO: LucideIcon;
+declare const ICONO_PERIODO: LucideIcon;
+declare const ICONO_VIGENCIA: LucideIcon;
+declare const ICONO_DURACION: LucideIcon;
+declare const ICONO_UBICACION: LucideIcon;
+/** Estatus de proceso. Completado=CheckCircle2, en curso=Clock, pendiente=Circle, aviso=AlertTriangle, fallido=XCircle. */
+declare const ICONOS_ESTATUS: Record<string, LucideIcon>;
+declare function iconoDeEstatus(estado: string): LucideIcon;
+/** Semaforo: verde=CheckCircle2, ambar=AlertTriangle, rojo=XCircle (y siempre con texto, nunca solo color). */
+declare const ICONOS_SEMAFORO: Record<string, LucideIcon>;
+declare const ETIQUETAS_SEMAFORO: Record<string, string>;
+declare function iconoDeSemaforo(color: string): LucideIcon;
+declare function etiquetaSemaforo(color: string): string;
+declare const ICONO_AVISO: LucideIcon;
+declare const ICONO_ERROR: LucideIcon;
+declare const ICONO_OK: LucideIcon;
+declare const ICONO_KPI_RITMO: LucideIcon;
+declare const ICONO_KPI_RENDIMIENTO: LucideIcon;
+declare const ICONO_KPI_CONTEO: LucideIcon;
+declare const ICONO_KPI_CREDENCIALES: LucideIcon;
+declare const ICONO_KPI_ALERTA: LucideIcon;
+declare const ICONO_KPI_CONSUMO: LucideIcon;
+declare const ICONO_KPI_BLOQUEO: LucideIcon;
+declare const ICONO_NAV_PLANES: LucideIcon;
+declare const ICONO_NAV_PAQUETES: LucideIcon;
+declare const ICONO_NAV_ACCESOS: LucideIcon;
+declare const ICONO_NAV_USUARIOS: LucideIcon;
+declare const ICONO_LOGIN_MICROSOFT: LucideIcon;
+
+/**
+ * Catalogo unico de explicaciones en sitio (el patron del icono (i)).
+ *
+ * LINEAMIENTO OBLIGATORIO: cada metrica, tarjeta, grafica, lista, encabezado de columna de tabla e insignia de estatus
+ * de CUALQUIER pantalla referencia un id de este catalogo (nunca texto en linea) y responde siempre las mismas 4
+ * preguntas: Que es, Como se calcula, De donde sale, Como leerlo. Cada texto se redacta leyendo el codigo que produce el
+ * valor (no adivinando).
+ *
+ * Reglas de formato (verificables con `verificarCatalogo()` abajo): id `modulo.id` en minusculas `[a-z0-9_]`; cada
+ * respuesta <= 320 caracteres; sin comillas dobles, barras invertidas ni saltos de linea; espanol neutro y profesional.
+ *
+ * Los ids `plataforma.*` los usan los componentes del kit (tabla, listado, rol): NO los borres ni los renombres.
+ * Agrega los de tu producto con su propio prefijo (`planes.*`, `accesos.*`, `inicio.*`).
+ */
+type Explicacion = {
+    titulo: string;
+    que_es: string;
+    como_se_calcula: string;
+    de_donde_sale: string;
+    como_leerlo: string;
+};
+declare const EXPLICACIONES: {
+    readonly "plataforma.rol": {
+        readonly titulo: "Rol del usuario";
+        readonly que_es: "Tu nivel de acceso en este sistema, por ejemplo administrador, operador o consulta.";
+        readonly como_se_calcula: "Se resuelve al iniciar sesión según tu asignación; no se calcula.";
+        readonly de_donde_sale: "Asignación de rol del usuario en el directorio de acceso.";
+        readonly como_leerlo: "Determina qué módulos ves y qué acciones puedes ejecutar en cada tabla.";
+    };
+    readonly "plataforma.listado_resultados": {
+        readonly titulo: "Resultados del listado";
+        readonly que_es: "Cuántas filas cumplen la búsqueda y los filtros actuales frente al total del listado.";
+        readonly como_se_calcula: "Se cuentan las filas cuyo texto contiene lo buscado, sin distinguir mayúsculas ni acentos, y que cumplen cada filtro. La tabla muestra una página de 25, 50 o 100 de ellas.";
+        readonly de_donde_sale: "Lista que ya trae la pantalla; la búsqueda, los filtros, el orden y la página viajan en la dirección (URL).";
+        readonly como_leerlo: "Si dice N en total no hay filtro activo. Copiar la dirección comparte la misma vista.";
+    };
+    readonly "plataforma.tabla_columnas": {
+        readonly titulo: "Columnas de la tabla";
+        readonly que_es: "Lista para mostrar u ocultar las columnas de esta tabla que no están fijas. Las columnas de identidad y la de acciones siempre se ven.";
+        readonly como_se_calcula: "Cada casilla desmarcada oculta esa columna en pantalla; no cambia los datos, el orden, los filtros ni lo que se exporta.";
+        readonly de_donde_sale: "Preferencia guardada en este navegador, por tabla y por usuario. Restablecer la borra y vuelve a mostrar todas las columnas con la densidad cómoda.";
+        readonly como_leerlo: "Si falta una columna que esperabas, revisa esta lista. Con el almacenamiento del navegador bloqueado (modo privado) la elección dura solo mientras la página siga abierta.";
+    };
+    readonly "plataforma.tabla_densidad": {
+        readonly titulo: "Densidad de la tabla";
+        readonly que_es: "Alto de las filas: compacta muestra más filas por pantalla; cómoda deja más aire entre ellas.";
+        readonly como_se_calcula: "Compacta reduce el relleno vertical de cada celda; no cambia el texto ni las columnas.";
+        readonly de_donde_sale: "Preferencia guardada en este navegador, por tabla y por usuario, junto con las columnas ocultas.";
+        readonly como_leerlo: "La tabla se desplaza dentro de su propio marco: la barra horizontal queda al pie de la pantalla, el encabezado arriba y las columnas de identidad y acciones fijas a los lados. Shift + rueda del ratón desplaza a lo ancho.";
+    };
+    readonly "inicio.planes_activos": {
+        readonly titulo: "Planes activos";
+        readonly que_es: "Número de planes del catálogo que hoy se pueden contratar.";
+        readonly como_se_calcula: "Conteo de planes con estado Activo; los borradores y los archivados no cuentan.";
+        readonly de_donde_sale: "Catálogo de planes del backoffice (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Un plan archivado deja de contar aunque tenga clientes vigentes; esos clientes conservan su plan hasta renovar.";
+    };
+    readonly "inicio.paquetes": {
+        readonly titulo: "Paquetes";
+        readonly que_es: "Número de paquetes de consumo definidos en el catálogo.";
+        readonly como_se_calcula: "Conteo de paquetes registrados, sin importar su estado.";
+        readonly de_donde_sale: "Catálogo de paquetes del backoffice (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Un paquete puede estar asociado a varios planes; aquí se cuenta una sola vez.";
+    };
+    readonly "inicio.accesos_vigentes": {
+        readonly titulo: "Accesos vigentes";
+        readonly que_es: "Usuarios con acceso al backoffice que no están suspendidos ni vencidos.";
+        readonly como_se_calcula: "Conteo de usuarios con estado Activo y fecha de vencimiento futura o sin vencimiento.";
+        readonly de_donde_sale: "Registro de accesos del backoffice (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Un usuario con rol de solo consulta cuenta igual que uno administrador.";
+    };
+    readonly "inicio.cobertura": {
+        readonly titulo: "Cobertura del catálogo";
+        readonly que_es: "Porcentaje de planes que ya tienen al menos un paquete asignado.";
+        readonly como_se_calcula: "Planes con al menos un paquete entre planes activos, por 100.";
+        readonly de_donde_sale: "Relación plan-paquete del catálogo (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Menos de 100 % indica planes sin paquete: no se pueden vender hasta que se les asigne uno.";
+    };
+    readonly "inicio.resumen_catalogo": {
+        readonly titulo: "Resumen del catálogo";
+        readonly que_es: "Planes agrupados por estado, con el total de paquetes que suman.";
+        readonly como_se_calcula: "Cada plan cae en un solo estado; los paquetes de una fila son la suma de los paquetes de sus planes.";
+        readonly de_donde_sale: "Catálogo de planes y paquetes del backoffice (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Un paquete compartido por dos planes se cuenta una vez por cada plan.";
+    };
+    readonly "planes.col_codigo": {
+        readonly titulo: "Código";
+        readonly que_es: "Identificador corto y estable del plan.";
+        readonly como_se_calcula: "Se captura al crear el plan; no se calcula ni se puede repetir.";
+        readonly de_donde_sale: "Catálogo de planes (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Se usa en integraciones y reportes; el nombre comercial puede cambiar, el código no.";
+    };
+    readonly "planes.col_nombre": {
+        readonly titulo: "Nombre";
+        readonly que_es: "Nombre comercial del plan tal como lo ve el cliente.";
+        readonly como_se_calcula: "Se captura al crear o editar el plan; no se calcula.";
+        readonly de_donde_sale: "Catálogo de planes (ejemplo con datos ficticios).";
+        readonly como_leerlo: "La búsqueda ignora mayúsculas y acentos.";
+    };
+    readonly "planes.col_precio": {
+        readonly titulo: "Precio mensual";
+        readonly que_es: "Precio de lista del plan por mes, en pesos, sin impuestos.";
+        readonly como_se_calcula: "Se captura al crear o editar el plan; no se calcula.";
+        readonly de_donde_sale: "Catálogo de planes (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Es precio de lista: un contrato puede tener un descuento que no se refleja aquí.";
     };
-    readonly background: {
-        readonly app: "#f5f8fa";
-        readonly body: "#ffffff";
-        readonly appDark: "#151521";
-        readonly bodyDark: "#1e1e2d";
+    readonly "planes.col_estado": {
+        readonly titulo: "Estado del plan";
+        readonly que_es: "Situación del plan en el catálogo: Activo, Borrador o Archivado.";
+        readonly como_se_calcula: "Lo fija el administrador al publicar o archivar; no se calcula.";
+        readonly de_donde_sale: "Catálogo de planes (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Solo los planes Activos se pueden contratar. Archivado conserva el historial pero no admite altas nuevas.";
     };
-    readonly dark: {
-        readonly base: "#181c32";
-        readonly bg: "#151521";
-        readonly header: "#1e1e2d";
-        readonly active: "#2a2a3c";
-        readonly separator: "#393945";
-        readonly inputBg: "#1b1b29";
-        readonly cardBg: "#1e1e2d";
-        readonly gray: {
-            readonly 100: "#2b2b40";
-            readonly 200: "#323248";
-            readonly 300: "#3b3b64";
-            readonly 400: "#474761";
-            readonly 500: "#565674";
-            readonly 600: "#6d6d80";
-            readonly 700: "#92929f";
-            readonly 800: "#cdcdde";
-        };
+    readonly "planes.col_actualizado": {
+        readonly titulo: "Actualizado";
+        readonly que_es: "Fecha y hora de la última modificación del plan, en tu hora local.";
+        readonly como_se_calcula: "Se registra en UTC al guardar cambios y el navegador la convierte a tu zona horaria.";
+        readonly de_donde_sale: "Bitácora de cambios del catálogo (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Cambiar solo el estado también actualiza esta fecha.";
     };
+    readonly "planes.estado_activo": {
+        readonly titulo: "Activo";
+        readonly que_es: "El plan está publicado y se puede contratar.";
+        readonly como_se_calcula: "Estado asignado al publicar el plan.";
+        readonly de_donde_sale: "Catálogo de planes (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Para retirarlo del catálogo, archívalo; no lo borres.";
+    };
+    readonly "planes.estado_borrador": {
+        readonly titulo: "Borrador";
+        readonly que_es: "El plan se está preparando y aún no es visible para contratar.";
+        readonly como_se_calcula: "Estado inicial de todo plan nuevo.";
+        readonly de_donde_sale: "Catálogo de planes (ejemplo con datos ficticios).";
+        readonly como_leerlo: "Publica el plan cuando tenga precio y al menos un paquete.";
+    };
+    readonly "planes.estado_archivado": {
+        readonly titulo: "Archivado";
+        readonly que_es: "El plan se retiró del catálogo; conserva su historial.";
+        readonly como_se_calcula: "Estado asignado al archivar un plan activo.";
+        readonly de_donde_sale: "Catálogo de planes (ejemplo con datos ficticios).";
+        readonly como_leerlo: "No admite altas nuevas; los clientes existentes conservan su plan hasta renovar.";
+    };
+};
+type ExplicacionId = keyof typeof EXPLICACIONES;
+/** Entrada del catalogo; un id desconocido (solo posible con un cast) falla de forma visible. */
+declare function explicacionDe(id: ExplicacionId): Explicacion;
+/** Devuelve la lista de violaciones de formato del catalogo (vacia = correcto). Util como prueba unitaria. */
+declare function verificarCatalogo(): string[];
+
+/**
+ * Estado de un listado (busqueda, filtros, orden, pagina y tamano) que vive en la URL (change
+ * `ux-listados-compactos`). Funciones puras: el Server Component de cada pantalla lee los `searchParams`, aplica
+ * el listado sobre la lista ya traida de la API y pinta SOLO la pagina visible; la barra (`BarraListado`), el
+ * paginador (`PaginadorUrl`) y los encabezados ordenables (`EncabezadoOrdenUrl`) solo reescriben la URL.
+ *
+ * Por que en el servidor de Next y no en el backend: cada lista esta acotada (decenas a cientos de filas) y la busqueda sin acentos obligaria a la API a un scan de todos
+ * modos. Aqui el navegador recibe una sola pagina (25/50/100 filas) y el trabajo por fila (etiquetas, enlaces) se
+ * hace solo para esa pagina.
+ */
+declare const TAMANOS_LISTADO: readonly [25, 50, 100];
+declare const TAMANO_LISTADO_DEFAULT = 25;
+type Direccion = "asc" | "desc";
+type ParamsUrl = Record<string, string | string[] | undefined>;
+type EstadoListado = {
+    q: string;
+    pagina: number;
+    tamano: number;
+    orden: string;
+    dir: Direccion;
+    /** Solo los filtros declarados por la pantalla y con valor. */
+    filtros: Record<string, string>;
+};
+type OpcionesListado = {
+    /** Claves de filtro que la pantalla entiende (p. ej. `estado`, `mecanismo`). */
+    filtros: readonly string[];
+    /** Claves de orden validas. */
+    ordenes: readonly string[];
+    ordenDefault: string;
+    dirDefault?: Direccion;
 };
-/** Radius scale (Metronic). Base radius is 4px. */
-declare const radius: {
-    readonly sm: 2;
-    readonly base: 4;
-    readonly md: 6;
-    readonly lg: 8;
-    readonly xl: 12;
+type DefListado<T> = {
+    /** Texto en el que busca `q` (nombre, codigo, etc.). */
+    texto: (item: T) => string;
+    filtrar?: (item: T, filtros: Record<string, string>) => boolean;
+    /** Valor por el que ordena cada clave de orden. `null`/`undefined`/`""`/`NaN` = ausente (siempre al final). */
+    valoresOrden: Record<string, (item: T) => string | number | null | undefined>;
 };
-/** Typography (Metronic uses Inter with a compact 13px base). */
-declare const typography: {
-    readonly fontFamily: "Inter, Helvetica, Arial, sans-serif";
-    readonly fontSizeBase: 13;
-    readonly weight: {
-        readonly light: 300;
-        readonly normal: 400;
-        readonly medium: 500;
-        readonly semibold: 600;
-        readonly bold: 700;
+/** Minusculas, sin acentos (NFD sin marcas combinantes) y espacios colapsados: "  PEÑA  Ávila" -> "pena avila". */
+declare function normalizarTexto(s: string): string;
+declare function leerListado(sp: ParamsUrl, opc: OpcionesListado): EstadoListado;
+declare function aplicarListado<T>(items: readonly T[], estado: EstadoListado, def: DefListado<T>): {
+    itemsPagina: T[];
+    totalFiltrado: number;
+    total: number;
+    pagina: number;
+    totalPaginas: number;
+};
+/**
+ * URL con `cambios` aplicados sobre la query actual. Un valor vacio o `null` borra la clave. Cualquier cambio que
+ * no sea de pagina regresa a la pagina 1 (borra `pagina`); `pagina=1` tambien se omite para que la URL quede limpia.
+ */
+declare function hrefListado(ruta: string, actual: string | URLSearchParams, cambios: Record<string, string | null | undefined>): string;
+
+/**
+ * Unico punto por el que las cifras del snapshot llegan a pantalla (decision D10 de `reporte-riesgo-crediticio`).
+ *
+ * Reglas: las cifras son CADENAS decimales ya redondeadas por el backend; aqui solo se agrupan los miles y se acomoda el
+ * signo y el punto decimal manipulando texto, jamas con `Number`, `parseFloat` ni `toFixed` (un float distinto entre el
+ * HTML y el PDF cambiaria una cifra). Un dato ausente (`null`) se muestra como `NO_DISPONIBLE`, nunca como cero.
+ * Este modulo no importa nada de `next/*` ni hace red: lo comparten el sitio y el empaquetado del PDF.
+ */
+declare const NO_DISPONIBLE = "\u2014";
+/** Dinero en pesos: `1234.50` -> `$1,234.50` (los decimales son los que trae la cadena). */
+declare function formatoMxn(valor: string | null | undefined): string;
+/** Decimal generico (pendientes, promedios): agrupa los miles y respeta los decimales de la cadena. */
+declare function formatoNumero(valor: string | null | undefined): string;
+declare function formatoEntero(valor: number | null | undefined): string;
+/** Razon (`0.1234`) como porcentaje (`12.34 %`): se corre el punto dos lugares en el texto, sin aritmetica. */
+declare function formatoPct(razon: string | null | undefined): string;
+declare function formatoDias(valor: string | null | undefined): string;
+/** `AAAA-MM-DD` -> `AAAA/MM/DD` (formato unico de fecha de la plataforma). */
+declare function formatoFecha(iso: string | null | undefined): string;
+declare function formatoMes(mes: string | null | undefined): string;
+
+/**
+ * Formato unico de fecha/hora para TODO el sistema (pedido explicito del usuario:
+ * "todos los periodos y fechas usemos formato yyyy/MM/dd HH:mm:ss"), SIEMPRE en hora
+ * LOCAL del navegador (pedido del usuario: "en la base guardamos UTC pero en el view
+ * debe ser hora local").
+ *
+ * La API entrega fechas en DOS familias, que se distinguen por el sufijo de zona:
+ * - CON sufijo UTC (`Z` o `+00:00`): timestamps del sistema escritos con
+ *   `now_utc().isoformat()` -> `...+00:00` (creado_en, terminado_en, `ts` de bitacora,
+ *   downloaded_at, etc.). Son instantes ABSOLUTOS en UTC y DEBEN convertirse a local.
+ * - SIN sufijo (naive `YYYY-MM-DDTHH:MM:SS`): fechas de negocio (documento/portal)
+ *   (`fecha_emision`, `fecha_timbrado`, `start`/`end` de ventana, `date_from/to`) que
+ *   ya vienen en la hora que reporto la fuente -- NO se re-convierten (no tienen un
+ *   offset conocido; reinterpretarlas correria la hora sin base).
+ *
+ * En ambos casos la salida es `yyyy/MM/dd HH:mm:ss`. `date_from/to` puede venir como
+ * `YYYY-MM-DD` puro (sin hora) -> se muestra la fecha a medianoche, sin conversion.
+ */
+declare function formatearFechaHora(iso: string | null | undefined): string;
+/**
+ * Como `formatearFechaHora`, pero un instante CON zona se muestra en America/Mexico_City (no en la
+ * zona del proceso). Para componentes de servidor, donde "hora local" seria la del servidor (UTC).
+ * Las fechas naive (fecha de negocio) o `YYYY-MM-DD` se muestran tal cual, igual que en la otra.
+ */
+declare function formatearFechaHoraCDMX(iso: string | null | undefined): string;
+/** Formatea un rango `[desde, hasta]` con el mismo formato, unido por un guion largo. */
+declare function formatearRangoFechaHora(desde: string | null | undefined, hasta: string | null | undefined): string;
+
+/**
+ * Tamano legible de un archivo (base 1024) para la estimacion y las partes ZIP de una
+ * extraccion. Solo formatea: nunca recalcula nada.
+ */
+declare function formatearBytes(n: number | null | undefined): string;
+
+/**
+ * Helper central para el lineamiento "toda accion dispara el spinner de marca"
+ * (lineamiento "toda accion dispara el spinner de marca"). Envuelve una funcion async y expone:
+ *   - `ejecutando`: true mientras la accion corre (para deshabilitar el boton).
+ *   - `ejecutar(fn, etiqueta?)`: corre `fn`, muestra el overlay de marca y lo cierra al
+ *     terminar (aunque `fn` lance).
+ *   - `Overlay`: componente listo para montar; pinta el `OverlayCargando` solo mientras
+ *     `ejecutando`. Asi cualquier accion obtiene el feedback homologado con una linea.
+ *
+ * Uso:
+ *   const { ejecutando, ejecutar, Overlay } = useAccionConSpinner();
+ *   <button disabled={ejecutando} onClick={() => ejecutar(guardar, "Guardando...")}>Guardar</button>
+ *   <Overlay />
+ */
+declare function useAccionConSpinner(): {
+    ejecutando: boolean;
+    ejecutar: <T>(fn: () => Promise<T>, etiquetaAccion?: string) => Promise<T | undefined>;
+    Overlay: () => react.JSX.Element;
+};
+
+/**
+ * Hook de React sobre `preferenciasTabla`: mantiene el orden, los anchos y las columnas
+ * ocultas de UNA tabla, persistidos en localStorage bajo `clave`, y expone acciones para
+ * reordenar/redimensionar/ocultar/restablecer.
+ *
+ * `idsDefault` es el orden natural de las columnas de la tabla (por id). El hook resuelve
+ * el orden efectivo combinando lo guardado con los defaults (columnas nuevas al final,
+ * ids viejos ignorados) via `ordenarColumnas`.
+ *
+ * SSR-safe: en el primer render (servidor y cliente) usa los defaults; tras montar, lee
+ * localStorage y re-renderiza. Asi no hay desajuste de hidratacion.
+ */
+declare function useTablaPreferencias(clave: string, idsDefault: string[]): {
+    /** Ids en el orden efectivo, SIN las ocultas — para pintar la tabla. */
+    idsVisibles: string[];
+    /** Ids en el orden efectivo, incluyendo ocultas — para el menu de mostrar/ocultar. */
+    idsOrdenados: string[];
+    /** Set de ids ocultos. */
+    ocultas: Set<string>;
+    /** Ancho persistido de una columna, o undefined si no se ha redimensionado. */
+    anchoDe: (id: string) => number | undefined;
+    mover: (desde: number, hasta: number) => void;
+    redimensionar: (id: string, ancho: number) => void;
+    alternarVisible: (id: string) => void;
+    restablecer: () => void;
+};
+
+/**
+ * Calculo puro de la posicion de un popover `fixed` dentro del viewport. Separado del
+ * componente para poder probarlo sin layout real (jsdom no mide).
+ */
+type RectLike = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+type EntradaPosicion = {
+    trigger: RectLike;
+    /** Tamano medido del contenido (ya acotado a `anchoMax` si aplica). */
+    contenido: {
+        ancho: number;
+        alto: number;
+    };
+    viewport: {
+        ancho: number;
+        alto: number;
     };
+    margen?: number;
+    separacion?: number;
+    /** Ancho maximo deseado (default 360). */
+    anchoPreferido?: number;
 };
-/** Control sizing (Metronic). */
-declare const sizing: {
-    readonly controlHeight: 32;
-    readonly buttonMinWidth: 110;
+type PosicionPopover = {
+    top: number;
+    left: number;
+    /** Alto maximo para scroll interno. */
+    maxHeight: number;
+    /** Ancho maximo: min(preferido, viewport - 2*margen). */
+    anchoMax: number;
 };
+declare function calcularPosicionPopover({ trigger, contenido, viewport, margen, separacion, anchoPreferido, }: EntradaPosicion): PosicionPopover;
+
+/**
+ * Clases Tailwind CANONICAS de botones, campos y avisos. La plataforma las escribe en linea en cada pantalla; aqui estan
+ * agrupadas VERBATIM (docs/sistema-diseno-ui.md 7.1, 7.2 y 7.9 del proyecto original, y las clases mas repetidas en su
+ * codigo) para que no se reinventen. Uso: `<button className={CLASE_BOTON_PRIMARIO}>`.
+ * Regla: una sola accion primaria por vista o modal. Destructivo: siempre con confirmacion previa.
+ */
 /**
- * Semantic tokens — role aliases. These feed the antd `ThemeConfig`.
- * Components must consume semantic tokens, never primitives directly.
- */
-declare const semantic: {
-    readonly colorPrimary: "#A72432";
-    readonly colorPrimaryActive: "#8B1D28";
-    readonly colorSuccess: "#50cd89";
-    readonly colorInfo: "#7239ea";
-    readonly colorError: "#f1416c";
-    readonly colorWarning: "#ffc700";
-    readonly colorLink: "#3f4254";
-    readonly colorLinkHover: "#A72432";
-    readonly colorLinkActive: "#8B1D28";
-    readonly colorBgLayout: "#f5f8fa";
-    readonly colorBgContainer: "#ffffff";
-    readonly borderRadius: 4;
-    readonly fontFamily: "Inter, Helvetica, Arial, sans-serif";
-    readonly fontSize: 13;
-    readonly controlHeight: 32;
+ * Primario estandar (36 px de alto): accion principal de una vista o modal.
+ * Relleno NEUTRO OSCURO (var(--tema-texto)), NO el rojo de marca: el rojo queda reservado a peligro
+ * (ver docs/criterio-color-acciones.md). El rojo de marca aparece como acento (titulos, foco, seleccion).
+ */
+declare const CLASE_BOTON_PRIMARIO = "inline-flex items-center gap-1.5 rounded-md bg-[var(--tema-texto)] px-4 py-2 text-sm font-medium text-white transition hover:brightness-125 disabled:opacity-50";
+/** Primario compacto (32 px): modales y barras de herramientas. Mismo criterio neutro oscuro. */
+declare const CLASE_BOTON_PRIMARIO_COMPACTO = "inline-flex items-center gap-1.5 rounded-md bg-[var(--tema-texto)] px-3 py-1.5 text-sm font-medium text-white transition hover:brightness-125 disabled:opacity-50";
+/** Secundario: cancelar, acciones de fila, paginador. */
+declare const CLASE_BOTON_SECUNDARIO = "inline-flex items-center gap-1.5 rounded-md border border-[var(--tema-borde)] px-3 py-1.5 text-sm font-medium text-[#3c3c3b] transition hover:bg-[var(--tema-badge-neutro)] disabled:opacity-50";
+/** Pequeno (28 px): barras de herramientas de tabla (mismo que el boton "Columnas"). */
+declare const CLASE_BOTON_PEQUENO = "inline-flex items-center gap-1.5 rounded-md border border-[var(--tema-borde)] px-2.5 py-1.5 text-xs font-medium text-[#3c3c3b] transition hover:bg-[var(--tema-badge-neutro)] disabled:opacity-50";
+/** Contorno primario: accion secundaria que debe destacar. */
+declare const CLASE_BOTON_CONTORNO = "rounded-md border border-[var(--tema-primario)] px-3 py-1 text-xs font-medium text-[var(--tema-primario)] transition hover:bg-[#eaf2fb]";
+/** Solo icono (cerrar, copiar, colapsar): exige `aria-label` y `title`. */
+declare const CLASE_BOTON_ICONO = "rounded-md p-1 text-[#807f7f] transition hover:bg-[var(--tema-badge-neutro)]";
+/** Destructivo (bajas): contorno en el rojo de peligro (tematizable); confirmar siempre antes de ejecutar. */
+declare const CLASE_BOTON_PELIGRO = "inline-flex items-center gap-1.5 rounded-md border border-[var(--tema-peligro)] px-3 py-1.5 text-sm font-medium text-[var(--tema-peligro)] transition hover:bg-[var(--tema-badge-error)] disabled:opacity-50";
+/** Input / select / textarea estandar. Compacto (filtros): `px-2 py-1.5`. */
+declare const CLASE_CAMPO = "rounded-md border border-[var(--tema-borde)] bg-[var(--tema-fondo)] px-3 py-2 text-sm text-[#3c3c3b] focus:border-[var(--tema-primario)] focus:outline-none disabled:bg-[#f4f8fc] disabled:text-[#807f7f]";
+declare const CLASE_CAMPO_COMPACTO = "rounded-md border border-[var(--tema-borde)] bg-[var(--tema-fondo)] px-2 py-1.5 text-sm text-[#3c3c3b] focus:border-[var(--tema-primario)] focus:outline-none";
+/** Etiqueta (label) de campo: encima del campo, separada 4 px (`flex flex-col gap-1`). */
+declare const CLASE_ETIQUETA_CAMPO = "text-sm font-medium text-[#3c3c3b]";
+/** Texto de ayuda bajo el campo. */
+declare const CLASE_AYUDA_CAMPO = "text-xs text-[#807f7f]";
+/** Error de un campo o del envio (con `role="alert"`). */
+declare const CLASE_ERROR_CAMPO = "text-sm text-[var(--tema-peligro)]";
+/** Exito bajo el formulario (con `role="status"`). */
+declare const CLASE_EXITO_CAMPO = "text-sm text-[#1e7a34]";
+/** Tarjeta / seccion: borde fino, sin sombra, sin fondo. */
+declare const CLASE_TARJETA = "rounded-lg border border-[var(--tema-borde)] p-4";
+/** Titulos. */
+declare const CLASE_TITULO_PAGINA = "flex items-center gap-2 text-xl font-semibold text-[var(--tema-primario-oscuro)]";
+declare const CLASE_TITULO_SECCION = "text-sm font-semibold text-[var(--tema-primario-oscuro)]";
+declare const CLASE_TEXTO_ATENUADO = "text-sm text-[#807f7f]";
+
+declare const CLASES: {
+    readonly exito: "bg-[var(--tema-badge-exito)] text-[#1e6b34]";
+    readonly error: "bg-[var(--tema-badge-error)] text-[var(--tema-peligro)]";
+    readonly aviso: "bg-[var(--tema-badge-advertencia)] text-[#8a5a00]";
+    readonly neutro: "bg-[var(--tema-badge-neutro)] text-[#565656]";
 };
-type ThemeMode = 'light' | 'dark';
+type Tono = keyof typeof CLASES;
+declare function Insignia({ tono, children, info, icono: Icono, }: {
+    tono: keyof typeof CLASES;
+    children: ReactNode;
+    /** Icono de 12 px antes del texto (KIT: patron de `BadgeEstado` de la plataforma; el color nunca es la unica senal). */
+    icono?: LucideIconType;
+    /** Explicacion en sitio de la insignia: el icono va justo despues del chip, nunca dentro de el. */
+    info?: ExplicacionId;
+}): react.JSX.Element;
+declare function Tarjeta({ titulo, children, nota, info, }: {
+    titulo: string;
+    children: ReactNode;
+    nota?: ReactNode;
+    /** Explicacion en sitio del titulo (catalogo `lib/explicaciones.ts`). */
+    info?: ExplicacionId;
+}): react.JSX.Element;
+declare function Metrica({ etiqueta, valor, info, }: {
+    etiqueta: string;
+    valor: ReactNode;
+    /** Explicacion en sitio de la metrica (catalogo `lib/explicaciones.ts`). */
+    info?: ExplicacionId;
+}): react.JSX.Element;
+/** Encabezado de columna con su explicacion en sitio (el icono va junto al texto, alineado segun la columna). */
+declare function ThInfo({ info, children, className, derecha, scope, atributos, }: {
+    info: ExplicacionId;
+    children: ReactNode;
+    className?: string;
+    derecha?: boolean;
+    scope?: "col" | "row";
+    /** Atributos de columna del marco de tablas: `fija("izq", i)` o `col(id)` (`@/kit/tabla/celdas`). */
+    atributos?: object;
+}): react.JSX.Element;
 
-interface AmsConfigProviderProps {
-    /**
-     * Controlled color mode. When provided, the provider does not manage or
-     * persist the mode. Omit it to let the provider manage the mode itself
-     * (persisted to localStorage, respects OS preference) — read/toggle it with
-     * the `useThemeMode` hook.
-     */
-    mode?: ThemeMode;
-    /** Initial mode when self-managed (uncontrolled). Defaults to `light`. */
-    defaultMode?: ThemeMode;
-    /** Persist the self-managed mode to localStorage. Defaults to `true`. */
-    persistMode?: boolean;
-    /**
-     * antd locale (e.g. `esES`, `enUS`). The consuming app passes it;
-     * the design system stays i18n-agnostic and ships no message catalog.
-     */
-    locale?: Locale;
-    /**
-     * Theme overrides merged on top of the AMS theme. Use it to customize tokens
-     * per project without forking the DS, e.g. `{ token: { colorLink: '#1677ff' } }`.
-     */
-    theme?: ThemeConfig;
+/**
+ * Icono de ayuda (change `explicaciones-analitica-conceptos`): al pasar el mouse o enfocar con teclado abre un
+ * popover con las 4 preguntas fijas (que es, como se calcula, de donde sale, como leerlo) del catalogo
+ * `lib/explicaciones.ts`. Reusa `PopoverHover` (focusable, `aria-describedby`, posicion `fixed`).
+ *
+ * Sin desplazamiento de layout: el disparador es un icono de tamano fijo (14px) en un `span` en linea; el
+ * contenido solo existe mientras esta abierto. Un id fuera del catalogo lanza (`explicacionDe`): preferible a
+ * dejar una metrica sin explicacion en silencio. El `data-explicacion-id` lo leen las pruebas de cobertura.
+ */
+declare function InfoExplicacion({ id }: {
+    id: ExplicacionId;
+}): react.JSX.Element;
+
+declare const TIPOS: {
+    readonly error: "rounded-md bg-[var(--tema-badge-error)] px-3 py-2 text-sm text-[var(--tema-peligro)]";
+    readonly advertencia: "rounded-md bg-[var(--tema-badge-advertencia)] px-3 py-2 text-xs text-[#8a5a00]";
+    readonly neutro: "rounded-lg bg-[var(--tema-badge-neutro)] px-3 py-2 text-sm text-[#565656]";
+    readonly exito: "rounded-md bg-[var(--tema-badge-exito)] px-3 py-2 text-sm text-[#1e7a34]";
+};
+/** Aviso en linea: empieza con una frase en negrita (`titulo`) y sigue el detalle. `error` -> role="alert"; el resto "status". */
+declare function Aviso({ tipo, titulo, children, info, }: {
+    tipo: keyof typeof TIPOS;
+    titulo?: string;
     children?: ReactNode;
-}
+    info?: ExplicacionId;
+}): react.JSX.Element;
+/** Vacio en bloque (borde punteado). Dentro de una tabla se usa una fila `td colSpan` con `EstadoVacioFila`. */
+declare function EstadoVacio({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+/** Fila de "Sin resultados" para el `<tbody>` de una tabla. */
+declare function EstadoVacioFila({ columnas, children }: {
+    columnas: number;
+    children?: ReactNode;
+}): react.JSX.Element;
+/** "No disponible": un calculo que no pudo hacerse. Dice por que; NUNCA pinta un cero. */
+declare function NoDisponible({ motivo, info }: {
+    motivo: string;
+    info: ExplicacionId;
+}): react.JSX.Element;
+/** Barra de progreso (6 px de alto). */
+declare function BarraProgreso({ porcentaje, etiqueta }: {
+    porcentaje: number;
+    etiqueta: string;
+}): react.JSX.Element;
+
+type AvisoAccion = {
+    tipo: "ok" | "error";
+    texto: string;
+};
+type IdInfo = Parameters<typeof InfoExplicacion>[0]["id"];
+/**
+ * Estado de una accion asincrona (patron unico: "Reintentar", "Sincronizar", etc.): `correr` la
+ * ejecuta una vez, `ejecutando` deshabilita el disparador y `aviso` dice el resultado. Un error lanzado se dice con
+ * `errorGenerico`; `onHecho` solo se llama si la accion termino bien (para refrescar lo que se ve). Change
+ * separado del boton para que el disparador pueda vivir en el menu "⋯" de la fila (que
+ * se cierra al elegir) mientras el spinner y el aviso se pintan en la fila.
+ */
+declare function useAccionAviso({ ejecutar, errorGenerico, onHecho, }: {
+    ejecutar: () => Promise<AvisoAccion>;
+    errorGenerico: string;
+    onHecho?: () => void;
+}): {
+    ejecutando: boolean;
+    aviso: AvisoAccion | null;
+    correr: () => Promise<void>;
+};
+/** Spinner mientras la accion corre y el aviso del resultado (`status` si salio bien, `alert` si fallo). */
+declare function AvisoAccionEstado({ ejecutando, aviso, etiquetaSpinner, }: {
+    ejecutando: boolean;
+    aviso: AvisoAccion | null;
+    etiquetaSpinner: string;
+}): react.JSX.Element;
 /**
- * Root provider for the AMS Design System.
+ * Boton de accion con su (i), spinner y aviso del resultado. Deshabilitado mientras `ejecutar` corre.
+ * Compone `useAccionAviso` + `AvisoAccionEstado`.
+ */
+declare function BotonAccionAviso({ etiqueta, etiquetaEjecutando, etiquetaSpinner, ariaLabel, info, errorGenerico, ejecutar, onHecho, }: {
+    etiqueta: string;
+    etiquetaEjecutando: string;
+    etiquetaSpinner: string;
+    ariaLabel: string;
+    info: IdInfo;
+    errorGenerico: string;
+    ejecutar: () => Promise<AvisoAccion>;
+    onHecho?: () => void;
+}): react.JSX.Element;
+
+type GrupoNavegacion = {
+    /** Titulo overline del grupo ("Operacion", "Administracion"...). Sin titulo = grupo sin encabezado. */
+    titulo?: string;
+    enlaces: {
+        href: string;
+        etiqueta: string;
+        icono: LucideIconType;
+    }[];
+};
+declare function CascaronApp({ producto, hrefInicio, logo, usuario, hrefCerrarSesion, grupos, pieExtra, children, }: {
+    /** Nombre del producto (14 px, 600, color primario) bajo el logo. */
+    producto: string;
+    hrefInicio?: string;
+    /** Logo opcional (ya dimensionado). Sin logo se muestra solo el nombre. */
+    logo?: {
+        src: string;
+        alt: string;
+        ancho: number;
+        alto: number;
+    };
+    usuario: {
+        nombre: string;
+        rol?: string;
+        idEstable?: string;
+    };
+    hrefCerrarSesion?: string;
+    grupos: GrupoNavegacion[];
+    /** Controles extra del pie (p. ej. la campana de notificaciones), a la izquierda del usuario. */
+    pieExtra?: ReactNode;
+    children: ReactNode;
+}): react.JSX.Element;
+
+/**
+ * Enlace del menu lateral. Server-compatible (sin estado): el colapso lo decide CSS via el
+ * atributo `data-colapsado` del `<aside>` (`SidebarColapsable`, grupo `side`). Con el menu
+ * colapsado (escritorio) solo se ve el icono; `aria-label` y `title` conservan el nombre
+ * accesible y el tooltip nativo.
+ */
+declare function EnlaceNav({ href, icono, etiqueta, }: {
+    href: string;
+    icono: ReactNode;
+    etiqueta: string;
+}): react.JSX.Element;
+/** Seccion del menu: el titulo se oculta (queda un separador) cuando el menu esta colapsado. */
+declare function SeccionNav({ titulo, children }: {
+    titulo?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+/** Migas: "← Volver" (enlace primario subrayado) / valor actual (mono si es un codigo). */
+declare function Migas({ hrefVolver, etiquetaVolver, actual, actualMono, }: {
+    hrefVolver: string;
+    /** Texto del enlace, p. ej. "Planes". Se pinta como "← Planes". */
+    etiquetaVolver: string;
+    actual: string;
+    actualMono?: boolean;
+}): react.JSX.Element;
+/** Sub-navegacion entre vistas hermanas de una misma entidad (pildoras con borde; la activa lleva `aria-current`). */
+declare function SubNav({ etiqueta, secciones, activa, }: {
+    etiqueta: string;
+    secciones: readonly {
+        id: string;
+        texto: string;
+        href: string;
+    }[];
+    activa: string;
+}): react.JSX.Element;
+
+/**
+ * Cambio `web-paneles-ajustables` — menu lateral colapsable.
  *
- * - Applies the AMS theme (light/dark) via antd's `ConfigProvider`.
- * - Renders antd's `App` for context-safe `message`/`notification`/`Modal`.
- * - Manages the color mode (controlled via `mode`, or self-managed with
- *   localStorage persistence and OS-preference detection) and exposes it
- *   through the `useThemeMode` hook.
- * - Accepts a `theme` override merged on top of the AMS theme.
+ * Escritorio (`md`+): boton para colapsar a un rail de solo iconos (w-14); la preferencia
+ * persiste en localStorage. Movil (<`md`): el menu es un cajon fuera de pantalla con boton
+ * hamburguesa, fondo que lo cierra, Escape y cierre al elegir un enlace (antes ocupaba
+ * 15rem fijos del viewport).
  *
- * Render it once at the app root.
+ * El estado se expone como `data-colapsado` en el `<aside>` (grupo `side`): los enlaces del
+ * Server Component (`EnlaceNav`) reaccionan por CSS, sin convertirse en cliente. El render
+ * inicial es expandido (igual que el SSR) y el valor guardado se aplica tras montar.
+ * Convive con el asistente anclado: este rail solo cambia SU ancho; el area de contenido es
+ * `flex-1` y el asistente reserva su espacio aparte con `--asistente-ancho`.
  */
-declare function AmsConfigProvider({ mode, defaultMode, persistMode, locale, theme, children, }: PropsWithChildren<AmsConfigProviderProps>): react.JSX.Element;
+declare function SidebarColapsable({ cabecera, pie, children, }: {
+    cabecera: ReactNode;
+    pie: ReactNode;
+    children: ReactNode;
+}): react.JSX.Element;
 
+declare const BOTON: {
+    readonly primario: "inline-flex items-center gap-1.5 rounded-md bg-[var(--tema-texto)] px-3 py-1.5 text-sm font-medium text-white transition hover:brightness-125 disabled:opacity-50";
+    readonly secundario: "inline-flex items-center gap-1.5 rounded-md border border-[var(--tema-borde)] px-3 py-1.5 text-sm font-medium text-[#3c3c3b] transition hover:bg-[var(--tema-badge-neutro)] disabled:opacity-50";
+};
 /**
- * Builds the antd theme for a given mode. Dark mode uses antd's
- * `darkAlgorithm`; brand tokens stay identical so the brand is consistent.
+ * Boton que abre un dialogo modal con un formulario (change `ux-listados-compactos`): saca de la vista los
+ * formularios de alta que ocupaban la pantalla antes del listado. Sigue el sistema de diseno 7.11: `role="dialog"`,
+ * `aria-modal`, titulo asociado, foco al primer campo al abrir, `Escape`, boton Cerrar y clic en el fondo cierran,
+ * y el foco vuelve al boton que lo abrio. El contenido (el formulario) se monta solo mientras esta abierto.
  */
-declare function buildTheme(mode?: ThemeMode): ThemeConfig;
-/** Default (light) AMS theme. */
-declare const amsTheme: ThemeConfig;
-/** Dark AMS theme. */
-declare const amsThemeDark: ThemeConfig;
+declare function AccionConDialogo({ etiqueta, titulo, icono, variante, children, }: {
+    etiqueta: string;
+    titulo: string;
+    icono?: ReactNode;
+    variante?: keyof typeof BOTON;
+    children: ReactNode;
+}): react.JSX.Element;
 
-/** Reads the initial mode: saved preference → OS preference → light. */
-declare function getInitialThemeMode(defaultMode?: ThemeMode): ThemeMode;
-/** Reflects the mode on the DOM so CSS can react (mirrors mf-container). */
-declare function applyThemeModeToDOM(mode: ThemeMode): void;
-interface ThemeModeContextValue {
-    mode: ThemeMode;
-    setMode: (mode: ThemeMode) => void;
-    toggle: () => void;
-    isDark: boolean;
-}
 /**
- * Access the current color mode and switch it. Requires an ancestor
- * `AmsConfigProvider`. Use it to build a light/dark toggle:
+ * Modal de detalle con tabla (change `listados-ajuste-viewport`, lineamiento `docs/lineamientos-ui.md` "Tablas"): el
+ * dialogo nunca crece mas alla de la ventana (`max-h-[90dvh]`, ancho `min(96vw, ...)`); la cabecera y el resumen no se
+ * encogen y la tabla (`MarcoTabla ajuste="pagina"` dentro de `children`) toma el alto restante, asi que solo ella se
+ * desplaza en ambos ejes con su encabezado y columnas fijas. Antes cada modal crecia con su tabla y se cortaba el pie y
+ * las columnas de la derecha.
  *
- *   const { isDark, toggle } = useThemeMode();
- *   <Switch checked={isDark} onChange={toggle} />
+ * `role="dialog"` + `aria-modal`, titulo asociado (`tituloId`), foco al dialogo al abrir; `Escape`, el boton Cerrar y
+ * el clic en el fondo cierran.
  */
-declare function useThemeMode(): ThemeModeContextValue;
+declare function ModalPanel({ titulo, tituloId, acciones, onCerrar, etiquetaCerrar, ancho, children, }: {
+    /** Contenido del `<h2>` (texto, codigo, explicacion en sitio). */
+    titulo: ReactNode;
+    tituloId: string;
+    /** Botones junto al de cerrar (p. ej. "Descargar CSV"). */
+    acciones?: ReactNode;
+    onCerrar: () => void;
+    etiquetaCerrar?: string;
+    /** Clase de ancho maximo (Tailwind). */
+    ancho?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+declare function Pestanas({ etiqueta, pestanas, inicial, extra, }: {
+    etiqueta: string;
+    pestanas: {
+        id: string;
+        texto: string;
+        contenido: ReactNode;
+    }[];
+    inicial?: string;
+    /** Normalmente el (i) de las pestanas, alineado al centro del grupo. */
+    extra?: ReactNode;
+}): react.JSX.Element;
 
-interface ButtonProps extends ButtonProps$1 {
-}
 /**
- * AMS Button — thin wrapper over antd `Button` that inherits the AMS theme.
- * Exposes the full antd Button API (type, danger, loading, icon, size, etc.)
- * and forwards the ref so it integrates with Form and tooltips.
+ * Popover reusable que aparece al pasar el mouse (hover) o al enfocar con teclado (focus)
+ * sobre su disparador, y se oculta al salir/desenfocar. Nace del widget del tag schedule,
+ * pero es generico: cualquier control que quiera mostrar contenido rico al hover lo usa.
+ *
+ * Por que un componente y no el `title` nativo (unico patron previo en el sistema): el
+ * `title` solo muestra texto plano de una linea, no permite contenido estructurado (tabla
+ * de ejecuciones con iconos de estatus) ni es navegable. Este es accesible: el disparador
+ * es un boton focusable, el contenido se asocia por `aria-describedby` y responde a
+ * teclado (focus/blur), no solo a mouse.
+ *
+ * POSICIONAMIENTO `fixed` (no `absolute`): el widget vive dentro de tablas cuyo contenedor
+ * tiene `overflow-hidden`/`overflow-x-auto`; un popover `absolute` quedaba RECORTADO por
+ * ese overflow y no se veia. Con `fixed` + las coordenadas del disparador
+ * (`getBoundingClientRect`) el contenido flota sobre todo, fuera del flujo recortado.
+ *
+ * VIEWPORT-AWARE: `fixed` en la esquina del disparador desbordaba el viewport cerca del
+ * borde derecho/inferior (texto cortado e ilegible). Tras abrir se MIDE el contenido y
+ * `calcularPosicionPopover` lo acota al viewport (desplaza a la izquierda, abre arriba si
+ * no cabe abajo, limita ancho/alto con scroll interno). Se recalcula con scroll/resize y
+ * Escape lo cierra.
  */
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare function PopoverHover({ etiqueta, disparador, children, }: {
+    /** Nombre accesible del disparador (aria-label + tooltip nativo de respaldo). */
+    etiqueta: string;
+    /** Contenido visible del disparador (normalmente un icono). */
+    disparador: ReactNode;
+    /** Contenido del popover. */
+    children: ReactNode;
+}): react.JSX.Element;
+
+type CapacidadAcceso = {
+    icono: LucideIconType;
+    titulo: string;
+    descripcion: string;
+};
+declare function PantallaAcceso({ producto, titulo, descripcion, hrefLogin, etiquetaBoton, capacidades, logo, error, }: {
+    producto: string;
+    titulo: string;
+    descripcion: string;
+    hrefLogin: string;
+    etiquetaBoton?: string;
+    capacidades?: readonly CapacidadAcceso[];
+    /** Logo opcional ya renderizado (p. ej. `<Image .../>`). */
+    logo?: ReactNode;
+    /** Mensaje de error de acceso (p. ej. "Tu cuenta no tiene acceso"). Se pinta con role="alert". */
+    error?: string;
+}): react.JSX.Element;
 
-/** AMS semantic tag intents mapped to brand tokens. */
-type TagIntent = 'success' | 'error' | 'warning' | 'info' | 'primary';
-interface TagProps extends TagProps$1 {
-    /**
-     * Semantic intent that resolves to an AMS brand color. Takes precedence over
-     * antd's `color` when set. Formalizes the inline `#50cd89` / `#f1416c` colors
-     * previously hardcoded in mf-boveda's DataTable.
-     */
-    intent?: TagIntent;
-}
 /**
- * AMS Tag — thin wrapper over antd `Tag` with an optional semantic `intent`
- * that maps to the brand palette. Falls back to the full antd Tag API.
+ * Pantalla de carga a pagina completa (cambio `ux-spinner-marca`). Se usa como
+ * `loading.tsx` de las rutas densas: Next.js la muestra AL INSTANTE mientras el Server
+ * Component hace su fetch (SSR), en vez de dejar la pantalla congelada/en blanco -- que
+ * es lo que hacia sentir el cambio de pantalla "muy lento" (pedido del usuario). No es
+ * maquillaje: el fetch tarda lo mismo, pero el usuario ve feedback inmediato de marca en
+ * lugar de una pantalla muerta, que es la causa real de la lentitud PERCIBIDA.
  */
-declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+declare function PantallaCargando({ etiqueta }: {
+    etiqueta?: string;
+}): react.JSX.Element;
 
 /**
- * Icons — curated re-export from `@ant-design/icons`.
+ * Overlay de carga para ACCIONES (cambio `ux-spinner-marca`). Pedido del usuario: en cada
+ * accion que dispara al hacer click y consume un servicio, mostrar el spinner de marca
+ * llenandose. A diferencia de `loading.tsx` (navegacion entre pantallas), este cubre las
+ * mutaciones dentro de una pantalla (crear job, reintentar, exportar...). Se monta encima
+ * del contenido con un velo semitransparente y BLOQUEA la interaccion mientras `visible`.
  *
- * Usage:
- *   import { DownloadOutlined, SearchOutlined } from '@amsintegra/design-system';
- *   <Button icon={<DownloadOutlined />} />
+ * Uso: `{enviando && <OverlayCargando etiqueta="Creando job..." />}`.
+ */
+declare function OverlayCargando({ etiqueta, visible, }: {
+    etiqueta?: string;
+    visible?: boolean;
+}): react.JSX.Element | null;
+
+/**
+ * Spinner de marca: el logo de la instalacion que se "llena" de color de abajo hacia arriba, en
+ * bucle (cambio `ux-spinner-marca`). Pedido explicito del usuario: entre
+ * cambios de pantalla y en cada accion que consume un servicio, mostrar "un spinner con el logo
+ * llenandose de manera gradual".
  *
- * This module re-exports a curated set of the most-used icons across the b2bmx
- * microfrontends so consumers get autocomplete from the design system barrel.
- * For any icon not listed here, import it directly from `@ant-design/icons`
- * (it stays a peer dependency and is not bundled).
+ * COMO FUNCIONA (solucion de raiz, sin GIF ni libreria): se pinta la MISMA imagen del logo dos
+ * veces superpuestas:
+ *   1. una capa base tenue (el logo "vacio", en gris muy claro),
+ *   2. una capa de color de marca recortada con `mask` a la forma del logo (`mask-image` = la
+ *      imagen), cuya ALTURA visible sube de 0% a 100% con una animacion CSS en bucle.
+ * Asi el color solo aparece DENTRO de la silueta del logo y da el efecto de llenado gradual.
+ * Respeta `prefers-reduced-motion` (si el usuario lo pide, no anima: muestra el logo lleno y
+ * estatico, accesible).
  *
- * `IconComponent` is the shared type for an antd icon component, useful for
- * typing icon props on other components.
+ * La imagen sale de la variable CSS `--tema-logo-spinner` (la fija el layout raiz con el logo del
+ * producto o tenant); sin ella rige el icono de la marca por omision (`globals.css`). `tamano` en px (ancho);
+ * la altura se deriva del aspect ratio del logo (~120x52).
  */
-
-type IconComponent = ForwardRefExoticComponent<Omit<AntdIconProps, 'ref'>>;
+declare function SpinnerMarca({ tamano, etiqueta, }: {
+    tamano?: number;
+    etiqueta?: string;
+}): react.JSX.Element;
 
 /**
- * Context-safe access to antd's `message` API.
+ * Muestra un timestamp UTC en HORA LOCAL del navegador SIN romper la hidratacion
+ * (cambio `fix-hydration-fecha`).
+ *
+ * EL PROBLEMA (React #418): `formatearFechaHora` convierte los timestamps con sufijo UTC
+ * a hora local usando `new Date().getHours()` (metodos locales de Date). En el SERVIDOR
+ * (SSR en Lambda) la hora local es UTC; en el CLIENTE es la del navegador (p.ej. CDMX,
+ * UTC-6). Para el mismo instante el texto difiere -> "text content does not match
+ * server-rendered HTML" -> React descarta el arbol hidratado y puede romper el render.
  *
- * In antd v5 the static `message.success(...)` calls do **not** read the
- * `ConfigProvider` theme and log a warning. The supported approach is to
- * consume the instance provided by antd's `App` context — which
- * `AmsConfigProvider` already renders at the root.
+ * LA SOLUCION DE RAIZ (sin renunciar a la hora local que pidio el usuario): en el PRIMER
+ * render (SSR + primera pintura del cliente) se muestra el MISMO texto determinista para
+ * ambos (formato ISO legible, sin conversion), y TRAS montar (`useEffect`, solo cliente)
+ * se re-renderiza ya en hora local. Asi el HTML del server y el primer render del cliente
+ * coinciden byte a byte (no hay mismatch), y el usuario termina viendo su hora local. No
+ * es maquillaje: es el patron correcto de Next para valores dependientes del entorno del
+ * cliente (timezone).
+ */
+declare function FechaHoraLocal({ iso }: {
+    iso: string | null | undefined;
+}): react.JSX.Element;
+
+declare const ANCHOS: {
+    readonly completo: "";
+    readonly "2xl": "mx-auto max-w-2xl";
+    readonly "3xl": "mx-auto max-w-3xl";
+    readonly "4xl": "mx-auto max-w-4xl";
+};
+declare function PaginaContenido({ titulo, icono, descripcion, acciones, ancho, children, }: {
+    titulo: ReactNode;
+    /** Icono de 20 px (TAMANO_BOTON) antes del titulo. */
+    icono?: ReactNode;
+    descripcion?: ReactNode;
+    /** Botones de la pantalla, alineados a la derecha del encabezado. */
+    acciones?: ReactNode;
+    ancho?: keyof typeof ANCHOS;
+    children: ReactNode;
+}): react.JSX.Element;
+
+/**
+ * Pantalla de listado que cabe en la ventana (change `listados-ajuste-viewport`, lineamiento `docs/lineamientos-ui.md`
+ * "Tablas"): la pagina NO se desplaza; solo el cuerpo de la tabla lo hace y el paginador y la barra horizontal quedan
+ * siempre visibles al pie.
  *
- * Usage:
- *   const message = useAmsMessage();
- *   message.success('Saved');
+ * Como funciona (layout, sin numeros magicos): la columna de contenido del layout raiz toma el alto de la ventana cuando
+ * contiene un `[data-pagina-listado]` (`globals.css`); esta pagina es una columna flex `flex-1 min-h-0`, la cabecera y
+ * las barras no se encogen, y la tabla (`MarcoTabla ajuste="pagina"`) toma el alto restante. Cada envoltorio entre la
+ * pagina y el marco lleva `CLASE_REGION_LISTADO` para no romper la cadena `min-h-0`.
  *
- * Requires an ancestor `AmsConfigProvider` (or antd `App`).
+ * Sin `"use client"`: la usan paginas Server Component.
  */
-declare function useAmsMessage(): MessageInstance;
+/** Clases de un envoltorio entre `PaginaListado` y `MarcoTabla ajuste="pagina"` (pasa el alto restante hacia la tabla). */
+declare const CLASE_REGION_LISTADO = "flex min-h-0 flex-1 flex-col";
+declare function PaginaListado({ titulo, icono, descripcion, acciones, className, children, }: {
+    titulo: ReactNode;
+    /** Icono de 20 px antes del titulo (opcional). */
+    icono?: ReactNode;
+    /** Una linea junto al titulo; si no cabe se recorta con elipsis y el texto completo queda en el tooltip. */
+    descripcion?: string;
+    /** Botones o enlaces de la pantalla (a la derecha de la cabecera). */
+    acciones?: ReactNode;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
 
 /**
- * Context-safe access to antd's `notification` API.
+ * Paginación CLIENT-SIDE sobre una lista ya cargada. Para listas acotadas
+ * (decenas–cientos de filas) sin cursor de servidor: paginarlas en el cliente es lo proporcional.
+ * Mismo patrón visual que el resto de listados (Anterior/Siguiente + tamaño de página, con iconos).
  *
- * Like `useAmsMessage`, this returns the instance from antd's `App` context so
- * notifications inherit the AMS theme and avoid the v5 static-method warning.
- * Requires an ancestor `AmsConfigProvider` (or antd `App`).
+ * `usePaginacionLocal` corta la lista; `PaginadorLocal` son los controles. Van juntos
+ * pero separados para poder probar el corte sin renderizar la UI.
+ */
+declare function usePaginacionLocal<T>(items: T[], tamanoInicial?: number): {
+    itemsPagina: T[];
+    paginaActual: number;
+    totalPaginas: number;
+    tamano: number;
+    totalItems: number;
+    siguiente: () => void;
+    anterior: () => void;
+    cambiarTamano: (n: number) => void;
+};
+declare function PaginadorLocal({ paginaActual, totalPaginas, totalItems, tamano, tamanos, onAnterior, onSiguiente, onCambiarTamano, }: {
+    paginaActual: number;
+    totalPaginas: number;
+    totalItems: number;
+    tamano: number;
+    /** Tamanos ofrecidos (por omision 10/25/50/100). Los listados por URL usan 25/50/100. */
+    tamanos?: readonly number[];
+    onAnterior: () => void;
+    onSiguiente: () => void;
+    /** Sin este callback no se pinta el selector de tamano (p. ej. cuando vive en `BarraListado`). */
+    onCambiarTamano?: (n: number) => void;
+}): react.JSX.Element | null;
+
+/**
+ * Paginador de un listado cuyo estado vive en la URL (change `ux-listados-compactos`). Reusa los controles de
+ * `PaginadorLocal` (mismo aspecto que los demas grids); solo cambia de donde sale la pagina: `?pagina=N`. El
+ * tamano de pagina se elige en `BarraListado`, por eso aqui no se pinta su selector. Al cambiar de pagina se
+ * regresa al inicio de la pantalla (`scroll: true`).
+ */
+declare function PaginadorUrl({ pagina, totalPaginas, totalItems, tamano, }: {
+    pagina: number;
+    totalPaginas: number;
+    totalItems: number;
+    tamano: number;
+}): react.JSX.Element | null;
+
+type FiltroListado = {
+    tipo?: "seleccion";
+    clave: string;
+    etiqueta: string;
+    /** La primera opcion suele ser "Todos" con `valor: ""` (sin filtro). */
+    opciones: {
+        valor: string;
+        etiqueta: string;
+    }[];
+} | {
+    tipo: "numero";
+    clave: string;
+    etiqueta: string;
+    min?: number;
+    max?: number;
+};
+/**
+ * Barra de un listado (change `ux-listados-compactos`): busqueda de texto, filtros de la pantalla,
+ * tamano de pagina y conteo. Todo vive en la URL (`useNavegarListado`), asi que un enlace copiado reproduce la
+ * misma vista; cualquier cambio regresa a la pagina 1.
  *
- * Usage:
- *   const notification = useAmsNotification();
- *   notification.success({ message: 'Done', description: 'Saved.' });
+ * La busqueda espera 300 ms sin teclear (o `Enter`) y navega UNA vez. Vive en su propio `<form role="search">`
+ * con `preventDefault`: `Enter` aqui nunca envia otro formulario de la pantalla. `Escape` o el boton X limpian.
+ * Los filtros de seleccion aplican al elegir; los numericos al salir del campo o con `Enter`.
  */
-declare function useAmsNotification(): NotificationInstance;
+declare function BarraListado({ filtros, totalFiltrado, total, placeholder, etiquetaBusqueda, extra, }: {
+    filtros: FiltroListado[];
+    totalFiltrado: number;
+    total: number;
+    placeholder?: string;
+    /** Rotulo (label) del campo de busqueda. */
+    etiquetaBusqueda?: string;
+    /** Controles adicionales a la derecha (p. ej. alternar vista tabla/tarjetas). */
+    extra?: ReactNode;
+}): react.JSX.Element;
 
 /**
- * Translatable text labels for the pagination control. The design system is
- * i18n-agnostic: the consuming app passes already-translated strings. Anything
- * omitted falls back to antd's `locale` (or English defaults).
+ * Encabezado ordenable de un listado por URL (change `ux-listados-compactos`; sistema de diseno 7.3). El `th`
+ * lleva `aria-sort`; el boton alterna asc -> desc -> orden por omision de la pantalla (borra `orden`/`dir`) y escribe `orden`/`dir` en la URL, asi
+ * que ordena TODO el resultado filtrado (no solo la pagina visible). La explicacion (i) va fuera del boton.
  */
-interface PaginationLabels {
-    /** Suffix in the page-size selector, e.g. "/ página". */
-    itemsPerPage?: string;
-    /** "Ir a" label of the quick jumper. */
-    jumpTo?: string;
-    /** Confirm button text of the quick jumper. */
-    jumpToConfirm?: string;
-    /** Accessible label for a page, e.g. "Página". */
-    page?: string;
-    /** Accessible label for the previous-page button. */
-    prevPage?: string;
-    /** Accessible label for the next-page button. */
-    nextPage?: string;
-    /** Label for the page-size selector, e.g. "Tamaño de página". */
-    pageSize?: string;
-    /**
-     * Builds the total-records text (rendered before the pages).
-     * Receives the total and the current [from, to] range.
-     * e.g. (total) => `Total ${total} registros`. Takes precedence over `totalText`.
-     */
-    total?: (total: number, range: [number, number]) => ReactNode;
-    /**
-     * Declarative total text as separate translated words, matching how the
-     * mf-boveda table builds it: `{prefix} {total} {suffix}` → "Total 250 registros".
-     * Set `showRange` to render "{prefix} {from}-{to} {suffix}" instead.
-     * Ignored when `total` (the function form) is provided.
-     */
-    totalText?: {
-        /** Word(s) before the number, e.g. "Total". */
-        prefix?: string;
-        /** Word(s) after the number, e.g. "registros". */
-        suffix?: string;
-        /** Use the "from-to" range instead of just the total. Default false. */
-        showRange?: boolean;
-    };
-    /** Visible text for the "previous" button (overrides the arrow). */
-    previousText?: ReactNode;
-    /** Visible text for the "next" button (overrides the arrow). */
-    nextText?: ReactNode;
-}
-interface PaginationProps extends PaginationProps$1 {
-    /** Translatable text labels. */
-    labels?: PaginationLabels;
-}
-/**
- * AMS Pagination — antd `Pagination` with translatable text via a single
- * `labels` prop (page, records/total, previous/next, items-per-page, jumper).
- * The rest of the antd Pagination API passes through. `showTotal` and
- * `itemRender` still work if you prefer to set them directly; explicit
- * `showTotal`/`itemRender`/`locale` props win over `labels`.
- */
-declare function Pagination({ labels, showTotal, itemRender, locale, ...rest }: PaginationProps): react.JSX.Element;
-
-type CardComponent = react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>> & {
-    Grid: (typeof Card$1)['Grid'];
-    Meta: (typeof Card$1)['Meta'];
+declare function EncabezadoOrdenUrl({ clave, etiqueta, icono, info, ordenActual, dirActual, alineado, celda, }: {
+    clave: string;
+    etiqueta: string;
+    icono?: ReactNode;
+    info: ExplicacionId;
+    ordenActual: string;
+    dirActual: Direccion;
+    alineado?: "left" | "right";
+    /** Atributos del marco de tablas para el `th`: `{...fija("izq", 0)}` o `{...col("id")}` (change `tablas-columnas-fijas`). */
+    celda?: Record<string, string | number | undefined>;
+}): react.JSX.Element;
+
+/** Envuelve un arbol que se exporta (PDF/HTML): sus tablas conservan el layout original. */
+declare function TablaPlana({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function UsuarioTablas({ usuario, children }: {
+    usuario?: string | null;
+    children: ReactNode;
+}): react.JSX.Element;
+type ColumnaOcultable = {
+    id: string;
+    etiqueta: string;
 };
-declare const Card: CardComponent;
-
-interface ThemeToggleProps extends Omit<SwitchProps, 'checked' | 'onChange'> {
-}
-/**
- * AMS ThemeToggle — a ready-made light/dark switch wired to `useThemeMode`.
- * Requires an ancestor `AmsConfigProvider` that manages the mode
- * (i.e. rendered without a controlled `mode` prop).
- */
-declare function ThemeToggle(props: ThemeToggleProps): react.JSX.Element;
-
-/**
- * Labels for the DataTable. The design system is i18n-agnostic: the consuming
- * microfrontend passes translated strings from its own catalog. Sensible
- * English defaults are provided so the table renders without wiring.
- */
-interface DataTableLabels {
-    emptyText?: string;
-    sortAsc?: string;
-    sortDesc?: string;
-    cancelSort?: string;
-}
-interface DataTableProps<T extends object = Record<string, unknown>> extends Omit<TableProps<T>, 'title' | 'loading'> {
-    /** Optional plain-text heading rendered above the table. */
-    heading?: string;
-    /** Extra content (buttons, filters) rendered above the table. */
-    extra?: React.ReactNode;
-    /** External loading state. Renders a skeleton placeholder while true. */
-    loading?: boolean;
-    /** Translated labels; falls back to English defaults. */
-    labels?: DataTableLabels;
+/**
+ * `pagina`: la tabla es el contenido principal de una pantalla de listado (`PaginaListado`) y toma el alto restante.
+ * `acotado`: la tabla vive dentro de una pagina que se desplaza; su alto maximo se acota (`--marco-alto`, default 70dvh).
+ */
+type AjusteMarco = "pagina" | "acotado";
+declare function MarcoTabla({ clave, etiqueta, columnas, barra, alto, ajuste, pie, controles, className, clasePlana, children, }: {
+    /** Id estable de la tabla (persistencia): `modulo.tabla`. */
+    clave: string;
+    /** Nombre accesible de la region desplazable. */
+    etiqueta: string;
+    /** Columnas que el usuario puede ocultar (las que llevan `col(id)`). Sin ellas no hay menu "Columnas". */
+    columnas?: ColumnaOcultable[];
+    /** Controles propios de la tabla que van en la misma barra (a la izquierda). */
+    barra?: ReactNode;
+    /** Alto maximo del marco en el ajuste `acotado` (CSS). Default `70dvh`, nunca menos de 18rem. */
+    alto?: string;
+    /** `pagina` en pantallas de listado (la pagina no se desplaza, solo el cuerpo); `acotado` (default) en el resto. */
+    ajuste?: AjusteMarco;
+    /** Pie del marco (paginador): fila `shrink-0` bajo la region desplazable, siempre visible. */
+    pie?: ReactNode;
+    /** `false` oculta la barra (densidad/columnas) en tablas minimas; el marco y las columnas fijas se mantienen. */
+    controles?: boolean;
+    className?: string;
+    /** Clases del contenedor bajo `TablaPlana` (exportaciones): las que tenia la tabla antes del marco, para no alterar su layout. */
+    clasePlana?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+/**
+ * Columna de una tabla configurable. `id` es estable (se usa para persistir orden/ancho);
+ * `encabezado` es el contenido del <th> (texto + icono); `celda` recibe la fila y devuelve
+ * el contenido del <td>. `alineado` afecta th y td. `minAncho` en px (default 80).
+ * `fijaAncho`: si true, la columna respeta su ancho (util para UUID que debe verse
+ * completo); si false/omitido, crece con el contenido salvo que el usuario la redimensione.
+ */
+type ColumnaConfig<T> = {
+    id: string;
+    encabezado: ReactNode;
+    /** Version del encabezado para el menu de columnas (que vive dentro de un <button>): sin controles
+     * interactivos anidados, como el icono de explicacion en sitio. Si se omite se usa `encabezado`. */
+    encabezadoMenu?: ReactNode;
     /**
-     * Translatable pagination text (total/records, previous/next, page-size,
-     * jumper). Applied to the table's pagination — matches the mf-boveda pattern
-     * of a "{prefix} {total} {suffix}" total and translated prev/next buttons.
-     * Merged into `pagination`; anything set directly on `pagination`
-     * (`showTotal`/`itemRender`/`locale`) wins.
+     * Explicacion en sitio de la columna (catalogo `lib/explicaciones.ts`). Se pinta FUERA del boton de orden
+     * (sin controles anidados) y no aparece en el menu de columnas. Obligatoria por lineamiento
+     * (docs/lineamientos-ui.md): la compuerta `cobertura-explicaciones.test.ts` la exige.
      */
-    paginationLabels?: PaginationLabels;
+    info?: ExplicacionId;
+    celda: (fila: T) => ReactNode;
+    alineado?: "left" | "right";
+    /** Ancho inicial en px (antes de que el usuario redimensione). Default 160. */
+    anchoDefault?: number;
     /**
-     * Opt-in: render numeric values in the first column as colored tags
-     * (green when >= 0, red when < 0). Off by default — this replaces the
-     * implicit column-0 behavior of the original mf-boveda DataTable, which
-     * was surprising. Explicitly enable it per table when desired.
+     * Si true, el encabezado se vuelve un boton que ordena la PAGINA VISIBLE por esta
+     * columna (client-side, sobre las filas ya cargadas). Es un orden POR PAGINA, no
+     * global -- la aria-label lo declara explicitamente para no confundir con el orden
+     * global por fecha (que va por URL, filtros por URL). Requiere
+     * `valorOrden` para saber por que valor comparar.
      */
-    firstColumnNumericTag?: boolean;
-}
-declare function DataTable<T extends object = Record<string, unknown>>({ heading, extra, loading, labels, paginationLabels, firstColumnNumericTag, columns, dataSource, scroll, bordered, pagination, className, ...rest }: DataTableProps<T>): react.JSX.Element;
-
-type TriggerRenderer = (open: () => void) => ReactNode;
-interface ModalDialogProps extends Omit<ModalProps, 'open' | 'children'> {
-    /** Controlled open state. */
-    open?: boolean;
-    /** Initial open state in uncontrolled mode. */
-    defaultOpen?: boolean;
-    /** Node or render-prop that opens the modal when clicked. */
-    trigger?: ReactNode | TriggerRenderer;
-    /** Close automatically after `onOk` resolves. Default true. */
-    closeOnOk?: boolean;
-    /** Close automatically after `onCancel`. Default true. */
-    closeOnCancel?: boolean;
-    /** Notified whenever the open state changes (controlled or not). */
-    onOpenChange?: (next: boolean) => void;
-    children?: ReactNode;
-}
+    ordenable?: boolean;
+    /** Valor por el que ordenar cuando `ordenable`. String -> orden alfabetico
+     * (localeCompare); number -> orden numerico. Ausente/undefined -> al final. */
+    valorOrden?: (fila: T) => string | number | undefined;
+    /** Etiqueta legible para la aria-label del boton de orden (ej. "Monto"). Si se
+     * omite y `encabezado` es un string, se usa ese; si no, "esta columna". */
+    etiquetaOrden?: string;
+};
 /**
- * AMS ModalDialog — a controllable modal composite.
+ * Tabla con columnas REORDENABLES (arrastrar el encabezado), REDIMENSIONABLES (arrastrar
+ * el borde derecho del encabezado) y con menu de mostrar/ocultar columnas. Las
+ * preferencias persisten en localStorage por `clavePrefs` (ver preferenciasTabla.ts).
+ * Lineamiento del sistema: cualquier tabla puede usar este componente.
  *
- * Ports mf-boveda's ReusableModal API:
- *  - controlled (`open`) or uncontrolled (`defaultOpen`) state,
- *  - a `trigger` node or render-prop that opens it,
- *  - `closeOnOk` / `closeOnCancel` with async `onOk` support (waits for the
- *    returned promise before closing).
+ * Drag & drop nativo (HTML5 draggable) y resize con eventos de mouse -- sin dependencias
+ * externas. Accesible: el asa de arrastre tiene aria-label; el menu de columnas es de
+ * checkboxes.
  *
- * All other antd Modal props pass through.
+ * Change `tablas-columnas-fijas`: se pinta dentro de `MarcoTabla` (desplazamiento acotado, encabezado fijo, densidad).
+ * `columnaFija` (casilla) e `idsFijos` (identidad: codigo, nombre...) quedan fijas a la izquierda y no se pueden
+ * arrastrar ni ocultar; `columnaAcciones` queda fija a la derecha.
  */
-declare function ModalDialog({ trigger, children, open, defaultOpen, closeOnOk, closeOnCancel, onOk, onCancel, onOpenChange, ...modalProps }: ModalDialogProps): react.JSX.Element;
+declare function TablaConfigurable<T>({ columnas, filas, claveFila, clavePrefs, columnaFija, columnaAcciones, idsFijos, etiqueta, mensajeVacio, ajuste, pie, barraExtra, }: {
+    columnas: ColumnaConfig<T>[];
+    filas: T[];
+    claveFila: (fila: T) => string;
+    clavePrefs: string;
+    /** Contenido opcional de una primera columna FIJA no reordenable (ej. checkbox). */
+    columnaFija?: {
+        encabezado?: ReactNode;
+        celda: (fila: T) => ReactNode;
+    };
+    /** Contenido opcional de una ultima columna FIJA no reordenable (ej. acciones). */
+    columnaAcciones?: {
+        encabezado?: ReactNode;
+        celda: (fila: T) => ReactNode;
+    };
+    /** Ids de columnas de identidad fijas a la izquierda (en este orden), despues de `columnaFija`. */
+    idsFijos?: string[];
+    /** Nombre accesible de la region desplazable. */
+    etiqueta?: string;
+    mensajeVacio?: ReactNode;
+    /** Ajuste del marco: `pagina` en pantallas de listado (`PaginaListado`), `acotado` (default) en el resto. */
+    ajuste?: AjusteMarco;
+    /** Pie del marco (paginador), siempre visible bajo la tabla. */
+    pie?: ReactNode;
+    /** Controles de la pantalla que van en la misma barra de la tabla (p. ej. el indicador en vivo): ahorra una fila. */
+    barraExtra?: ReactNode;
+}): react.JSX.Element;
 
-interface FilterOption {
-    value: string;
-    label: ReactNode;
-    disabled?: boolean;
-}
-interface FilterSelectProps extends Omit<SelectProps<string>, 'options' | 'filterOption'> {
-    options: FilterOption[];
-    /** Enable client-side search with accent-insensitive matching. */
-    showSearch?: boolean;
-    /** Override the default accent-insensitive filter. */
-    filterOption?: SelectProps<string>['filterOption'];
-}
-/**
- * AMS FilterSelect — a Select preset for dashboard filters.
- *
- * Ports mf-boveda's FilterSelect: accent-insensitive search over both the
- * option label and value, full-width by default. i18n is the consumer's
- * responsibility (pass already-translated labels).
- */
-declare function FilterSelect({ options, showSearch, filterOption, className, style, ...rest }: FilterSelectProps): react.JSX.Element;
-
-type UploadMessage = string | ((fileName: string) => string);
-type UploadChangeInfo = Parameters<NonNullable<UploadProps['onChange']>>[0];
-interface FileUploadDraggerProps extends Omit<UploadProps, 'onChange'> {
-    /** Success toast text or a builder receiving the file name. */
-    successMessage?: UploadMessage;
-    /** Error toast text or a builder receiving the file name. */
-    errorMessage?: UploadMessage;
-    /** Show success/error toasts on upload status changes. Default true. */
-    showStatusMessages?: boolean;
-    /** Prompt text shown inside the drop area (when no children given). */
-    hintText?: ReactNode;
-    onUploadSuccess?: (info: UploadChangeInfo) => void;
-    onUploadError?: (info: UploadChangeInfo) => void;
-    onChange?: UploadProps['onChange'];
-    children?: ReactNode;
-}
-/**
- * AMS FileUploadDragger — drag-and-drop uploader.
- *
- * Ports mf-boveda's FileUploadDragger with two DS improvements:
- *  - toasts use the context-safe `useAmsMessage()` (no antd v5 static warning),
- *  - all copy is passed via props (i18n stays in the consumer); no default
- *    upload endpoint is baked in.
- */
-declare function FileUploadDragger({ successMessage, errorMessage, showStatusMessages, hintText, onUploadSuccess, onUploadError, onChange: externalOnChange, children, ...uploadProps }: FileUploadDraggerProps): react.JSX.Element;
-
-interface BreadcrumbItem {
-    title: ReactNode;
-    href?: string;
-}
-interface PageHeaderProps {
-    /** Page title. Rendered as an h1. */
-    title: ReactNode;
-    /** Breadcrumb trail. When omitted, no breadcrumb is shown. */
-    breadcrumbs?: BreadcrumbItem[];
-    /** Breadcrumb separator. Defaults to ">". */
-    separator?: ReactNode;
-    /** Uppercase the title (matches the b2bmx convention). Default true. */
-    uppercaseTitle?: boolean;
-    /** Content aligned to the right of the title (actions). */
-    extra?: ReactNode;
-    className?: string;
-}
 /**
- * AMS PageHeader — page title with an optional breadcrumb.
- *
- * Consolidates mf-boveda's Header + Breadcrums. Decoupled from react-router
- * and the boveda domain: the consumer builds the breadcrumb items (already
- * translated) and passes them in.
+ * Campos de filtro compartidos por todos los buscadores: mismo aspecto, mismas etiquetas con icono y `label` asociado. Son
+ * NO controlados (`defaultValue`): el formulario lee los valores con `FormData` al enviar.
  */
-declare function PageHeader({ title, breadcrumbs, separator, uppercaseTitle, extra, className, }: PageHeaderProps): react.JSX.Element;
+/** Etiqueta de encabezado (icono + texto) para las columnas de la tabla configurable.
+ * Ya NO envuelve un <th> (eso lo pone TablaConfigurable): es solo el contenido. */
+declare function EtiquetaCol({ icono: Icono, texto, info, }: {
+    icono?: LucideIconType;
+    texto: string;
+    /** Explicacion en sitio del encabezado (catalogo `lib/explicaciones.ts`). */
+    info?: ExplicacionId;
+}): react.JSX.Element;
+declare function Campo({ id, name, etiqueta, defaultValue, tipo, icono: Icono, }: {
+    id: string;
+    name: string;
+    etiqueta: string;
+    defaultValue: string;
+    tipo?: string;
+    icono?: LucideIconType;
+}): react.JSX.Element;
+declare function CampoSelect({ id, name, etiqueta, defaultValue, opciones, icono: Icono, }: {
+    id: string;
+    name: string;
+    etiqueta: string;
+    defaultValue: string;
+    opciones: {
+        valor: string;
+        etiqueta: string;
+    }[];
+    icono?: LucideIconType;
+}): react.JSX.Element;
+
+declare function IconoConEtiqueta({ Icono, texto, info }: {
+    Icono: LucideIconType;
+    texto: ReactNode;
+    info?: ExplicacionId;
+}): react.JSX.Element;
+declare function MetricaKpi({ etiqueta, valor, icono: Icono, destacada, sub, progreso, info, }: {
+    etiqueta: string;
+    valor: string | number;
+    icono: LucideIconType;
+    info: ExplicacionId;
+    destacada?: boolean;
+    sub?: string;
+    progreso?: {
+        porcentaje: number;
+        etiqueta: string;
+    };
+}): react.JSX.Element;
+/** Subtitulo de un grupo de metricas, para que las cajitas se lean agrupadas por concepto en vez de un mar plano. */
+declare function GrupoMetricas({ titulo, icono: Icono, children }: {
+    titulo: string;
+    icono: LucideIconType;
+    children: ReactNode;
+}): react.JSX.Element;
+/** Rejilla de KPI de la plataforma (extraida de `riesgo-credito/piezas.tsx`): 1 col movil, 2 `sm`, 4 `lg`. */
+declare function RejillaMetricas({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+/** Rotulo de un bloque o grafica con su (i) (extraido de `riesgo-credito/piezas.tsx`). */
+declare function Rotulo({ texto, info }: {
+    texto: string;
+    info: ExplicacionId;
+}): react.JSX.Element;
 
-interface DownloadButtonProps extends ButtonProps {
-    /** Button label. Defaults to "CSV". */
-    label?: React.ReactNode;
-}
 /**
- * AMS DownloadButton — a Button preset for download actions.
- *
- * Ports mf-boveda's DownloadButton: primary type + download icon + label,
- * with the full Button API available. i18n via the `label`/`children` props.
+ * Atributos de celda del marco de tablas (change `tablas-columnas-fijas`). SIN "use client": las paginas Server
+ * Component llaman `fija()` / `col()` y pintan `CeldaIdentidad` al armar su `<table>` (una funcion exportada desde un
+ * modulo cliente no se puede llamar en el servidor). El comportamiento vive en `MarcoTabla.tsx` y `app/globals.css`.
  */
-declare const DownloadButton: react.ForwardRefExoticComponent<DownloadButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
-
-interface ConfirmModalProps extends Omit<ModalDialogProps, 'children'> {
-    /** Body message shown to the user. */
-    message?: ReactNode;
-    /** Mark the confirm action as destructive (red primary button). */
-    danger?: boolean;
-    children?: ReactNode;
-}
+type AtributosFija = {
+    "data-fija": "izq" | "der";
+    "data-fija-idx"?: number;
+    "data-fija-primaria"?: "";
+};
 /**
- * AMS ConfirmModal — a confirm/cancel dialog preset built on `ModalDialog`.
- *
- * Generalizes the mf-boveda cancel/confirm modals (CancelCfdiModal, etc.):
- * inherits controlled/uncontrolled state, trigger, and async `onOk` from
- * ModalDialog. Set `danger` for destructive actions. Copy via props (i18n).
+ * Marca una celda (`th` o `td`) como fija. `izq` lleva el indice de la columna fija (0, 1, 2, 3, en orden de izquierda a
+ * derecha); la 0 es la columna primaria salvo `{ primaria: true }` en otra (p. ej. cuando la 0 es una casilla). La
+ * primaria es la unica que sigue fija en pantallas angostas. Se aplica igual en el encabezado y en cada fila.
  */
-declare function ConfirmModal({ message, danger, okButtonProps, children, ...rest }: ConfirmModalProps): react.JSX.Element;
+declare function fija(lado: "izq" | "der", idx?: number, opciones?: {
+    primaria?: boolean;
+}): AtributosFija;
+/** Marca una celda como parte de la columna ocultable `id` (el mismo id que se declara en `columnas`). */
+declare function col(id: string): {
+    "data-col": string;
+};
+/** Texto de identidad largo (razon social): una linea con elipsis y el texto completo como tooltip. */
+declare function CeldaIdentidad({ texto, className }: {
+    texto: string | null | undefined;
+    className?: string;
+}): react.JSX.Element;
+/**
+ * Estilo unico de una accion de fila con icono + texto corto (enlace o boton), en linea o dentro del menu "⋯" de
+ * `AccionesFila` (change `avance-rfc-acciones-compactas`; antes vivia solo en Analitica).
+ */
+declare const CLASE_ACCION_FILA = "inline-flex items-center gap-1 whitespace-nowrap rounded-md border border-[var(--tema-borde)] px-2.5 py-1 text-xs hover:bg-[var(--tema-badge-neutro)] disabled:opacity-50";
 
-interface UseControllableStateOptions<T> {
-    /** Controlled value. When defined, the hook is in controlled mode. */
-    value?: T;
-    /** Initial value for uncontrolled mode. */
-    defaultValue: T;
-    /** Called on every change (both modes). */
-    onChange?: (next: T) => void;
-}
 /**
- * Supports the controlled/uncontrolled pattern used across the design system
- * (mirrors mf-boveda's ReusableModal state handling). When `value` is provided
- * the component is controlled; otherwise internal state is used.
+ * Celda compacta de acciones por fila (change `tablas-columnas-fijas`). Hasta 2 acciones se pintan en linea (botones de
+ * icono con `title`/`aria-label`, o enlaces cortos); con mas de 2, un solo boton "..." abre un menu. El menu es
+ * `position: fixed` y vive en un portal en `body` (calculado del boton) para no quedar recortado por el marco desplazable ni
+ * debajo de otras celdas fijas. Escape, clic fuera o elegir una accion lo cierran; si la accion abre un dialogo
+ * (`aria-modal`), el menu sigue montado hasta que el dialogo se cierra (desmontarlo cerraria el dialogo). Va dentro de la
+ * celda fija derecha (`fija("der")`).
  */
-declare function useControllableState<T>({ value, defaultValue, onChange, }: UseControllableStateOptions<T>): [T, (next: T) => void];
+declare function AccionesFila({ etiqueta, children, }: {
+    etiqueta?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * Accion de fila con icono + texto corto y, opcional, su (i) al lado (change `avance-rfc-acciones-compactas`). Sirve en
+ * linea y dentro del menu "⋯" de `AccionesFila` con el mismo aspecto (`CLASE_ACCION_FILA`). `disabled` mientras la
+ * accion corre; el spinner y el resultado los pinta la fila, porque el menu se cierra al elegir.
+ */
+declare function BotonAccionFila({ icono: Icono, etiqueta, ariaLabel, onClick, disabled, info, }: {
+    icono: LucideIconType;
+    etiqueta: string;
+    ariaLabel?: string;
+    onClick: () => void;
+    disabled?: boolean;
+    info?: Parameters<typeof InfoExplicacion>[0]["id"];
+}): react.JSX.Element;
 
-export { AmsConfigProvider, type AmsConfigProviderProps, type BreadcrumbItem, Button, type ButtonProps, Card, ConfirmModal, type ConfirmModalProps, DataTable, type DataTableLabels, type DataTableProps, DownloadButton, type DownloadButtonProps, FileUploadDragger, type FileUploadDraggerProps, type FilterOption, FilterSelect, type FilterSelectProps, type IconComponent, ModalDialog, type ModalDialogProps, PageHeader, type PageHeaderProps, Pagination, type PaginationLabels, type PaginationProps, Tag, type TagIntent, type TagProps, type ThemeMode, type ThemeModeContextValue, ThemeToggle, type ThemeToggleProps, type UseControllableStateOptions, amsTheme, amsThemeDark, applyThemeModeToDOM, buildTheme, getInitialThemeMode, primitives, radius, semantic, sizing, typography, useAmsMessage, useAmsNotification, useControllableState, useThemeMode };
+export { AccionConDialogo, AccionesFila, type AjusteMarco, Aviso, type AvisoAccion, AvisoAccionEstado, BarraListado, BarraProgreso, BotonAccionAviso, BotonAccionFila, CLASE_ACCION_FILA, CLASE_AYUDA_CAMPO, CLASE_BOTON_CONTORNO, CLASE_BOTON_ICONO, CLASE_BOTON_PELIGRO, CLASE_BOTON_PEQUENO, CLASE_BOTON_PRIMARIO, CLASE_BOTON_PRIMARIO_COMPACTO, CLASE_BOTON_SECUNDARIO, CLASE_CAMPO, CLASE_CAMPO_COMPACTO, CLASE_ERROR_CAMPO, CLASE_ETIQUETA_CAMPO, CLASE_EXITO_CAMPO, CLASE_REGION_LISTADO, CLASE_TARJETA, CLASE_TEXTO_ATENUADO, CLASE_TITULO_PAGINA, CLASE_TITULO_SECCION, type CambiosListado, Campo, CampoSelect, type CapacidadAcceso, CascaronApp, CeldaIdentidad, type ColumnaConfig, type ColumnaOcultable, type DefListado, type Direccion, ETIQUETAS_SEMAFORO, EXPLICACIONES, EncabezadoOrdenUrl, EnlaceNav, type EntradaPosicion, type EstadoListado, EstadoVacio, EstadoVacioFila, EtiquetaCol, type Explicacion, type ExplicacionId, FechaHoraLocal, type FiltroListado, GrupoMetricas, type GrupoNavegacion, ICONOS_ESTATUS, ICONOS_SEMAFORO, ICONO_ACCIONES_FILA, ICONO_ALTA, ICONO_API_KEY, ICONO_ARRASTRAR_COLUMNA, ICONO_AVISO, ICONO_BAJA, ICONO_BUSCAR, ICONO_CAMPANA, ICONO_CARGANDO, ICONO_CERRAR, ICONO_CERRAR_SESION, ICONO_COLUMNAS, ICONO_COLUMNA_OCULTA, ICONO_COLUMNA_VISIBLE, ICONO_COL_CODIGO, ICONO_COL_DOCUMENTO, ICONO_COL_ESTADO, ICONO_COL_ETIQUETA, ICONO_COL_FECHA, ICONO_COL_FECHA_HORA, ICONO_COL_MECANISMO, ICONO_COL_NOMBRE, ICONO_COL_TOTAL, ICONO_COL_USUARIO, ICONO_CONFIRMAR, ICONO_COPIAR, ICONO_DEFAULT, ICONO_DENSIDAD_COMODA, ICONO_DENSIDAD_COMPACTA, ICONO_DESCARGAR, ICONO_DESHABILITAR, ICONO_DURACION, ICONO_EDITAR, ICONO_EMAIL, ICONO_ERROR, ICONO_EXPORTAR, ICONO_EXPORTAR_CSV, ICONO_FILTRO, ICONO_GENERAR, ICONO_GUARDAR, ICONO_INACTIVAR, ICONO_INFO_EXPLICACION, ICONO_INICIAR_SESION, ICONO_INVITACION_GENERICA, ICONO_KPI_ALERTA, ICONO_KPI_BLOQUEO, ICONO_KPI_CONSUMO, ICONO_KPI_CONTEO, ICONO_KPI_CREDENCIALES, ICONO_KPI_RENDIMIENTO, ICONO_KPI_RITMO, ICONO_LIMPIAR, ICONO_LINK, ICONO_LOGIN_MICROSOFT, ICONO_NAV_ACCESOS, ICONO_NAV_ANALITICA, ICONO_NAV_API_KEYS, ICONO_NAV_BITACORA, ICONO_NAV_CLIENTE, ICONO_NAV_COLAPSAR, ICONO_NAV_CONFIGURACION, ICONO_NAV_DASHBOARD, ICONO_NAV_ENTIDADES, ICONO_NAV_ETIQUETAS, ICONO_NAV_EXPANDIR, ICONO_NAV_EXTRACCIONES, ICONO_NAV_INVITACIONES, ICONO_NAV_JOBS, ICONO_NAV_MANUAL, ICONO_NAV_MENU_MOVIL, ICONO_NAV_NOTIFICACIONES, ICONO_NAV_PAQUETES, ICONO_NAV_PLANES, ICONO_NAV_SALUD, ICONO_NAV_TEMA, ICONO_NAV_USUARIOS, ICONO_OK, ICONO_ORDENAR_ASC, ICONO_ORDENAR_DESC, ICONO_ORDENAR_NEUTRO, ICONO_PAGINA_ANTERIOR, ICONO_PAGINA_SIGUIENTE, ICONO_PERIODO, ICONO_REACTIVAR, ICONO_REACTIVAR_ETIQUETA, ICONO_REINTENTAR, ICONO_RESTABLECER, ICONO_REVOCAR_KEY, ICONO_ROTAR_KEY, ICONO_SEGURIDAD, ICONO_SELECCIONADO, ICONO_SILENCIAR, ICONO_UBICACION, ICONO_VER_TODOS, ICONO_VIGENCIA, ICONO_VISTA_TABLA, ICONO_VISTA_TARJETAS, ICONO_VOLVER, IconoConEtiqueta, InfoExplicacion, Insignia, LinkBase, type LinkBaseProps, type LinkComponent, LinkComponentProvider, type ListadoNav, ListadoNavProvider, type LucideIconType, MarcoTabla, Metrica, MetricaKpi, Migas, ModalPanel, NOMBRE_PRODUCTO_DEFAULT, NO_DISPONIBLE, NoDisponible, type OpcionesListado, OverlayCargando, PaginaContenido, PaginaListado, PaginadorLocal, PaginadorUrl, PantallaAcceso, PantallaCargando, type ParamsUrl, Pestanas, PopoverHover, type PosicionPopover, type RectLike, RejillaMetricas, Rotulo, SeccionNav, SidebarColapsable, SpinnerMarca, SubNav, TAMANOS_LISTADO, TAMANO_BADGE, TAMANO_BOTON, TAMANO_LISTADO_DEFAULT, TEMA_DEFAULT, TablaConfigurable, TablaPlana, Tarjeta, type Tema, ThInfo, type Tono, UsuarioTablas, aplicarListado, calcularPosicionPopover, col, etiquetaSemaforo, explicacionDe, fija, formatearBytes, formatearFechaHora, formatearFechaHoraCDMX, formatearRangoFechaHora, formatoDias, formatoEntero, formatoFecha, formatoMes, formatoMxn, formatoNumero, formatoPct, hrefListado, iconoDeEstatus, iconoDeSemaforo, leerListado, normalizarTexto, useAccionAviso, useAccionConSpinner, useNavegarListado, usePaginacionLocal, useTablaPreferencias, variablesDeTema, verificarCatalogo };