fix: [TESIS-132] keep the page wrapper padding when a screen passes sx

src/features/inventory/pages/InventoryPage.tsx

@@ -166,9 +166,12 @@ export function InventoryPage() {
 
   return (
     <PageWrapper sx={{ maxWidth: 1400 }}>
+      {/* `useFlexGap`: sin él `spacing` separa con `margin-left` y pisa el
+          `ml: 'auto'` que manda las acciones a la derecha (TESIS-132). */}
       <Stack
         direction={{ xs: 'column', md: 'row' }}
         spacing={2}
+        useFlexGap
         sx={{ alignItems: { md: 'flex-start' }, mb: 3 }}
       >
         <Box>

src/features/orders/pages/NewOrderPage.tsx

@@ -121,7 +121,9 @@ export function NewOrderPage() {
           weight={formatWeight(draftWeight(items))}
         />
 
-        <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+        {/* `useFlexGap`: sin él `spacing` separa con `margin-left` y pisa el
+            `ml: 'auto'` que manda el botón de avanzar a la derecha (TESIS-132). */}
+        <Stack direction="row" spacing={2} useFlexGap sx={{ alignItems: 'center' }}>
           <Button variant="text" color="neutral" startIcon={<CloseIcon />} onClick={cancel}>
             {wizard.cancel}
           </Button>

src/features/orders/pages/OrdersPage.tsx

@@ -92,9 +92,12 @@ export function OrdersPage() {
 
   return (
     <PageWrapper sx={{ maxWidth: 1400 }}>
+      {/* `useFlexGap`: sin él `spacing` separa con `margin-left` y pisa el
+          `ml: 'auto'` que manda las acciones a la derecha (TESIS-132). */}
       <Stack
         direction={{ xs: 'column', md: 'row' }}
         spacing={2}
+        useFlexGap
         sx={{ alignItems: { md: 'flex-start' }, mb: 3 }}
       >
         <Box>

src/features/orders/pages/ShippingStepPage.tsx

@@ -151,7 +151,9 @@ export function ShippingStepPage() {
           provincesError={provinces.isError}
         />
 
-        <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+        {/* `useFlexGap`: sin él `spacing` separa con `margin-left` y pisa el
+            `ml: 'auto'` que manda el botón de avanzar a la derecha (TESIS-132). */}
+        <Stack direction="row" spacing={2} useFlexGap sx={{ alignItems: 'center' }}>
           <Button variant="outlined" startIcon={<ArrowBackIcon />} onClick={back}>
             {shipping.back}
           </Button>

src/shared/components/PageWrapper.test.tsx

@@ -0,0 +1,46 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithTheme } from '../../test/renderWithTheme'
+
+import { PageWrapper } from './PageWrapper'
+
+describe('PageWrapper', () => {
+  it('centers the page and caps its width by default', () => {
+    renderWithTheme(<PageWrapper>Contenido</PageWrapper>)
+
+    expect(screen.getByRole('main')).toHaveStyle({
+      maxWidth: '1200px',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      width: '100%',
+    })
+  })
+
+  // Las pantallas anchas le pasan `sx={{ maxWidth: 1400 }}`. Antes ese `sx`
+  // reemplazaba al base entero y la página quedaba sin padding ni centrado.
+  // Se afirma el centrado y no el padding: el padding va en un media query con
+  // `var(--mui-spacing)`, y jsdom no resuelve ninguno de los dos.
+  it('keeps the base styles when the caller overrides one of them', () => {
+    renderWithTheme(<PageWrapper sx={{ maxWidth: 1400 }}>Contenido</PageWrapper>)
+
+    expect(screen.getByRole('main')).toHaveStyle({
+      maxWidth: '1400px',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      width: '100%',
+    })
+  })
+
+  it('accepts an array of styles like any other sx', () => {
+    renderWithTheme(
+      <PageWrapper sx={[{ maxWidth: 1400 }, { minHeight: '100%' }]}>Contenido</PageWrapper>,
+    )
+
+    expect(screen.getByRole('main')).toHaveStyle({
+      maxWidth: '1400px',
+      marginLeft: 'auto',
+      minHeight: '100%',
+    })
+  })
+})

src/shared/components/PageWrapper.tsx

@@ -5,17 +5,23 @@ interface PageWrapperProps extends BoxProps {
   children: ReactNode
 }
 
-export function PageWrapper({ children, ...props }: PageWrapperProps) {
+export function PageWrapper({ children, sx, ...props }: PageWrapperProps) {
   return (
     <Box
       component="main"
-      sx={{
-        p: { xs: 2, md: 3 },
-        maxWidth: 1200,
-        mx: 'auto',
-        width: '100%',
-      }}
       {...props}
+      // El `sx` de quien lo usa se suma al base en vez de reemplazarlo: con un
+      // spread, `sx={{ maxWidth: 1400 }}` borraba el padding y el centrado
+      // (TESIS-132).
+      sx={[
+        {
+          p: { xs: 2, md: 3 },
+          maxWidth: 1200,
+          mx: 'auto',
+          width: '100%',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       {children}
     </Box>