diff --git a/docs/guidelines/architecture.md b/docs/guidelines/architecture.md
index 3d109e6..1f33565 100644
--- a/docs/guidelines/architecture.md
+++ b/docs/guidelines/architecture.md
@@ -230,24 +230,26 @@ interface PaginationParams {
 
 **Componentes compartidos:**
 
-| Componente                     | Props                                                      | Descripción                                                                                                                                                                                                                                                                                                                     |
-| ------------------------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `LoadingSpinner`               | `fullScreen?: boolean`                                     | CircularProgress centrado. `fullScreen`: 100vh × 100%                                                                                                                                                                                                                                                                           |
-| `ErrorBoundary`                | `children`                                                 | Class component que captura errores de render y muestra `ErrorFallback`. Cableado en `AppLayout` alrededor del `<Outlet>` y en cada ruta `bare`                                                                                                                                                                                 |
-| `ErrorFallback`                | `error?: Error`, `onRetry?: () => void`                    | Pantalla de error con botón Reintentar (presentacional)                                                                                                                                                                                                                                                                         |
-| `PageWrapper`                  | `children`, `...BoxProps`                                  | `<main>` con `p: {xs:2, md:3}`, `maxWidth: 1200`, `mx: auto`                                                                                                                                                                                                                                                                    |
-| `NotificationHost`             | —                                                          | Render único de las notificaciones del `notificationStore`. Montado en los providers; una a la vez. Usa `Snackbar` + `Alert` de MUI hasta que TESIS-68 defina el Toast del DS                                                                                                                                                   |
-| `StatCard` / `CompactStatCard` | Ver `StatCard.types.ts`                                    | Tarjeta de KPI: ícono + chip de tendencia o etiqueta, valor destacado, aclaración opcional (`note`) y footer comparativo. `tone: 'error'` suma borde y halo de acento. `loading` reemplaza el valor por un skeleton de la misma altura. La variante condensada es una sola fila. Presentacionales: el valor llega ya formateado |
-| `ProgressIndicator`            | Ver `ProgressIndicator.types.ts`                           | Barra lineal con tono semántico. `size` thin/medium/large, `layout` stacked/inline, `indeterminate` para progreso desconocido. El ancho sale del porcentaje                                                                                                                                                                     |
-| `StepsProgress`                | `total`, `completed`, `tone?`, `label?`, `caption?`        | Progreso por etapas discretas, para procesos con pasos nombrados                                                                                                                                                                                                                                                                |
-| `ProgressSkeleton`             | `label?`, `avatar?`, `lines?`                              | Placeholder de carga con la silueta del contenido que reemplaza                                                                                                                                                                                                                                                                 |
-| `TopNavBar`                    | Ver `TopNavBar.types.ts`                                   | Shell de navegación global (brand + búsqueda + acciones + usuario). Presentacional — sin datos, sin `uiStore`; único acople: el `Link` de Router (brand/engranaje). Fixed/z-index intrínsecos vía `MuiAppBar` en el tema. Cableado real en `app/layout/Header.tsx`.                                                             |
-| `StatusFeed`                   | Ver `StatusFeed.types.ts`                                  | Bitácora de eventos de alta densidad: barra fina como eje temporal, título y metadato en monoespaciada. `current` marca la entrada vigente; el resto se atenúa. Renderiza `<ol>` porque el orden es información                                                                                                                 |
-| `Logo`                         | `brand`, `tagline`                                         | Lockup de marca (isotipo + wordmark). Las reglas del manual viajan con el componente: área de respeto como padding propio y mínimo de 140px como `minWidth`                                                                                                                                                                     |
-| `LogoMark`                     | `size?: number`                                            | Isotipo suelto, inline y con `currentColor` para que herede el color del contenedor                                                                                                                                                                                                                                             |
-| `DataTable`                    | Ver `DataTable.types.ts`                                   | Tabla genérica del DS: pestañas, selección, acciones por fila, paginación, `title` y `footer`. `density: 'compact'` baja la fila a 52px para las tablas que viven dentro de un formulario (líneas del alta manual). Presentacional: el formato de cada celda lo resuelve el `render` de su columna                              |
-| `LabeledField`                 | `label`, `children`, `error?`, `helperText?`, `fullWidth?` | Campo con el rótulo arriba del input, como pide el DS (MUI lo flota en el borde). Renderiza `<label>` envolviendo al input, así los asocia sin `id`. Nació en los modales de producto y subió a `shared/` con el alta manual de órdenes (Regla de Dos)                                                                          |
-| `StackedCell`                  | `primary`, `secondary?`                                    | Celda de dos líneas: el dato arriba y su contexto abajo, atenuado. Nació en el listado de órdenes y subió con la tabla de anomalías de Reportes (Regla de Dos). Sin `secondary` colapsa a una línea y la fila no cambia de alto                                                                                                 |
+| Componente                     | Props                                                      | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------------------------------ | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `LoadingSpinner`               | `fullScreen?: boolean`                                     | CircularProgress centrado. `fullScreen`: 100vh × 100%                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `ErrorBoundary`                | `children`                                                 | Class component que captura errores de render y muestra `ErrorFallback`. Cableado en `AppLayout` alrededor del `<Outlet>` y en cada ruta `bare`                                                                                                                                                                                                                                                                                                                                         |
+| `ErrorFallback`                | `error?: Error`, `onRetry?: () => void`                    | Pantalla de error con botón Reintentar (presentacional)                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `PageWrapper`                  | `children`, `...BoxProps`                                  | `<main>` con `p: {xs:2, md:3}`, `maxWidth: 1200`, `mx: auto`                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `NotificationHost`             | —                                                          | Render único de las notificaciones del `notificationStore`. Montado en los providers; una a la vez. Cada una es un toast: el aviso del sistema del tema (`Alert`, ver `app/theme/components/alert.ts`) flotando, con fondo opaco y sombra de nivel 2. Ninguna pantalla monta un `Snackbar` propio: todo aviso pasa por `notify()`                                                                                                                                                       |
+| `StatCard` / `CompactStatCard` | Ver `StatCard.types.ts`                                    | Tarjeta de KPI: ícono + chip de tendencia o etiqueta, valor destacado, aclaración opcional (`note`) y footer comparativo. `tone: 'error'` suma borde y halo de acento. `loading` reemplaza el valor por un skeleton de la misma altura. La variante condensada es una sola fila. Presentacionales: el valor llega ya formateado                                                                                                                                                         |
+| `ProgressIndicator`            | Ver `ProgressIndicator.types.ts`                           | Barra lineal con tono semántico. `size` thin/medium/large, `layout` stacked/inline, `indeterminate` para progreso desconocido. El ancho sale del porcentaje                                                                                                                                                                                                                                                                                                                             |
+| `StepsProgress`                | `total`, `completed`, `tone?`, `label?`, `caption?`        | Progreso por etapas discretas, para procesos con pasos nombrados                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `ProgressSkeleton`             | `label?`, `avatar?`, `lines?`                              | Placeholder de carga con la silueta del contenido que reemplaza                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `TopNavBar`                    | Ver `TopNavBar.types.ts`                                   | Shell de navegación global (brand + búsqueda + acciones + usuario). Presentacional — sin datos, sin `uiStore`; único acople: el `Link` de Router (brand/engranaje). Fixed/z-index intrínsecos vía `MuiAppBar` en el tema. Cableado real en `app/layout/Header.tsx`.                                                                                                                                                                                                                     |
+| `StatusFeed`                   | Ver `StatusFeed.types.ts`                                  | Bitácora de eventos de alta densidad: barra fina como eje temporal, título y metadato en monoespaciada. `current` marca la entrada vigente; el resto se atenúa. Renderiza `<ol>` porque el orden es información                                                                                                                                                                                                                                                                         |
+| `Logo`                         | `brand`, `tagline`                                         | Lockup de marca (isotipo + wordmark). Las reglas del manual viajan con el componente: área de respeto como padding propio y mínimo de 140px como `minWidth`                                                                                                                                                                                                                                                                                                                             |
+| `LogoMark`                     | `size?: number`                                            | Isotipo suelto, inline y con `currentColor` para que herede el color del contenedor                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `DataTable`                    | Ver `DataTable.types.ts`                                   | Tabla genérica del DS: pestañas, selección, acciones por fila, paginación, `title` y `footer`. `density: 'compact'` baja la fila a 52px para las tablas que viven dentro de un formulario (líneas del alta manual). Presentacional: el formato de cada celda lo resuelve el `render` de su columna                                                                                                                                                                                      |
+| `LabeledField`                 | `label`, `children`, `error?`, `helperText?`, `fullWidth?` | Campo con el rótulo arriba del input, como pide el DS (MUI lo flota en el borde). Renderiza `<label>` envolviendo al input, así los asocia sin `id`. Nació en los modales de producto y subió a `shared/` con el alta manual de órdenes (Regla de Dos)                                                                                                                                                                                                                                  |
+| `StackedCell`                  | `primary`, `secondary?`                                    | Celda de dos líneas: el dato arriba y su contexto abajo, atenuado. Nació en el listado de órdenes y subió con la tabla de anomalías de Reportes (Regla de Dos). Sin `secondary` colapsa a una línea y la fila no cambia de alto                                                                                                                                                                                                                                                         |
+| `ModalFrame`                   | Ver `ModalFrame.types.ts`                                  | Marco de todos los modales (ModalFrame del diseño): cabecera con título, subtítulo, ícono y cierre; debajo, `ModalBody` + `ModalFooter` (o un `ModalForm` que los envuelva, para los formularios). `size` sm 480 · md 672 · lg 880. Resuelve una vez lo que ningún modal debería repetir: sólo scrollea el cuerpo, el título va al `aria-labelledby` y con `busy` no se cierra por ningún lado. Nació en los modales de producto y subió a `shared/` con `ConfirmDialog` (Regla de Dos) |
+| `ConfirmDialog`                | Ver `ConfirmDialog.types.ts`                               | Confirmación antes de una acción, sobre `ModalFrame` (`sm` por defecto). `tone: 'destructive'` suma la advertencia roja, pinta la confirmación en rojo y arranca con el foco en Cancelar. `canConfirm={false}` deja sólo la salida, para cuando el backend ya rechazó la acción; `children` lleva el motivo. Presentacional: quien lo monta ejecuta la acción                                                                                                                           |
 
 **Stores globales** (`shared/store/`):
 
@@ -352,14 +354,13 @@ features/[nombre]/
 
 **`inventory` — piezas y por qué:**
 
-| Archivo                          | Rol                                                                                                                                                                                                                                                                                                              |
-| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `components/ProductModalShell/`  | Cáscara compartida por los dos modales de producto: raíz, formulario, header, body y footer. Se extrajo al aparecer el **segundo** consumidor, no antes — `feature-structure.md` §6. El campo con rótulo (`LabeledField`) siguió el mismo camino hasta `shared/components` cuando lo necesitó el alta de órdenes |
-| `components/EditProductModal/`   | Modal de edición: datos básicos, medidas y asignación de stock. **Presentacional** — recibe `product` y `warehouses` ya resueltos y devuelve en `onSubmit` el cuerpo de `PUT /api/v1/products/:id`. Quien lo monta decide de dónde salen los datos                                                               |
-| `components/CreateProductModal/` | Modal de alta, mismo contrato: devuelve el cuerpo de `POST /api/v1/products`. Valida depósitos repetidos en el schema y resalta el campo `sku` cuando la API rechaza el alta por SKU duplicado                                                                                                                   |
-| `api.ts`                         | Frontera con Rails y único lugar que conoce el `snake_case`. También documenta que el index envuelve en `{ data, meta }` y usa `ProductListSerializer` (sin `stocks`), mientras `show`/`update` devuelven el objeto pelado                                                                                       |
-| `utils/dimensions.ts`            | `products.dimensions` es un único `string` en la API y el diseño lo edita en tres ejes. Define el formato canónico (`"45x30x30"`, cm) y es el único lugar que lo conoce                                                                                                                                          |
-| `utils/payload.ts`               | Traduce el formulario al cuerpo de la API. Funciones puras, aparte del componente, porque concentran las reglas no obvias (ver abajo) y así se pueden verificar solas                                                                                                                                            |
+| Archivo                          | Rol                                                                                                                                                                                                                                                |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `components/EditProductModal/`   | Modal de edición: datos básicos, medidas y asignación de stock. **Presentacional** — recibe `product` y `warehouses` ya resueltos y devuelve en `onSubmit` el cuerpo de `PUT /api/v1/products/:id`. Quien lo monta decide de dónde salen los datos |
+| `components/CreateProductModal/` | Modal de alta, mismo contrato: devuelve el cuerpo de `POST /api/v1/products`. Valida depósitos repetidos en el schema y resalta el campo `sku` cuando la API rechaza el alta por SKU duplicado                                                     |
+| `api.ts`                         | Frontera con Rails y único lugar que conoce el `snake_case`. También documenta que el index envuelve en `{ data, meta }` y usa `ProductListSerializer` (sin `stocks`), mientras `show`/`update` devuelven el objeto pelado                         |
+| `utils/dimensions.ts`            | `products.dimensions` es un único `string` en la API y el diseño lo edita en tres ejes. Define el formato canónico (`"45x30x30"`, cm) y es el único lugar que lo conoce                                                                            |
+| `utils/payload.ts`               | Traduce el formulario al cuerpo de la API. Funciones puras, aparte del componente, porque concentran las reglas no obvias (ver abajo) y así se pueden verificar solas                                                                              |
 
 > El diálogo en sí se tematizó en `app/theme/components/dialog.ts` (`MuiDialog` en el nivel 3 de la escala de elevación + `MuiBackdrop` con scrim y blur), no dentro del modal: es un componente base de MUI y sus estilos van al tema — ver `component-structure.md` §3.1.
 
diff --git a/docs/guidelines/component-structure.md b/docs/guidelines/component-structure.md
index 793c190..1309177 100644
--- a/docs/guidelines/component-structure.md
+++ b/docs/guidelines/component-structure.md
@@ -66,6 +66,7 @@ app/theme/
 ├── augmentations.d.ts     # module augmentation de MUI (variantes, keys de paleta)
 ├── utils.ts               # helpers (rem)
 └── components/
+    ├── alert.ts           # muiAlert(): el aviso del sistema (Alert.dc.html)
     ├── button.ts          # muiButton(mode)
     ├── card.ts            # muiCard(mode)
     ├── input.ts           # muiOutlinedInput() / muiTextField()
diff --git a/src/app/theme/components/alert.ts b/src/app/theme/components/alert.ts
new file mode 100644
index 0000000..f71d8a5
--- /dev/null
+++ b/src/app/theme/components/alert.ts
@@ -0,0 +1,46 @@
+import type { Components, Theme } from '@mui/material/styles'
+
+import { radius } from '../tokens'
+
+// El aviso del sistema del diseño (Alert.dc.html): fondo tonal de la intención,
+// borde de su color base, ícono y texto en el tono `onContainer`, radio 8 y
+// 12 × 16 de relleno.
+//
+// Aplica a `standard` y `outlined`, que en la app se usaban indistintamente
+// para lo mismo: el diseño tiene un solo aviso, así que las dos variantes pintan
+// igual. `filled` queda como la trae MUI; nada la usa.
+export function muiAlert(): Components<Theme>['MuiAlert'] {
+  return {
+    // MUI rotula la X en inglés ("Close") y la app no carga su locale: sin esto,
+    // el lector de pantalla anuncia en inglés el cierre de cada toast.
+    defaultProps: { closeText: 'Cerrar' },
+    styleOverrides: {
+      root: ({ theme, ownerState }) => {
+        if (ownerState.variant === 'filled') return {}
+
+        // Mismo orden que MUI: `color` pisa a `severity`, y sin ninguno es `success`.
+        const color = theme.vars.palette[ownerState.color ?? ownerState.severity ?? 'success']
+
+        return {
+          ...theme.typography.bodyMd,
+          // 4 + los 8 que MUI ya le pone al mensaje = los 12 del diseño.
+          padding: theme.spacing(0.5, 2),
+          borderRadius: radius.base,
+          border: `1px solid ${color.main}`,
+          backgroundColor: color.container,
+          color: color.onContainer,
+          '& .MuiAlert-icon': { color: color.onContainer, opacity: 1 },
+          // Sólo la X va en gris, como en el diseño. La zona de acción también
+          // aloja botones como "Reintentar" (`color="inherit"`), y esos tienen
+          // que conservar el tono de la intención: son la salida del aviso.
+          '& .MuiAlert-action > .MuiIconButton-root': { color: theme.vars.palette.text.secondary },
+          // Con título, el título lleva el tono y el cuerpo baja a secundario.
+          '& .MuiAlertTitle-root': { fontWeight: 600, color: color.onContainer },
+          '&:has(.MuiAlertTitle-root) .MuiAlert-message': {
+            color: theme.vars.palette.text.secondary,
+          },
+        }
+      },
+    },
+  }
+}
diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts
index 60b02da..086bc1e 100644
--- a/src/app/theme/components/index.ts
+++ b/src/app/theme/components/index.ts
@@ -1,5 +1,6 @@
 import type { ThemeOptions } from '@mui/material/styles'
 
+import { muiAlert } from './alert'
 import { muiAppBar } from './appBar'
 import { muiButton } from './button'
 import { muiCard } from './card'
@@ -25,6 +26,7 @@ export function buildComponents(): ThemeOptions['components'] {
     MuiOutlinedInput: muiOutlinedInput(),
     MuiTextField: muiTextField(),
     MuiCard: muiCard(),
+    MuiAlert: muiAlert(),
     MuiDialog: muiDialog(),
     MuiBackdrop: muiBackdrop(),
     MuiTypography: muiTypography(),
diff --git a/src/features/design-system/content.ts b/src/features/design-system/content.ts
index 6959b3c..0f14f01 100644
--- a/src/features/design-system/content.ts
+++ b/src/features/design-system/content.ts
@@ -62,6 +62,15 @@ export const dsCopy = {
       title: 'Tabla de datos estándar',
       subtitle: 'Pestañas, selección, badges de estado, acciones por fila y paginación',
     },
+    alerts: {
+      title: 'Avisos del sistema y toasts',
+      subtitle:
+        'Alert — en línea dentro de la pantalla o flotando como toast, en sus cuatro intenciones',
+    },
+    confirm: {
+      title: 'Modal de confirmación',
+      subtitle: 'ModalFrame — estándar, destructiva y rechazada; tamaños sm · md · lg',
+    },
   },
   progressGroups: {
     load: 'Columna Load — canal neutro',
@@ -421,3 +430,54 @@ export const dataTableCopy = {
   page: (page: number) => `Ir a la página ${page}`,
   selectedCount: (count: number) => `${count} seleccionadas`,
 } as const
+
+// Las tres variantes del modal de confirmación. La "rechazada" es la destructiva
+// después de que el backend dijo que no: queda el motivo y sólo la salida.
+export const confirmDialogSamples = {
+  default: {
+    trigger: 'Estándar',
+    title: '¿Confirmar el despacho?',
+    description: 'Se va a emitir la etiqueta de la orden #ORD-7721-X con Andreani.',
+    confirm: 'Confirmar despacho',
+  },
+  destructive: {
+    trigger: 'Destructiva',
+    title: '¿Eliminar la orden?',
+    description: 'Se va a eliminar la orden #ORD-7721-X. Esta acción no se puede deshacer.',
+    confirm: 'Eliminar orden',
+  },
+  rejected: {
+    trigger: 'Rechazada',
+    title: '¿Eliminar la orden?',
+    description: 'Se va a eliminar la orden #ORD-7721-X. Esta acción no se puede deshacer.',
+    confirm: 'Eliminar orden',
+    error: 'No se puede eliminar: la orden ya fue despachada.',
+  },
+} as const
+
+export type ConfirmSampleKey = keyof typeof confirmDialogSamples
+
+export const confirmDialogCopy = {
+  cancel: 'Cancelar',
+  close: 'Cerrar',
+  sizeLabel: 'Tamaño del diálogo',
+} as const
+
+// Avisos del sistema (Alert.dc.html). Los mismos cuatro textos sirven en línea y
+// como toast: el componente es uno solo, lo que cambia es dónde se monta.
+export const alertSamples = [
+  { severity: 'success', label: 'Éxito', message: 'Orden #ORD-7721-X procesada.' },
+  { severity: 'info', label: 'Información', message: 'Envío pendiente de despacho en CD Ezeiza.' },
+  { severity: 'warning', label: 'Advertencia', message: 'Stock bajo en 3 productos del catálogo.' },
+  { severity: 'error', label: 'Error', message: 'Falló la sincronización con Tiendanube.' },
+] as const
+
+export const alertCopy = {
+  inline: 'En línea',
+  toast: 'Toast — se dispara el real, por notify()',
+  withTitle: {
+    title: 'La orden cambió mientras la editabas',
+    body: 'Revisá los cambios antes de guardar: guardar ahora pisa lo que cambió la otra persona.',
+  },
+  withAction: { message: 'No pudimos cargar el panel.', action: 'Reintentar' },
+} as const
diff --git a/src/features/design-system/pages/DesignSystemPage.tsx b/src/features/design-system/pages/DesignSystemPage.tsx
index 2c2e1c6..f063c47 100644
--- a/src/features/design-system/pages/DesignSystemPage.tsx
+++ b/src/features/design-system/pages/DesignSystemPage.tsx
@@ -18,6 +18,8 @@ import ViewColumnOutlinedIcon from '@mui/icons-material/ViewColumnOutlined'
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'
 import WarningAmberOutlinedIcon from '@mui/icons-material/WarningAmberOutlined'
 import {
+  Alert,
+  AlertTitle,
   Box,
   Button,
   Card,
@@ -25,6 +27,8 @@ import {
   IconButton,
   Stack,
   TextField,
+  ToggleButton,
+  ToggleButtonGroup,
   Typography,
   useTheme,
 } from '@mui/material'
@@ -32,6 +36,7 @@ import { useState } from 'react'
 import type { ReactElement, ReactNode } from 'react'
 import {
   CompactStatCard,
+  ConfirmDialog,
   DataTable,
   Logo,
   PageWrapper,
@@ -44,20 +49,26 @@ import {
   StepsProgress,
   TopNavBar,
   type DataTableColumn,
+  type ModalSize,
   type StatusVariant,
   type TopNavThemeMode,
 } from 'shared/components'
+import { notify } from 'shared/store'
 import { useThemeMode } from 'shared/store/uiStore'
 
 import { FulfillmentPanel } from '../components/FulfillmentPanel'
 import { OperationalStatusCard } from '../components/OperationalStatusCard'
 import {
+  alertCopy,
+  alertSamples,
   badgeSamples,
   badgeSizes,
   buttonHierarchies,
   buttonIntents,
   compactGroups,
   compactStatSamples,
+  confirmDialogCopy,
+  confirmDialogSamples,
   dataTableCopy,
   dataTableOrders,
   dataTableTabs,
@@ -78,7 +89,7 @@ import {
   topNavDemoUser,
   typeSpecs,
 } from '../content'
-import type { CompactSampleKey, DemoOrder, StatSampleKey } from '../content'
+import type { CompactSampleKey, ConfirmSampleKey, DemoOrder, StatSampleKey } from '../content'
 
 // Grillas del catálogo: colapsan a una columna en mobile para que las tarjetas
 // no se compriman.
@@ -279,6 +290,122 @@ function DataTableDemo() {
   )
 }
 
+// Los toasts de la vitrina son los reales: `notify()` escribe en el store y los
+// dibuja el `NotificationHost` de los providers, como en cualquier pantalla.
+function AlertsDemo() {
+  return (
+    <Stack spacing={3}>
+      <Stack spacing={1.5}>
+        <Typography variant="labelCaps" color="text.secondary">
+          {alertCopy.inline}
+        </Typography>
+        {alertSamples.map((sample) => (
+          <Alert key={sample.severity} severity={sample.severity} onClose={() => {}}>
+            {sample.message}
+          </Alert>
+        ))}
+        <Alert severity="warning">
+          <AlertTitle>{alertCopy.withTitle.title}</AlertTitle>
+          {alertCopy.withTitle.body}
+        </Alert>
+        <Alert
+          severity="error"
+          action={
+            <Button color="inherit" size="small">
+              {alertCopy.withAction.action}
+            </Button>
+          }
+        >
+          {alertCopy.withAction.message}
+        </Alert>
+      </Stack>
+      <Stack spacing={1.5}>
+        <Typography variant="labelCaps" color="text.secondary">
+          {alertCopy.toast}
+        </Typography>
+        <Stack direction="row" spacing={1.5} useFlexGap sx={{ flexWrap: 'wrap' }}>
+          {alertSamples.map((sample) => (
+            <Button
+              key={sample.severity}
+              variant="glass"
+              color={sample.severity}
+              onClick={() => notify(sample.message, sample.severity)}
+            >
+              {sample.label}
+            </Button>
+          ))}
+        </Stack>
+      </Stack>
+    </Stack>
+  )
+}
+
+const CONFIRM_SAMPLE_KEYS = Object.keys(confirmDialogSamples) as ConfirmSampleKey[]
+const CONFIRM_SIZES: ModalSize[] = ['sm', 'md', 'lg']
+
+// Inerte como el resto del catálogo: confirmar sólo cierra el diálogo.
+function ConfirmDialogDemo() {
+  // La muestra y el estado abierto van separados: al cerrar, el diálogo se
+  // desvanece con la muestra que tenía, en vez de saltar a otra a mitad del
+  // fundido.
+  const [sampleKey, setSampleKey] = useState<ConfirmSampleKey>('default')
+  const [open, setOpen] = useState(false)
+  const [size, setSize] = useState<ModalSize>('sm')
+  const sample = confirmDialogSamples[sampleKey]
+  const close = () => setOpen(false)
+
+  return (
+    <>
+      <Stack direction="row" spacing={1.5} useFlexGap sx={{ flexWrap: 'wrap' }}>
+        <ToggleButtonGroup
+          exclusive
+          value={size}
+          onChange={(_, next: ModalSize | null) => {
+            // Un toggle exclusivo devuelve `null` al reclickear el activo: se
+            // ignora para que siempre haya un tamaño elegido.
+            if (next !== null) setSize(next)
+          }}
+          aria-label={confirmDialogCopy.sizeLabel}
+        >
+          {CONFIRM_SIZES.map((option) => (
+            <ToggleButton key={option} value={option}>
+              {option}
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+        {CONFIRM_SAMPLE_KEYS.map((key) => (
+          <Button
+            key={key}
+            variant="outlined"
+            color={key === 'default' ? 'primary' : 'error'}
+            onClick={() => {
+              setSampleKey(key)
+              setOpen(true)
+            }}
+          >
+            {confirmDialogSamples[key].trigger}
+          </Button>
+        ))}
+      </Stack>
+      <ConfirmDialog
+        open={open}
+        tone={sampleKey === 'default' ? 'default' : 'destructive'}
+        size={size}
+        title={sample.title}
+        description={sample.description}
+        confirmLabel={sample.confirm}
+        cancelLabel={confirmDialogCopy.cancel}
+        closeLabel={confirmDialogCopy.close}
+        canConfirm={!('error' in sample)}
+        onConfirm={close}
+        onClose={close}
+      >
+        {'error' in sample ? <Alert severity="error">{sample.error}</Alert> : null}
+      </ConfirmDialog>
+    </>
+  )
+}
+
 export function DesignSystemPage() {
   // Demo autocontenido: estado local, no toca el uiStore real. Un catálogo
   // debe ser inerte — antes clickear la hamburguesa del ejemplo colapsaba el
@@ -814,6 +941,18 @@ export function DesignSystemPage() {
         >
           <DataTableDemo />
         </Section>
+
+        <Divider />
+
+        <Section title={dsCopy.sections.alerts.title} subtitle={dsCopy.sections.alerts.subtitle}>
+          <AlertsDemo />
+        </Section>
+
+        <Divider />
+
+        <Section title={dsCopy.sections.confirm.title} subtitle={dsCopy.sections.confirm.subtitle}>
+          <ConfirmDialogDemo />
+        </Section>
       </Stack>
     </PageWrapper>
   )
diff --git a/src/features/inventory/components/CreateProductModal/CreateProductModal.styles.ts b/src/features/inventory/components/CreateProductModal/CreateProductModal.styles.ts
index fd57755..90c2872 100644
--- a/src/features/inventory/components/CreateProductModal/CreateProductModal.styles.ts
+++ b/src/features/inventory/components/CreateProductModal/CreateProductModal.styles.ts
@@ -1,8 +1,8 @@
 import { Box, Button } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
-// El shell (root, header, form, body, footer, campos) viene de
-// `ProductModalShell`. Acá quedan las piezas propias del alta.
+// El marco (cabecera, form, cuerpo y pie) es el `ModalFrame` de
+// `shared/components`. Acá quedan las piezas propias del alta.
 //
 // El encabezado de sección de este frame es distinto al de la edición: ícono en
 // un recuadro tintado en vez de la barra de acento. Es la versión v2 del
diff --git a/src/features/inventory/components/CreateProductModal/CreateProductModal.tsx b/src/features/inventory/components/CreateProductModal/CreateProductModal.tsx
index 58b2eb6..b781b5f 100644
--- a/src/features/inventory/components/CreateProductModal/CreateProductModal.tsx
+++ b/src/features/inventory/components/CreateProductModal/CreateProductModal.tsx
@@ -1,24 +1,22 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import AddIcon from '@mui/icons-material/Add'
-import CloseIcon from '@mui/icons-material/Close'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 import StraightenOutlinedIcon from '@mui/icons-material/StraightenOutlined'
 import WarehouseOutlinedIcon from '@mui/icons-material/WarehouseOutlined'
-import { Alert, Button, Divider, IconButton, MenuItem, TextField, Typography } from '@mui/material'
-import { useEffect, useId } from 'react'
+import { Alert, Button, Divider, MenuItem, TextField, Typography } from '@mui/material'
+import { useEffect } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
-import { LabeledField } from 'shared/components'
-
-import { inventoryCopy } from '../../content'
-import { buildCreatePayload } from '../../utils/payload'
 import {
-  FooterActions,
+  LabeledField,
   ModalBody,
   ModalFooter,
+  ModalFooterActions,
   ModalForm,
-  ModalHeader,
-  ModalRoot,
-} from '../ProductModalShell'
+  ModalFrame,
+} from 'shared/components'
+
+import { inventoryCopy } from '../../content'
+import { buildCreatePayload } from '../../utils/payload'
 
 import { createProductSchema } from './CreateProductModal.schema'
 import type { CreateProductFormData } from './CreateProductModal.schema'
@@ -75,8 +73,6 @@ export function CreateProductModal({
   submitting = false,
   submitError,
 }: CreateProductModalProps) {
-  const titleId = useId()
-
   const {
     control,
     register,
@@ -121,21 +117,14 @@ export function CreateProductModal({
   const submit = handleSubmit((data) => onSubmit(buildCreatePayload(data)))
 
   return (
-    <ModalRoot open={open} onClose={onClose} aria-labelledby={titleId}>
-      <ModalHeader>
-        <div>
-          <Typography id={titleId} variant="h2" component="h2">
-            {copy.title}
-          </Typography>
-          <Typography variant="bodyMd" sx={{ color: 'text.secondary' }}>
-            {copy.subtitle}
-          </Typography>
-        </div>
-        <IconButton aria-label={copy.close} onClick={onClose} size="small">
-          <CloseIcon />
-        </IconButton>
-      </ModalHeader>
-
+    <ModalFrame
+      open={open}
+      title={copy.title}
+      subtitle={copy.subtitle}
+      closeLabel={copy.close}
+      onClose={onClose}
+      busy={submitting}
+    >
       <ModalForm onSubmit={submit} noValidate>
         <ModalBody>
           {generalError === undefined ? null : (
@@ -306,17 +295,17 @@ export function CreateProductModal({
           </SectionRoot>
         </ModalBody>
 
-        <ModalFooter sx={{ justifyContent: 'flex-end' }}>
-          <FooterActions>
+        <ModalFooter>
+          <ModalFooterActions>
             <Button color="neutral" variant="text" onClick={onClose} disabled={submitting}>
               {copy.cancel}
             </Button>
             <Button type="submit" variant="contained" disabled={submitting}>
               {submitting ? copy.submitting : copy.submit}
             </Button>
-          </FooterActions>
+          </ModalFooterActions>
         </ModalFooter>
       </ModalForm>
-    </ModalRoot>
+    </ModalFrame>
   )
 }
diff --git a/src/features/inventory/components/DeleteProductDialog/DeleteProductDialog.test.tsx b/src/features/inventory/components/DeleteProductDialog/DeleteProductDialog.test.tsx
index 0b54a02..8bc4ea2 100644
--- a/src/features/inventory/components/DeleteProductDialog/DeleteProductDialog.test.tsx
+++ b/src/features/inventory/components/DeleteProductDialog/DeleteProductDialog.test.tsx
@@ -26,16 +26,16 @@ function renderDialog(overrides: Partial<Parameters<typeof DeleteProductDialog>[
     ...overrides,
   }
 
-  renderWithTheme(<DeleteProductDialog {...props} />)
+  const view = renderWithTheme(<DeleteProductDialog {...props} />)
 
-  return props
+  return { ...props, view }
 }
 
 describe('DeleteProductDialog', () => {
   it('stays closed without a product', () => {
     renderDialog({ product: undefined })
 
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
   })
 
   // Nombre y SKU: en un catálogo con productos parecidos, el nombre solo no
@@ -46,6 +46,18 @@ describe('DeleteProductDialog', () => {
     expect(screen.getByText(/Cable UTP Cat6 \(CAB-6-305\)/)).toBeInTheDocument()
   })
 
+  // Al cerrar, `product` pasa a `undefined` mientras el diálogo todavía se está
+  // desvaneciendo: el texto tiene que irse con él, no antes.
+  it('keeps naming the product while it fades out', () => {
+    const { view, onConfirm, onClose } = renderDialog()
+
+    view.rerender(
+      <DeleteProductDialog product={undefined} onConfirm={onConfirm} onClose={onClose} />,
+    )
+
+    expect(screen.getByText(/Cable UTP Cat6 \(CAB-6-305\)/)).toBeInTheDocument()
+  })
+
   it('confirms only when the person asks for it', () => {
     const { onConfirm } = renderDialog()
 
diff --git a/src/features/inventory/components/DeleteProductDialog/DeleteProductDialog.tsx b/src/features/inventory/components/DeleteProductDialog/DeleteProductDialog.tsx
index 3d10dfa..329abca 100644
--- a/src/features/inventory/components/DeleteProductDialog/DeleteProductDialog.tsx
+++ b/src/features/inventory/components/DeleteProductDialog/DeleteProductDialog.tsx
@@ -1,12 +1,6 @@
-import {
-  Alert,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from '@mui/material'
+import { Alert } from '@mui/material'
+import { useState } from 'react'
+import { ConfirmDialog } from 'shared/components'
 
 import { inventoryCopy } from '../../content'
 
@@ -29,31 +23,29 @@ export function DeleteProductDialog({
   onConfirm,
   onClose,
 }: DeleteProductDialogProps) {
+  // El diálogo se cierra con un fundido, y durante ese fundido `product` ya es
+  // `undefined`: sin guardar el último, el texto desaparecía y la caja se
+  // encogía mientras se iba. Se actualiza en el render, sin efecto.
+  const [shown, setShown] = useState(product)
+  if (product !== undefined && product !== shown) setShown(product)
+
   return (
-    <Dialog open={product !== undefined} onClose={deleting ? undefined : onClose}>
-      <DialogTitle>{remove.title}</DialogTitle>
-      <DialogContent>
-        {product === undefined ? null : (
-          <DialogContentText>{remove.body(product.name, product.sku)}</DialogContentText>
-        )}
-        {blocked ? (
-          <Alert severity="error" sx={{ mt: 2 }}>
-            {remove.blocked}
-          </Alert>
-        ) : null}
-      </DialogContent>
-      <DialogActions>
-        <Button color="neutral" onClick={onClose} disabled={deleting}>
-          {remove.cancel}
-        </Button>
-        {/* Con el borrado ya rechazado el botón desaparece: reintentar lo mismo
-            va a fallar igual, y dejarlo invita a insistir. */}
-        {blocked ? null : (
-          <Button color="error" variant="contained" onClick={onConfirm} disabled={deleting}>
-            {remove.confirm}
-          </Button>
-        )}
-      </DialogActions>
-    </Dialog>
+    <ConfirmDialog
+      open={product !== undefined}
+      tone="destructive"
+      title={remove.title}
+      description={shown === undefined ? undefined : remove.body(shown.name, shown.sku)}
+      confirmLabel={remove.confirm}
+      cancelLabel={remove.cancel}
+      closeLabel={remove.close}
+      busy={deleting}
+      // Con el borrado ya rechazado la confirmación desaparece: reintentar lo
+      // mismo va a fallar igual, y dejarla invita a insistir.
+      canConfirm={!blocked}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    >
+      {blocked ? <Alert severity="error">{remove.blocked}</Alert> : null}
+    </ConfirmDialog>
   )
 }
diff --git a/src/features/inventory/components/EditProductModal/EditProductModal.styles.ts b/src/features/inventory/components/EditProductModal/EditProductModal.styles.ts
index d777943..bdfb366 100644
--- a/src/features/inventory/components/EditProductModal/EditProductModal.styles.ts
+++ b/src/features/inventory/components/EditProductModal/EditProductModal.styles.ts
@@ -1,9 +1,8 @@
 import { Box, Button, Typography } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
-// El shell del modal (root, header, form, body, footer y campos) vive en
-// `ProductModalShell`, compartido con el alta. Acá quedan sólo las piezas
-// propias de la edición.
+// El marco (cabecera, form, cuerpo y pie) es el `ModalFrame` de
+// `shared/components`. Acá quedan sólo las piezas propias de la edición.
 
 // Radios (px). No se leen del tema ni de `tokens.ts`: `shape.borderRadius` es
 // el radio base (8) de los controles, y las reglas de capa prohíben que una
diff --git a/src/features/inventory/components/EditProductModal/EditProductModal.tsx b/src/features/inventory/components/EditProductModal/EditProductModal.tsx
index e229527..60752d1 100644
--- a/src/features/inventory/components/EditProductModal/EditProductModal.tsx
+++ b/src/features/inventory/components/EditProductModal/EditProductModal.tsx
@@ -1,33 +1,23 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import AddIcon from '@mui/icons-material/Add'
-import CloseIcon from '@mui/icons-material/Close'
-import {
-  Alert,
-  AlertTitle,
-  Button,
-  IconButton,
-  Menu,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import { Alert, AlertTitle, Button, Menu, MenuItem, TextField, Typography } from '@mui/material'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
-import { LabeledField } from 'shared/components'
+import {
+  LabeledField,
+  ModalBody,
+  ModalFooter,
+  ModalFooterActions,
+  ModalFooterNote,
+  ModalForm,
+  ModalFrame,
+} from 'shared/components'
 import { formatRelativeTime } from 'shared/utils'
 
 import { inventoryCopy } from '../../content'
 import type { Product } from '../../types'
 import { parseDimensions } from '../../utils/dimensions'
 import { buildUpdatePayload } from '../../utils/payload'
-import {
-  FooterActions,
-  ModalBody,
-  ModalFooter,
-  ModalForm,
-  ModalHeader,
-  ModalRoot,
-} from '../ProductModalShell'
 
 import { editProductSchema } from './EditProductModal.schema'
 import type { EditProductFormData } from './EditProductModal.schema'
@@ -81,7 +71,6 @@ export function EditProductModal({
   submitting = false,
   conflict,
 }: EditProductModalProps) {
-  const titleId = useId()
   const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null)
 
   const {
@@ -131,21 +120,14 @@ export function EditProductModal({
   const submit = handleSubmit((data) => onSubmit(buildUpdatePayload(product, data)))
 
   return (
-    <ModalRoot open={open} onClose={onClose} aria-labelledby={titleId}>
-      <ModalHeader>
-        <div>
-          <Typography id={titleId} variant="h2" component="h2">
-            {modal.title(product.name)}
-          </Typography>
-          <Typography variant="bodyMd" sx={{ color: 'text.secondary' }}>
-            {modal.subtitle(product.sku)}
-          </Typography>
-        </div>
-        <IconButton aria-label={modal.close} onClick={onClose} size="small" disabled={submitting}>
-          <CloseIcon />
-        </IconButton>
-      </ModalHeader>
-
+    <ModalFrame
+      open={open}
+      title={modal.title(product.name)}
+      subtitle={modal.subtitle(product.sku)}
+      closeLabel={modal.close}
+      onClose={onClose}
+      busy={submitting}
+    >
       <ModalForm onSubmit={submit} noValidate>
         <ModalBody>
           {/* El conflicto va arriba del formulario y no reemplaza nada: lo que
@@ -273,10 +255,10 @@ export function EditProductModal({
         </ModalBody>
 
         <ModalFooter>
-          <Typography variant="labelSm" sx={{ color: 'text.secondary' }}>
+          <ModalFooterNote variant="labelSm">
             {lastUpdated === null ? '' : modal.lastUpdated(lastUpdated)}
-          </Typography>
-          <FooterActions>
+          </ModalFooterNote>
+          <ModalFooterActions>
             <Button color="neutral" variant="text" onClick={onClose} disabled={submitting}>
               {modal.cancel}
             </Button>
@@ -292,7 +274,7 @@ export function EditProductModal({
             >
               {conflict === undefined ? modal.submit : modal.conflict.overwrite}
             </Button>
-          </FooterActions>
+          </ModalFooterActions>
         </ModalFooter>
       </ModalForm>
 
@@ -314,6 +296,6 @@ export function EditProductModal({
           </MenuItem>
         ))}
       </Menu>
-    </ModalRoot>
+    </ModalFrame>
   )
 }
diff --git a/src/features/inventory/components/ProductModalShell/ProductModalShell.styles.ts b/src/features/inventory/components/ProductModalShell/ProductModalShell.styles.ts
deleted file mode 100644
index 918caaf..0000000
--- a/src/features/inventory/components/ProductModalShell/ProductModalShell.styles.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Box, Dialog } from '@mui/material'
-import { styled } from '@mui/material/styles'
-
-// Estructura compartida por los modales de producto (alta y edición). Se extrajo
-// acá cuando apareció el segundo consumidor — la "Regla de Dos" de
-// feature-structure.md §6 — en vez de duplicar el shell en cada modal.
-//
-// Lo que NO vive acá es el encabezado de sección: cada frame de Figma tiene el
-// suyo (barra de acento en el de edición, ícono en recuadro en el de alta), así
-// que cada modal aporta el propio.
-
-export const MODAL_MAX_WIDTH = 672
-
-export const ModalRoot = styled(Dialog)(({ theme }) => ({
-  '& .MuiDialog-paper': {
-    width: '100%',
-    maxWidth: MODAL_MAX_WIDTH,
-    maxHeight: `calc(100% - ${theme.spacing(8)})`,
-    margin: theme.spacing(2),
-    // El paper no scrollea (MUI le pone `overflow-y: auto` por defecto): el
-    // único que scrollea es el cuerpo, así el título y las acciones quedan
-    // siempre a la vista, como en el diseño.
-    overflow: 'hidden',
-  },
-}))
-
-// El `<form>` envuelve cuerpo y pie, así que tiene que ser la columna flex que
-// reparte el alto. Si queda como bloque suelto, el `overflow` del cuerpo no
-// tiene contra qué medirse y termina scrolleando el modal entero.
-export const ModalForm = styled('form')({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: '1 1 auto',
-  minHeight: 0,
-})
-
-export const ModalHeader = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'flex-start',
-  justifyContent: 'space-between',
-  gap: theme.spacing(2),
-  padding: theme.spacing(3),
-  borderBottom: `1px solid ${theme.vars.palette.divider}`,
-  flexShrink: 0,
-}))
-
-export const ModalBody = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing(4),
-  padding: theme.spacing(3),
-  // `minHeight: 0` es load-bearing: sin eso un ítem flex no baja de su tamaño
-  // de contenido y el scroll nunca se activa.
-  flex: '1 1 auto',
-  minHeight: 0,
-  overflowY: 'auto',
-}))
-
-export const ModalFooter = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: theme.spacing(2),
-  padding: theme.spacing(3),
-  borderTop: `1px solid ${theme.vars.palette.divider}`,
-  backgroundColor: theme.vars.palette.background.default,
-  flexShrink: 0,
-  // En pantallas chicas el pie apila la leyenda sobre los botones.
-  [theme.breakpoints.down('sm')]: {
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-}))
-
-export const FooterActions = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: theme.spacing(1.5),
-  flexShrink: 0,
-  [theme.breakpoints.down('sm')]: { justifyContent: 'flex-end' },
-}))
diff --git a/src/features/inventory/components/ProductModalShell/index.ts b/src/features/inventory/components/ProductModalShell/index.ts
deleted file mode 100644
index 728c799..0000000
--- a/src/features/inventory/components/ProductModalShell/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export {
-  FooterActions,
-  MODAL_MAX_WIDTH,
-  ModalBody,
-  ModalFooter,
-  ModalForm,
-  ModalHeader,
-  ModalRoot,
-} from './ProductModalShell.styles'
diff --git a/src/features/inventory/content.ts b/src/features/inventory/content.ts
index a65a0e1..9319f40 100644
--- a/src/features/inventory/content.ts
+++ b/src/features/inventory/content.ts
@@ -58,6 +58,7 @@ export const inventoryCopy = {
       'Borrarlo haría desaparecer esos registros.',
     cancel: 'Cancelar',
     confirm: 'Eliminar',
+    close: 'Cerrar',
   },
   pagination: {
     previous: 'Página anterior',
diff --git a/src/features/inventory/pages/InventoryPage.test.tsx b/src/features/inventory/pages/InventoryPage.test.tsx
index 188443a..3b72d72 100644
--- a/src/features/inventory/pages/InventoryPage.test.tsx
+++ b/src/features/inventory/pages/InventoryPage.test.tsx
@@ -1,6 +1,7 @@
-import { fireEvent, screen } from '@testing-library/react'
+import { act, fireEvent, screen } from '@testing-library/react'
 import { MemoryRouter, Route, Routes } from 'react-router-dom'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useNotificationStore } from 'shared/store'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithTheme } from '../../../test/renderWithTheme'
 import type * as inventoryHooks from '../hooks/useInventory'
@@ -11,6 +12,7 @@ import {
   useProductPage,
   useWarehouses,
 } from '../hooks/useInventory'
+import type { ProductSummary } from '../types'
 
 import { InventoryPage } from './InventoryPage'
 
@@ -104,3 +106,47 @@ describe('InventoryPage · the tab in the URL', () => {
     expect(lastRequestedStatus()).toBeUndefined()
   })
 })
+
+describe('InventoryPage · the delete notice', () => {
+  const PRODUCT: ProductSummary = {
+    id: 8842,
+    sku: 'SKU-8842-PL',
+    name: 'Arreglo de sensores serie G',
+    category: 'Electronics',
+    totalStock: 2710,
+    stockStatus: 'available',
+    inTransitQuantity: 0,
+    primaryWarehouse: { id: 1, name: 'CD Ezeiza', quantity: 2710 },
+    warehouseCount: 1,
+  }
+
+  afterEach(() => {
+    act(() => useNotificationStore.setState({ notifications: [] }))
+  })
+
+  // El aviso sale por el `NotificationHost` como el del resto de la app, no por
+  // un Snackbar propio de la pantalla con otro aspecto y otra duración.
+  it('announces the deletion through the app notifications', () => {
+    vi.mocked(useProductPage).mockReturnValue({
+      data: { products: [PRODUCT], total: 1 },
+      isPending: false,
+      isError: false,
+    } as never)
+    vi.mocked(useDeleteProduct).mockReturnValue({
+      ...IDLE_MUTATION,
+      mutate: vi.fn((_id: number, options: { onSuccess: () => void }) => options.onSuccess()),
+    } as never)
+    renderCatalog('/inventory')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Acciones del producto SKU-8842-PL' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Eliminar' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Eliminar' }))
+
+    expect(useNotificationStore.getState().notifications).toEqual([
+      expect.objectContaining({
+        message: 'Arreglo de sensores serie G eliminado.',
+        severity: 'success',
+      }),
+    ])
+  })
+})
diff --git a/src/features/inventory/pages/InventoryPage.tsx b/src/features/inventory/pages/InventoryPage.tsx
index c8c8776..786d7e9 100644
--- a/src/features/inventory/pages/InventoryPage.tsx
+++ b/src/features/inventory/pages/InventoryPage.tsx
@@ -1,11 +1,12 @@
 import AddIcon from '@mui/icons-material/Add'
 import SearchIcon from '@mui/icons-material/Search'
-import { Box, Button, InputAdornment, Snackbar, Stack, TextField, Typography } from '@mui/material'
+import { Box, Button, InputAdornment, Stack, TextField, Typography } from '@mui/material'
 import { useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { ErrorFallback, LoadingSpinner, PageWrapper } from 'shared/components'
 import type { DataTableTab } from 'shared/components'
 import { useDebouncedValue } from 'shared/hooks/useDebouncedValue'
+import { notify } from 'shared/store'
 
 import { CreateProductModal } from '../components/CreateProductModal'
 import { DeleteProductDialog } from '../components/DeleteProductDialog'
@@ -66,7 +67,6 @@ export function InventoryPage() {
   const [search, setSearch] = useState('')
   const [creating, setCreating] = useState(false)
   const [removing, setRemoving] = useState<ProductSummary | undefined>(undefined)
-  const [notice, setNotice] = useState<string | null>(null)
 
   // Lo que se tipea actualiza el campo en el acto; lo que viaja a la API espera
   // a que la persona deje de escribir.
@@ -128,7 +128,7 @@ export function InventoryPage() {
 
     deleteMutation.mutate(removing.id, {
       onSuccess: () => {
-        setNotice(page.deleted(name))
+        notify(page.deleted(name), 'success')
         setRemoving(undefined)
         if (eraLaUltimaDeLaPagina) setPageNumber((current) => Math.max(current - 1, 1))
       },
@@ -237,7 +237,7 @@ export function InventoryPage() {
         onSubmit={(payload) => {
           createMutation.mutate(payload, {
             onSuccess: (created) => {
-              setNotice(page.saved(created.name))
+              notify(page.saved(created.name), 'success')
               setCreating(false)
             },
           })
@@ -251,13 +251,6 @@ export function InventoryPage() {
         onConfirm={confirmRemove}
         onClose={() => setRemoving(undefined)}
       />
-
-      <Snackbar
-        open={notice !== null}
-        autoHideDuration={4000}
-        onClose={() => setNotice(null)}
-        message={notice ?? undefined}
-      />
     </PageWrapper>
   )
 }
diff --git a/src/features/inventory/pages/ProductDetailPage.tsx b/src/features/inventory/pages/ProductDetailPage.tsx
index c1ef7c4..fb3b4f2 100644
--- a/src/features/inventory/pages/ProductDetailPage.tsx
+++ b/src/features/inventory/pages/ProductDetailPage.tsx
@@ -1,10 +1,11 @@
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined'
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
-import { Box, Button, Snackbar, Stack, Typography } from '@mui/material'
+import { Box, Button, Stack, Typography } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { ErrorFallback, LoadingSpinner, PageWrapper } from 'shared/components'
+import { notify } from 'shared/store'
 
 import { EditProductModal } from '../components/EditProductModal'
 import { MasterStockCard } from '../components/MasterStockCard'
@@ -172,7 +173,6 @@ export function ProductDetailPage() {
 
     void navigate(pathname, { replace: true, state: null })
   }, [abrirEdicion, navigate, pathname])
-  const [savedName, setSavedName] = useState<string | null>(null)
   // Estado del producto cuando el modal lo abrió. Se guarda para poder decir
   // QUÉ cambió si la API rechaza el guardado por versión vieja (TESIS-101).
   const [baseline, setBaseline] = useState<Product | undefined>(undefined)
@@ -207,7 +207,7 @@ export function ProductDetailPage() {
     const name = product.data?.name ?? ''
     updateMutation.mutate(payload, {
       onSuccess: () => {
-        setSavedName(name)
+        notify(page.saved(name), 'success')
         setEditing(false)
         setBaseline(undefined)
       },
@@ -304,13 +304,6 @@ export function ProductDetailPage() {
         }}
         onSubmit={save}
       />
-
-      <Snackbar
-        open={savedName !== null}
-        autoHideDuration={4000}
-        onClose={() => setSavedName(null)}
-        message={savedName === null ? undefined : page.saved(savedName)}
-      />
     </PageWrapper>
   )
 }
diff --git a/src/shared/components/ConfirmDialog/ConfirmDialog.styles.ts b/src/shared/components/ConfirmDialog/ConfirmDialog.styles.ts
new file mode 100644
index 0000000..a18dbc3
--- /dev/null
+++ b/src/shared/components/ConfirmDialog/ConfirmDialog.styles.ts
@@ -0,0 +1,16 @@
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+// Ícono de advertencia de las acciones destructivas, en recuadro tonal: el mismo
+// par container/main que usan los badges para la intención de error.
+export const DangerIcon = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  width: theme.spacing(5),
+  height: theme.spacing(5),
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.vars.palette.error.container,
+  color: theme.vars.palette.error.main,
+}))
diff --git a/src/shared/components/ConfirmDialog/ConfirmDialog.test.tsx b/src/shared/components/ConfirmDialog/ConfirmDialog.test.tsx
new file mode 100644
index 0000000..fab1f28
--- /dev/null
+++ b/src/shared/components/ConfirmDialog/ConfirmDialog.test.tsx
@@ -0,0 +1,101 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithTheme } from '../../../test/renderWithTheme'
+
+import { ConfirmDialog } from './ConfirmDialog'
+import type { ConfirmDialogProps } from './ConfirmDialog.types'
+
+function renderDialog(overrides: Partial<ConfirmDialogProps> = {}) {
+  const props: ConfirmDialogProps = {
+    open: true,
+    title: '¿Eliminar la orden?',
+    description: 'Se va a eliminar la orden #ORD-1042.',
+    confirmLabel: 'Eliminar',
+    cancelLabel: 'Cancelar',
+    closeLabel: 'Cerrar',
+    onConfirm: vi.fn(),
+    onClose: vi.fn(),
+    ...overrides,
+  }
+
+  renderWithTheme(<ConfirmDialog {...props} />)
+
+  return props
+}
+
+describe('ConfirmDialog', () => {
+  it('stays closed until it is opened', () => {
+    renderDialog({ open: false })
+
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+  })
+
+  // Un lector de pantalla anuncia título y descripción al abrir: la persona
+  // tiene que saber qué está confirmando sin recorrer el diálogo.
+  it('announces itself with its title and description', () => {
+    renderDialog()
+
+    const dialog = screen.getByRole('alertdialog', { name: '¿Eliminar la orden?' })
+
+    expect(dialog).toHaveAccessibleDescription('Se va a eliminar la orden #ORD-1042.')
+  })
+
+  it('confirms only when the person asks for it', () => {
+    const { onConfirm, onClose } = renderDialog()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Eliminar' }))
+
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('closes from cancel, from the header and with Escape', () => {
+    const { onConfirm, onClose } = renderDialog()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Cancelar' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Cerrar' }))
+    fireEvent.keyDown(screen.getByRole('alertdialog'), { key: 'Escape' })
+
+    expect(onClose).toHaveBeenCalledTimes(3)
+    expect(onConfirm).not.toHaveBeenCalled()
+  })
+
+  it('does not let anything fire while the action is in flight', () => {
+    const { onConfirm, onClose } = renderDialog({ busy: true })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Eliminar' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Cancelar' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Cerrar' }))
+    fireEvent.keyDown(screen.getByRole('alertdialog'), { key: 'Escape' })
+
+    expect(onConfirm).not.toHaveBeenCalled()
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('leaves only the way out when confirming is no longer possible', () => {
+    renderDialog({ canConfirm: false })
+
+    expect(screen.queryByRole('button', { name: 'Eliminar' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancelar' })).toBeInTheDocument()
+  })
+
+  it('shows the extra content below the description', () => {
+    renderDialog({ children: <p>La orden ya fue despachada.</p> })
+
+    expect(screen.getByText('La orden ya fue despachada.')).toBeInTheDocument()
+  })
+
+  it('is as wide as a question unless asked for more room', () => {
+    renderDialog()
+
+    expect(screen.getByRole('alertdialog')).toHaveStyle({ maxWidth: '480px' })
+  })
+
+  // En una destructiva un Enter apurado no tiene que poder borrar nada.
+  it('starts a destructive confirmation focused on cancel', () => {
+    renderDialog({ tone: 'destructive' })
+
+    expect(screen.getByRole('button', { name: 'Cancelar' })).toHaveFocus()
+  })
+})
diff --git a/src/shared/components/ConfirmDialog/ConfirmDialog.tsx b/src/shared/components/ConfirmDialog/ConfirmDialog.tsx
new file mode 100644
index 0000000..6665504
--- /dev/null
+++ b/src/shared/components/ConfirmDialog/ConfirmDialog.tsx
@@ -0,0 +1,85 @@
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded'
+import { Button, Typography } from '@mui/material'
+import { useId } from 'react'
+
+import { ModalBody, ModalFooter, ModalFooterActions, ModalFrame } from '../ModalFrame'
+
+import { DangerIcon } from './ConfirmDialog.styles'
+import type { ConfirmDialogProps } from './ConfirmDialog.types'
+
+/**
+ * Confirmación de una acción antes de ejecutarla, sobre el `ModalFrame`.
+ *
+ * Es presentacional: no ejecuta nada. Quien lo monta hace la llamada en
+ * `onConfirm`, marca `busy` mientras está en vuelo y decide si cerrarlo o
+ * dejarlo abierto con el error en `children`.
+ */
+export function ConfirmDialog({
+  open,
+  title,
+  description,
+  children,
+  confirmLabel,
+  cancelLabel,
+  closeLabel,
+  tone = 'default',
+  size = 'sm',
+  busy = false,
+  canConfirm = true,
+  onConfirm,
+  onClose,
+}: ConfirmDialogProps) {
+  const descriptionId = useId()
+  const destructive = tone === 'destructive'
+
+  return (
+    <ModalFrame
+      open={open}
+      title={title}
+      icon={
+        destructive ? (
+          <DangerIcon aria-hidden>
+            <WarningAmberRoundedIcon />
+          </DangerIcon>
+        ) : undefined
+      }
+      closeLabel={closeLabel}
+      onClose={onClose}
+      size={size}
+      busy={busy}
+      role="alertdialog"
+      describedBy={description === undefined ? undefined : descriptionId}
+    >
+      {/* Una pregunta no se reparte en secciones: el cuerpo va más apretado que
+          el de un formulario. */}
+      <ModalBody sx={{ gap: 2 }}>
+        {description === undefined ? null : (
+          <Typography id={descriptionId} variant="bodyMd" sx={{ color: 'text.secondary' }}>
+            {description}
+          </Typography>
+        )}
+        {children}
+      </ModalBody>
+
+      <ModalFooter>
+        <ModalFooterActions>
+          {/* En una destructiva el foco arranca en cancelar: un Enter apurado no
+              tiene que poder borrar nada. */}
+          <Button color="neutral" onClick={onClose} disabled={busy} autoFocus={destructive}>
+            {cancelLabel}
+          </Button>
+          {canConfirm ? (
+            <Button
+              variant="contained"
+              color={destructive ? 'error' : 'primary'}
+              onClick={onConfirm}
+              disabled={busy}
+            >
+              {confirmLabel}
+            </Button>
+          ) : null}
+        </ModalFooterActions>
+      </ModalFooter>
+    </ModalFrame>
+  )
+}
diff --git a/src/shared/components/ConfirmDialog/ConfirmDialog.types.ts b/src/shared/components/ConfirmDialog/ConfirmDialog.types.ts
new file mode 100644
index 0000000..dfb4d36
--- /dev/null
+++ b/src/shared/components/ConfirmDialog/ConfirmDialog.types.ts
@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+
+import type { ModalSize } from '../ModalFrame'
+
+/**
+ * `destructive` es para lo que no se puede deshacer (una baja, una cancelación):
+ * suma el ícono de advertencia y pinta la confirmación en rojo.
+ */
+export type ConfirmDialogTone = 'default' | 'destructive'
+
+export interface ConfirmDialogProps {
+  open: boolean
+  title: string
+  /** Qué va a pasar, con el dato que identifica al objeto (un ID, un SKU). */
+  description?: ReactNode
+  /** Contenido extra bajo la descripción: típicamente un `Alert` con un error. */
+  children?: ReactNode
+  confirmLabel: string
+  cancelLabel: string
+  /** Nombre accesible de la X de la cabecera. */
+  closeLabel: string
+  tone?: ConfirmDialogTone
+  /** `sm` por defecto: el tamaño de una pregunta, no de un formulario. */
+  size?: ModalSize
+  /** La acción está en vuelo: nada se puede tocar ni cerrar hasta que vuelva. */
+  busy?: boolean
+  /**
+   * En `false` la confirmación desaparece y queda sólo cancelar. Es para cuando
+   * la acción ya fue rechazada y reintentarla va a fallar igual.
+   */
+  canConfirm?: boolean
+  onConfirm: () => void
+  onClose: () => void
+}
diff --git a/src/shared/components/ConfirmDialog/index.ts b/src/shared/components/ConfirmDialog/index.ts
new file mode 100644
index 0000000..e7e5ddc
--- /dev/null
+++ b/src/shared/components/ConfirmDialog/index.ts
@@ -0,0 +1,2 @@
+export { ConfirmDialog } from './ConfirmDialog'
+export type { ConfirmDialogProps, ConfirmDialogTone } from './ConfirmDialog.types'
diff --git a/src/shared/components/ModalFrame/ModalFrame.styles.ts b/src/shared/components/ModalFrame/ModalFrame.styles.ts
new file mode 100644
index 0000000..89b8884
--- /dev/null
+++ b/src/shared/components/ModalFrame/ModalFrame.styles.ts
@@ -0,0 +1,104 @@
+import { Box, Dialog, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+import type { ModalSize } from './ModalFrame.types'
+
+// `md` es el ancho del ModalFrame del diseño (672), el de los formularios. `sm`
+// es para una pregunta: una confirmación de dos líneas a 672 queda en un renglón
+// larguísimo, con los botones lejos de lo que confirman. `lg` es para cuando el
+// cuerpo trae una tabla o un resumen que necesita columnas.
+const MODAL_WIDTHS: Record<ModalSize, number> = {
+  sm: 480,
+  md: 672,
+  lg: 880,
+}
+
+export const ModalRoot = styled(Dialog, {
+  shouldForwardProp: (prop) => prop !== 'modalSize',
+})<{ modalSize: ModalSize }>(({ theme, modalSize }) => ({
+  '& .MuiDialog-paper': {
+    width: '100%',
+    maxWidth: MODAL_WIDTHS[modalSize],
+    maxHeight: `calc(100% - ${theme.spacing(8)})`,
+    margin: theme.spacing(2),
+    // El paper no scrollea (MUI le pone `overflow-y: auto` por defecto): el
+    // único que scrollea es el cuerpo, así el título y las acciones quedan
+    // siempre a la vista, como en el diseño.
+    overflow: 'hidden',
+  },
+}))
+
+export const ModalHeader = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: theme.spacing(2),
+  padding: theme.spacing(3, 3, 2),
+  borderBottom: `1px solid ${theme.vars.palette.divider}`,
+  flexShrink: 0,
+}))
+
+export const ModalHeading = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1.5),
+  flex: 1,
+  minWidth: 0,
+}))
+
+// Cuando el modal es un formulario, el `<form>` envuelve cuerpo y pie, así que
+// tiene que ser la columna flex que reparte el alto. Si queda como bloque
+// suelto, el `overflow` del cuerpo no tiene contra qué medirse y termina
+// scrolleando el modal entero.
+export const ModalForm = styled('form')({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: '1 1 auto',
+  minHeight: 0,
+})
+
+export const ModalBody = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(4),
+  padding: theme.spacing(3),
+  // `minHeight: 0` es load-bearing: sin eso un ítem flex no baja de su tamaño
+  // de contenido y el scroll nunca se activa.
+  flex: '1 1 auto',
+  minHeight: 0,
+  overflowY: 'auto',
+}))
+
+export const ModalFooter = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: theme.spacing(2),
+  padding: theme.spacing(2, 3),
+  borderTop: `1px solid ${theme.vars.palette.divider}`,
+  backgroundColor: theme.vars.palette.background.default,
+  flexShrink: 0,
+  // En pantallas chicas el pie apila la nota sobre los botones.
+  [theme.breakpoints.down('sm')]: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+  },
+}))
+
+// Texto del pie a la izquierda de las acciones ("Actualizado hace 2 horas").
+export const ModalFooterNote = styled(Typography)(({ theme }) => ({
+  marginRight: 'auto',
+  color: theme.vars.palette.text.secondary,
+  [theme.breakpoints.down('sm')]: { marginRight: 0 },
+}))
+
+export const ModalFooterActions = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing(2),
+  flexShrink: 0,
+  // En pantallas chicas los botones van a lo ancho, con la acción principal
+  // arriba, como apila Material las acciones de un diálogo.
+  [theme.breakpoints.down('sm')]: {
+    flexDirection: 'column-reverse',
+    alignItems: 'stretch',
+  },
+}))
diff --git a/src/shared/components/ModalFrame/ModalFrame.test.tsx b/src/shared/components/ModalFrame/ModalFrame.test.tsx
new file mode 100644
index 0000000..77ff526
--- /dev/null
+++ b/src/shared/components/ModalFrame/ModalFrame.test.tsx
@@ -0,0 +1,94 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithTheme } from '../../../test/renderWithTheme'
+
+import { ModalFrame } from './ModalFrame'
+import { ModalBody, ModalFooter } from './ModalFrame.styles'
+import type { ModalFrameProps } from './ModalFrame.types'
+
+function renderFrame(overrides: Partial<ModalFrameProps> = {}) {
+  const props: ModalFrameProps = {
+    open: true,
+    title: 'Nuevo producto',
+    closeLabel: 'Cerrar',
+    onClose: vi.fn(),
+    children: <ModalBody>Cuerpo del modal</ModalBody>,
+    ...overrides,
+  }
+
+  renderWithTheme(<ModalFrame {...props} />)
+
+  return props
+}
+
+describe('ModalFrame', () => {
+  it('stays closed until it is opened', () => {
+    renderFrame({ open: false })
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('is named by its title, with the subtitle and the body inside', () => {
+    renderFrame({ subtitle: 'Se agrega una entrada al catálogo maestro.' })
+
+    const dialog = screen.getByRole('dialog', { name: 'Nuevo producto' })
+
+    expect(dialog).toHaveTextContent('Se agrega una entrada al catálogo maestro.')
+    expect(dialog).toHaveTextContent('Cuerpo del modal')
+  })
+
+  it('closes from the header and with Escape', () => {
+    const { onClose } = renderFrame()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Cerrar' }))
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' })
+
+    expect(onClose).toHaveBeenCalledTimes(2)
+  })
+
+  // Con algo en vuelo el resultado tiene que llegar a un modal que siga a la
+  // vista: no se cierra por ningún lado.
+  it('cannot be closed while something is in flight', () => {
+    const { onClose } = renderFrame({ busy: true })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Cerrar' }))
+    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape' })
+
+    expect(onClose).not.toHaveBeenCalled()
+  })
+
+  it('takes the ModalFrame width of the design unless told otherwise', () => {
+    renderFrame()
+
+    expect(screen.getByRole('dialog')).toHaveStyle({ maxWidth: '672px' })
+  })
+
+  it('narrows or widens with its size', () => {
+    renderFrame({ size: 'lg' })
+
+    expect(screen.getByRole('dialog')).toHaveStyle({ maxWidth: '880px' })
+  })
+
+  // Con un tema de dos esquemas, un hex horneado no repinta al cambiar de modo
+  // (TESIS-104): el pie tiene que leer la variable del esquema activo.
+  it('paints its footer from the color scheme variables', () => {
+    renderFrame({ children: <ModalFooter data-testid="footer" /> })
+
+    expect(getComputedStyle(screen.getByTestId('footer')).backgroundColor).toBe(
+      'var(--mui-palette-background-default)',
+    )
+  })
+
+  it('can present itself as an alert dialog described by its body', () => {
+    renderFrame({
+      role: 'alertdialog',
+      describedBy: 'body',
+      children: <ModalBody id="body">Esta acción no se puede deshacer.</ModalBody>,
+    })
+
+    expect(screen.getByRole('alertdialog', { name: 'Nuevo producto' })).toHaveAccessibleDescription(
+      'Esta acción no se puede deshacer.',
+    )
+  })
+})
diff --git a/src/shared/components/ModalFrame/ModalFrame.tsx b/src/shared/components/ModalFrame/ModalFrame.tsx
new file mode 100644
index 0000000..263e068
--- /dev/null
+++ b/src/shared/components/ModalFrame/ModalFrame.tsx
@@ -0,0 +1,63 @@
+import CloseIcon from '@mui/icons-material/Close'
+import { IconButton, Typography } from '@mui/material'
+import { useId } from 'react'
+
+import { ModalHeader, ModalHeading, ModalRoot } from './ModalFrame.styles'
+import type { ModalFrameProps } from './ModalFrame.types'
+
+/**
+ * Marco de todos los modales de la app, el ModalFrame del diseño: cabecera con
+ * título y cierre, y abajo lo que traiga cada modal —`ModalBody` y
+ * `ModalFooter`, o un `ModalForm` que los envuelva—.
+ *
+ * El marco resuelve lo que ningún modal debería repetir: el ancho, que sólo
+ * scrollee el cuerpo, el título atado al `aria-labelledby` y no dejar cerrar
+ * mientras hay algo en vuelo.
+ */
+export function ModalFrame({
+  open,
+  title,
+  subtitle,
+  icon,
+  closeLabel,
+  onClose,
+  size = 'md',
+  busy = false,
+  role = 'dialog',
+  describedBy,
+  children,
+}: ModalFrameProps) {
+  const titleId = useId()
+
+  return (
+    <ModalRoot
+      open={open}
+      modalSize={size}
+      onClose={busy ? undefined : onClose}
+      aria-labelledby={titleId}
+      aria-describedby={describedBy}
+      slotProps={{ paper: { role } }}
+    >
+      <ModalHeader>
+        <ModalHeading>
+          {icon}
+          <div>
+            <Typography id={titleId} variant="h2" component="h2">
+              {title}
+            </Typography>
+            {subtitle === undefined ? null : (
+              <Typography variant="bodyMd" sx={{ color: 'text.secondary' }}>
+                {subtitle}
+              </Typography>
+            )}
+          </div>
+        </ModalHeading>
+        <IconButton aria-label={closeLabel} onClick={onClose} size="small" disabled={busy}>
+          <CloseIcon />
+        </IconButton>
+      </ModalHeader>
+
+      {children}
+    </ModalRoot>
+  )
+}
diff --git a/src/shared/components/ModalFrame/ModalFrame.types.ts b/src/shared/components/ModalFrame/ModalFrame.types.ts
new file mode 100644
index 0000000..46f8623
--- /dev/null
+++ b/src/shared/components/ModalFrame/ModalFrame.types.ts
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react'
+
+/** Ancho máximo del modal: sm 480 · md 672 (el ModalFrame del diseño) · lg 880. */
+export type ModalSize = 'sm' | 'md' | 'lg'
+
+export interface ModalFrameProps {
+  open: boolean
+  title: string
+  subtitle?: ReactNode
+  /** Glifo a la izquierda del título, ya con su recuadro (p. ej. la advertencia de una baja). */
+  icon?: ReactNode
+  /** Nombre accesible de la X de la cabecera. */
+  closeLabel: string
+  onClose: () => void
+  /** `md` por defecto: el ancho del ModalFrame del diseño. */
+  size?: ModalSize
+  /**
+   * Hay una acción en vuelo: el modal no se cierra ni con la X, ni con Esc, ni
+   * con un clic afuera, así el resultado llega a algo que sigue a la vista.
+   */
+  busy?: boolean
+  /** `alertdialog` para lo que interrumpe pidiendo una decisión (una confirmación). */
+  role?: 'dialog' | 'alertdialog'
+  /** Id del nodo que describe el modal, para que el lector de pantalla lo lea al abrir. */
+  describedBy?: string
+  /** Cuerpo y pie: `ModalBody` + `ModalFooter`, o un `ModalForm` que los envuelva. */
+  children: ReactNode
+}
diff --git a/src/shared/components/ModalFrame/index.ts b/src/shared/components/ModalFrame/index.ts
new file mode 100644
index 0000000..faa6eec
--- /dev/null
+++ b/src/shared/components/ModalFrame/index.ts
@@ -0,0 +1,9 @@
+export { ModalFrame } from './ModalFrame'
+export {
+  ModalBody,
+  ModalFooter,
+  ModalFooterActions,
+  ModalFooterNote,
+  ModalForm,
+} from './ModalFrame.styles'
+export type { ModalFrameProps, ModalSize } from './ModalFrame.types'
diff --git a/src/shared/components/NotificationHost.tsx b/src/shared/components/NotificationHost.tsx
deleted file mode 100644
index 16f9d8c..0000000
--- a/src/shared/components/NotificationHost.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Alert, Snackbar } from '@mui/material'
-
-import { useNotificationStore } from '../store/notificationStore'
-
-const AUTO_HIDE_MS = 6000
-
-/**
- * Único punto de render de las notificaciones de la app. Se monta una vez en los
- * providers; cualquier capa (incluido el interceptor HTTP) notifica escribiendo
- * en el store.
- *
- * Provisional a propósito: usa `Snackbar` + `Alert` de MUI. Cuando TESIS-68
- * defina el componente Toast del design system, se cambia acá adentro y ningún
- * consumidor se entera.
- */
-export function NotificationHost() {
-  const notifications = useNotificationStore((state) => state.notifications)
-  const dismiss = useNotificationStore((state) => state.dismiss)
-
-  // Se muestra una a la vez: apiladas se tapan entre sí y ninguna se lee.
-  const current = notifications[0]
-  if (!current) return null
-
-  return (
-    <Snackbar
-      key={current.id}
-      open
-      autoHideDuration={AUTO_HIDE_MS}
-      onClose={() => dismiss(current.id)}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-    >
-      <Alert severity={current.severity} variant="filled" onClose={() => dismiss(current.id)}>
-        {current.message}
-      </Alert>
-    </Snackbar>
-  )
-}
diff --git a/src/shared/components/NotificationHost/NotificationHost.styles.ts b/src/shared/components/NotificationHost/NotificationHost.styles.ts
new file mode 100644
index 0000000..f56f5e2
--- /dev/null
+++ b/src/shared/components/NotificationHost/NotificationHost.styles.ts
@@ -0,0 +1,22 @@
+import { Alert } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+// Ancho del aviso del diseño (Alert.dc.html): suficiente para una oración sin
+// que el toast cruce la pantalla de lado a lado en escritorio.
+const TOAST_MAX_WIDTH = 520
+
+// El toast es el aviso del sistema del tema, flotando. Dos ajustes para que
+// flote: en dark el fondo tonal es translúcido (la intención al 12%) y dejaría
+// ver la pantalla de atrás, así que el tinte se pinta encima del `paper` opaco;
+// y lleva la sombra del nivel 2, la de lo que se despliega por encima del resto.
+export const Toast = styled(Alert)(({ theme, severity = 'info' }) => {
+  const tint = theme.vars.palette[severity].container
+
+  return {
+    width: '100%',
+    maxWidth: TOAST_MAX_WIDTH,
+    backgroundColor: theme.vars.palette.background.paper,
+    backgroundImage: `linear-gradient(${tint}, ${tint})`,
+    boxShadow: theme.vars.elevation[2].boxShadow,
+  }
+})
diff --git a/src/shared/components/NotificationHost/NotificationHost.test.tsx b/src/shared/components/NotificationHost/NotificationHost.test.tsx
new file mode 100644
index 0000000..90d152a
--- /dev/null
+++ b/src/shared/components/NotificationHost/NotificationHost.test.tsx
@@ -0,0 +1,77 @@
+import { act, fireEvent, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { renderWithTheme } from '../../../test/renderWithTheme'
+import { notify, useNotificationStore } from '../../store/notificationStore'
+
+import { NotificationHost } from './NotificationHost'
+
+afterEach(() => {
+  act(() => useNotificationStore.setState({ notifications: [] }))
+})
+
+describe('NotificationHost', () => {
+  it('renders nothing while there is nothing to say', () => {
+    renderWithTheme(<NotificationHost />)
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
+  it('shows a notification pushed from outside React', () => {
+    renderWithTheme(<NotificationHost />)
+
+    act(() => notify('Producto guardado.', 'success'))
+
+    expect(screen.getByRole('alert')).toHaveTextContent('Producto guardado.')
+  })
+
+  // Con un tema de dos esquemas, un hex horneado no repinta al cambiar de modo
+  // (TESIS-104): el fondo opaco del toast sale de la variable del esquema activo.
+  it('paints the toast from the color scheme variables', () => {
+    renderWithTheme(<NotificationHost />)
+
+    act(() => notify('Producto guardado.', 'success'))
+
+    expect(getComputedStyle(screen.getByRole('alert')).backgroundColor).toBe(
+      'var(--mui-palette-background-paper)',
+    )
+  })
+
+  // Apiladas se tapan entre sí y ninguna se lee: la segunda espera su turno.
+  it('shows one notification at a time, in order', () => {
+    renderWithTheme(<NotificationHost />)
+
+    act(() => {
+      notify('Primera.')
+      notify('Segunda.')
+    })
+
+    expect(screen.getByRole('alert')).toHaveTextContent('Primera.')
+    expect(screen.queryByText('Segunda.')).not.toBeInTheDocument()
+  })
+
+  // Un clic en cualquier otro lado no es "ya lo leí": el toast se va por
+  // tiempo o por su X, no porque la persona siguió trabajando.
+  it('stays up when the person clicks elsewhere on the page', async () => {
+    renderWithTheme(<NotificationHost />)
+
+    act(() => notify('Producto guardado.', 'success'))
+    // El Snackbar arma su escucha de clics afuera en el tick siguiente.
+    await act(() => new Promise((resolve) => setTimeout(resolve, 0)))
+    fireEvent.click(document.body)
+
+    expect(screen.getByRole('alert')).toHaveTextContent('Producto guardado.')
+  })
+
+  it('moves on to the next one when the current is closed', () => {
+    renderWithTheme(<NotificationHost />)
+
+    act(() => {
+      notify('Primera.')
+      notify('Segunda.')
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Cerrar' }))
+
+    expect(screen.getByRole('alert')).toHaveTextContent('Segunda.')
+  })
+})
diff --git a/src/shared/components/NotificationHost/NotificationHost.tsx b/src/shared/components/NotificationHost/NotificationHost.tsx
new file mode 100644
index 0000000..489e645
--- /dev/null
+++ b/src/shared/components/NotificationHost/NotificationHost.tsx
@@ -0,0 +1,43 @@
+import { Snackbar } from '@mui/material'
+
+import { useNotificationStore } from '../../store/notificationStore'
+
+import { Toast } from './NotificationHost.styles'
+
+const AUTO_HIDE_MS = 6000
+
+/**
+ * Único punto de render de las notificaciones de la app. Se monta una vez en los
+ * providers; cualquier capa (incluido el interceptor HTTP) notifica con
+ * `notify()`, que escribe en el store.
+ *
+ * Cada notificación es un toast: el aviso del sistema del diseño (el `Alert`
+ * del tema) con su ícono de intención y el botón de cierre.
+ */
+export function NotificationHost() {
+  const notifications = useNotificationStore((state) => state.notifications)
+  const dismiss = useNotificationStore((state) => state.dismiss)
+
+  // Se muestra una a la vez: apiladas se tapan entre sí y ninguna se lee.
+  const current = notifications[0]
+  if (!current) return null
+
+  return (
+    <Snackbar
+      key={current.id}
+      open
+      autoHideDuration={AUTO_HIDE_MS}
+      // El Snackbar también avisa `clickaway`: cualquier clic en la pantalla
+      // cerraba el toast antes de que se pudiera leer. Se va solo por tiempo,
+      // por Esc o por su X.
+      onClose={(_, reason) => {
+        if (reason !== 'clickaway') dismiss(current.id)
+      }}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+    >
+      <Toast severity={current.severity} onClose={() => dismiss(current.id)}>
+        {current.message}
+      </Toast>
+    </Snackbar>
+  )
+}
diff --git a/src/shared/components/NotificationHost/index.ts b/src/shared/components/NotificationHost/index.ts
new file mode 100644
index 0000000..40f8fed
--- /dev/null
+++ b/src/shared/components/NotificationHost/index.ts
@@ -0,0 +1 @@
+export { NotificationHost } from './NotificationHost'
diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
index 53e9d32..9d84220 100644
--- a/src/shared/components/index.ts
+++ b/src/shared/components/index.ts
@@ -47,3 +47,14 @@ export type {
 } from './DataTable'
 export { FieldLabel, FieldRoot, FullRow, LabeledField } from './LabeledField'
 export type { LabeledFieldProps } from './LabeledField'
+export { ConfirmDialog } from './ConfirmDialog'
+export type { ConfirmDialogProps, ConfirmDialogTone } from './ConfirmDialog'
+export {
+  ModalBody,
+  ModalFooter,
+  ModalFooterActions,
+  ModalFooterNote,
+  ModalForm,
+  ModalFrame,
+} from './ModalFrame'
+export type { ModalFrameProps, ModalSize } from './ModalFrame'