apps/web/src/settings/settings-layout.tsx

@@ -24,13 +24,13 @@ export const SettingsLayout = ({ sections }: SettingsLayoutProps) => {
 
   return (
     <RdxPageFrame>
-      <RdxPageContainer width="full">
+      <RdxPageContainer className="space-y-6" width="full">
-        <RdxPageContent spacing="default">
         <RdxPageHeader
           description={t("web.settings.description")}
           title={t("web.settings.title")}
         />
 
+        <RdxPageContent spacing="default">
           <div className="grid gap-6 lg:grid-cols-[18rem_minmax(0,1fr)]">
             <aside className="min-w-0 lg:sticky lg:top-6 lg:self-start">
               <SettingsNavigation sections={sections} />

docs/frontend/frontend-architecture.md

@@ -82,7 +82,7 @@ RdxPageContent
 → composición de los hijos principales
 ```
 
-Regla: Las Pages no deben reconstruir estas responsabilidades con wrappers HTML locales. En Create/Update, Detail/Show y LIST, la composición canónica es RdxPageFrame → RdxPageContainer → RdxPageContent: errores, alertas, secciones semánticas y contenido funcional son hijos directos de RdxPageContent; los dialogs son hermanos del frame; RdxPanel se reserva para secciones semánticas reales.
+Regla: Las Pages no deben reconstruir estas responsabilidades con wrappers HTML locales. En Create/Update y Detail/Show, la composición canónica es RdxPageFrame → RdxPageContainer → RdxPageContent: errores, alertas, secciones semánticas y contenido funcional son hijos directos de RdxPageContent; los dialogs son hermanos del frame; RdxPanel se reserva para secciones semánticas reales.
 
 ## 6. Identity y sesión
 

docs/frontend/ui-patterns.md

@@ -22,18 +22,6 @@ Los componentes aquí citados se definen en `ui-system.md`; este documento expli
 </RdxPageFrame>
 ```
 
-El error inicial bloqueante conserva el mismo shell:
-
-```tsx
-<RdxPageFrame>
-  <RdxPageContainer width="content">
-    <RdxPageContent>
-      <PageErrorState />
-    </RdxPageContent>
-  </RdxPageContainer>
-</RdxPageFrame>
-```
-
 - El CTA de creación permanece durante loading, empty y errores de refresh; puede desaparecer ante error inicial bloqueante.
 - Búsqueda, filtros y controles viven en `DataTable.topContent`.
 - TanStack Query conserva los datos remotos y la paginación server-side.
@@ -41,7 +29,6 @@ El error inicial bloqueante conserva el mismo shell:
 - No se calculan contadores globales a partir de una página parcial.
 - El click de fila recibe la fila; la página/controller usa explícitamente `row.id`.
 - Una vista de composición de dominio puede encapsular el shell si permanece pura.
-- Los listados no reconstruyen con HTML local las responsabilidades de Frame, Container o Content. Search, filtros, tabs, tabla y paginación son contenido funcional de `RdxPageContent`; el scroll interno de una tabla o grid es legítimo y no sustituye el scroll de página.
 
 El controller de página concentra URL, filtros, consulta, estados y navegación. La Page define columnas y conecta callbacks; no reproduce reglas de dominio.
 

docs/frontend/ui-system.md

@@ -152,8 +152,6 @@ Excepción: un detalle documental puede configurar el contenido del frame con `o
 Los avisos, errores inline, secciones y contenido funcional deben ser hijos directos cuando pertenezcan al mismo nivel visual.
 `RdxPanel` no es un wrapper genérico. Se usa únicamente cuando existe una sección con identidad visual o semántica propia.
 
-En LIST, toolbar, búsqueda, filtros, tabs, tabla/lista/grid y paginación son bloques funcionales de `RdxPageContent`. Una tabla no implica un `RdxPanel`, y su scroll horizontal, virtualizado o interno es legítimo: no sustituye el scroll estructural de `RdxPageFrame`. No se anidan containers ni contents para filtros, alertas o paginación.
-
 ```tsx
 <RdxPageContent>
   {error ? <ErrorAlert /> : null}

modules/audit/src/web/list/ui/audit-page.tsx

@@ -36,7 +36,6 @@ export const AuditPage = () => {
     return (
       <RdxPageFrame>
         <RdxPageContainer width="content">
-          <RdxPageContent>
           <PageErrorState
             description={t("audit.error.load")}
             primaryAction={{
@@ -47,7 +46,6 @@ export const AuditPage = () => {
             title={t("audit.error.load")}
             variant="unknown"
           />
-          </RdxPageContent>
         </RdxPageContainer>
       </RdxPageFrame>
     );
@@ -98,9 +96,9 @@ export const AuditPage = () => {
               )}
             </div>
           </div>
+          <AuditEntrySheet entryId={controller.entry} onClose={controller.closeEntry} />
         </RdxPageContent>
       </RdxPageContainer>
-      <AuditEntrySheet entryId={controller.entry} onClose={controller.closeEntry} />
     </RdxPageFrame>
   );
 };

modules/catalogs/src/web/settings/payment-methods/ui/pages/payment-methods-settings-page.tsx

@@ -1,5 +1,5 @@
 import { PageErrorState } from "@erp/core/components";
-import { RdxBadge } from "@repo/rdx-ui/components";
+import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components";
 import {
   Button,
   Card,
@@ -30,6 +30,8 @@ export const PaymentMethodsSettingsPage = () => {
 
   if (ctrl.pageError) {
     return (
+      <RdxPageContainer width="full">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={ctrl.pageError.description}
             primaryAction={
@@ -47,6 +49,8 @@ export const PaymentMethodsSettingsPage = () => {
             title={ctrl.pageError.title}
             variant={ctrl.pageError.variant}
           />
+        </div>
+      </RdxPageContainer>
     );
   }
 

modules/catalogs/src/web/settings/payment-terms/ui/pages/payment-terms-settings-page.tsx

@@ -1,4 +1,5 @@
 import { PageErrorState } from "@erp/core/components";
+import { RdxPageContainer } from "@repo/rdx-ui/components";
 import {
   Button,
   Card,
@@ -37,6 +38,8 @@ export const PaymentTermsSettingsPage = () => {
 
   if (ctrl.pageError) {
     return (
+      <RdxPageContainer width="full">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={ctrl.pageError.description}
             primaryAction={
@@ -54,6 +57,8 @@ export const PaymentTermsSettingsPage = () => {
             title={ctrl.pageError.title}
             variant={ctrl.pageError.variant}
           />
+        </div>
+      </RdxPageContainer>
     );
   }
 

modules/catalogs/src/web/settings/tax-regimes/ui/pages/tax-regimes-settings-page.tsx

@@ -1,5 +1,5 @@
 import { PageErrorState } from "@erp/core/components";
-import { RdxBadge } from "@repo/rdx-ui/components";
+import { RdxBadge, RdxPageContainer } from "@repo/rdx-ui/components";
 import { Button, Card, CardContent, CardHeader } from "@repo/shadcn-ui/components";
 import { cn } from "@repo/shadcn-ui/lib/utils";
 import { CircleIcon, LandmarkIcon, PlusIcon } from "lucide-react";
@@ -23,6 +23,8 @@ export const TaxRegimesSettingsPage = () => {
 
   if (ctrl.pageError) {
     return (
+      <RdxPageContainer width="full">
+        <div className="mx-auto w-full max-w-3xl">
           <PageErrorState
             description={ctrl.pageError.description}
             primaryAction={
@@ -40,6 +42,8 @@ export const TaxRegimesSettingsPage = () => {
             title={ctrl.pageError.title}
             variant={ctrl.pageError.variant}
           />
+        </div>
+      </RdxPageContainer>
     );
   }
 

modules/customer-invoices/src/web/issued-invoices/list/ui/components/issued-invoices-status-segmented-filter.tsx

@@ -127,8 +127,7 @@ export const IssuedInvoicesStatusSegmentedFilter = ({
 }: IssuedInvoicesStatusSegmentedFilterProps) => {
   const { t } = useTranslation();
 
-  const handleValueChange = (nextValues: string[]) => {
+  const handleValueChange = (nextValue: string) => {
-    const nextValue = nextValues[0];
     if (!(nextValue && isIssuedInvoiceStatusFilter(nextValue)) || nextValue === value) {
       return;
     }
@@ -139,22 +138,21 @@ export const IssuedInvoicesStatusSegmentedFilter = ({
   return (
     <ToggleGroup
       aria-label={t("pages.issued_invoices.list.filters.status.label", "Filtrar por estado")}
-      className="flex w-full flex-wrap justify-start gap-4"
+      className="flex w-full flex-wrap justify-start gap-1"
       disabled={disabled}
-      multiple={false}
       onValueChange={handleValueChange}
       size="sm"
       spacing={1}
-      value={[value]}
+      type="single"
+      value={value}
       variant="outline"
     >
       {ISSUED_INVOICE_STATUS_FILTER_OPTIONS.map((option) => (
         <ToggleGroupItem
           className={cn(
-            "group h-auto min-w-fit rounded-md border-transparent px-3 py-2 text-xs sm:text-sm shadow-none transition-colors",
+            "group h-auto min-w-fit rounded-full border-transparent px-3 py-2 text-xs shadow-none transition-colors sm:text-sm",
             "text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground",
             "data-[state=on]:shadow-none",
-
             option.activeClassName
           )}
           key={option.value}
@@ -166,7 +164,7 @@ export const IssuedInvoicesStatusSegmentedFilter = ({
           value={option.value}
         >
           <span className="flex items-center gap-2">
-            {option.icon ? <option.icon className="size-4" /> : null}
+            {option.icon ? <option.icon className="size-3.5" /> : null}
             <span>
               {t(
                 `catalog.issued_invoices.status.${option.value.toLowerCase()}.label`,

modules/customer-invoices/src/web/issued-invoices/list/ui/pages/list-issued-invoices-page.tsx

@@ -3,7 +3,6 @@ import { useReturnToNavigation } from "@erp/core/hooks";
 import {
   LogoVerifactu,
   RdxPageContainer,
-  RdxPageContent,
   RdxPageFrame,
   RdxPageHeader,
 } from "@repo/rdx-ui/components";
@@ -66,7 +65,6 @@ export const ListIssuedInvoicesPage = () => {
     return (
       <RdxPageFrame>
         <RdxPageContainer width="content">
-          <RdxPageContent>
           <PageErrorState
             description={pageError.description}
             primaryAction={
@@ -95,7 +93,6 @@ export const ListIssuedInvoicesPage = () => {
             title={pageError.title}
             variant={pageError.variant}
           />
-          </RdxPageContent>
         </RdxPageContainer>
       </RdxPageFrame>
     );
@@ -103,8 +100,7 @@ export const ListIssuedInvoicesPage = () => {
 
   return (
     <RdxPageFrame>
-      <RdxPageContainer width="full">
+      <RdxPageContainer className="space-y-6" width="full">
-        <RdxPageContent>
         <RdxPageHeader
           actions={
             <Button
@@ -120,7 +116,7 @@ export const ListIssuedInvoicesPage = () => {
           title={t("pages.issued_invoices.list.title")}
         />
 
-          <div className="space-y-4">
+        <div className="mx-auto w-full space-y-4">
           {hasRefreshError && refreshError ? (
             <ErrorAlert message={refreshError.message} title={refreshError.title} />
           ) : null}
@@ -176,7 +172,6 @@ export const ListIssuedInvoicesPage = () => {
 
           {listCtrl.data.totalItems === 0 ? <IssuedInvoicesEmptyGrid /> : null}
         </div>
-        </RdxPageContent>
       </RdxPageContainer>
     </RdxPageFrame>
   );

modules/customer-invoices/src/web/proformas/list/ui/components/proforma-status-segmented-filter.tsx

@@ -11,8 +11,7 @@ import {
 import type { ElementType } from "react";
 
 import { useTranslation } from "../../../../i18n";
-import { getProformaStatusDisplayIcon } from "../../../change-status/helpers";
+import type { ProformaStatusCounts } from "../../../shared";
-import type { ProformaStatus, ProformaStatusCounts } from "../../../shared";
 import type { ProformaListStatusFilter } from "../../types/proforma-list-filters";
 
 export type ProformaStatusFilter = ProformaListStatusFilter;
@@ -93,9 +92,7 @@ export const ProformaStatusSegmentedFilter = ({
 }: ProformaStatusSegmentedFilterProps) => {
   const { t } = useTranslation();
 
-  const handleValueChange = (nextValues: string[]) => {
+  const handleValueChange = (nextValue: string) => {
-    const nextValue = nextValues[0];
-
     if (!(nextValue && isProformaStatusFilter(nextValue)) || nextValue === value) {
       return;
     }
@@ -106,28 +103,21 @@ export const ProformaStatusSegmentedFilter = ({
   return (
     <ToggleGroup
       aria-label={t("pages.proformas.list.filters.status.label")}
-      className="w-full flex-wrap justify-start gap-4"
+      className="w-full flex-wrap justify-start gap-1"
       disabled={disabled}
-      multiple={false}
       onValueChange={handleValueChange}
       size="sm"
       spacing={1}
-      value={[value]}
+      type="single"
+      value={value}
       variant="outline"
     >
-      {PROFORMA_STATUS_FILTER_OPTIONS.map((option) => {
+      {PROFORMA_STATUS_FILTER_OPTIONS.map((option) => (
-        const normalizedStatus = option.value.toLowerCase() as ProformaStatus;
-        const Icon = getProformaStatusDisplayIcon(normalizedStatus);
-
-        const disabled =
-          "text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground";
-
-        return (
         <ToggleGroupItem
           className={cn(
-              "group h-auto min-w-fit rounded-md border-none px-3 py-2 text-xs sm:text-sm shadow-none transition-colors",
+            "group h-auto min-w-fit rounded-md border-transparent px-3 py-2 text-xs sm:text-sm shadow-none transition-colors",
+            "text-muted-foreground hover:border-border hover:bg-muted/60 hover:text-foreground",
             "data-[state=on]:shadow-none",
-              disabled,
             option.activeClassName
           )}
           key={option.value}
@@ -139,7 +129,7 @@ export const ProformaStatusSegmentedFilter = ({
           value={option.value}
         >
           <span className="flex items-center gap-2">
-              {option.icon ? <option.icon className="size-4" /> : null}
+            {option.icon ? <option.icon className="size-3.5" /> : null}
             <span>{t(option.labelKey)}</span>
             <RdxBadge
               className={cn(
@@ -153,8 +143,7 @@ export const ProformaStatusSegmentedFilter = ({
             </RdxBadge>
           </span>
         </ToggleGroupItem>
-        );
+      ))}
-      })}
     </ToggleGroup>
   );
 };

modules/customer-invoices/src/web/proformas/list/ui/pages/list-proformas-page.tsx

@@ -1,11 +1,6 @@
 import { PageErrorState, SimpleSearchInput } from "@erp/core/components";
 import { useDataSource, useReturnToNavigation } from "@erp/core/hooks";
-import {
+import { type DataTableMeta, RdxPageContainer } from "@repo/rdx-ui/components";
-  type DataTableMeta,
-  RdxPageContainer,
-  RdxPageContent,
-  RdxPageFrame,
-} from "@repo/rdx-ui/components";
 import { showErrorToast, showSuccessToast } from "@repo/rdx-ui/helpers";
 import {
   Button,
@@ -463,9 +458,8 @@ const ScopedListProformasPage = ({ scope }: ScopedListProformasPageProps) => {
 
   if (pageError) {
     return (
-      <RdxPageFrame>
+      <RdxPageContainer width="full">
-        <RdxPageContainer width="content">
+        <div className="mx-auto w-full max-w-3xl">
-          <RdxPageContent>
           <PageErrorState
             description={pageError.description}
             primaryAction={
@@ -486,9 +480,8 @@ const ScopedListProformasPage = ({ scope }: ScopedListProformasPageProps) => {
             title={pageError.title}
             variant={pageError.variant}
           />
-          </RdxPageContent>
+        </div>
       </RdxPageContainer>
-      </RdxPageFrame>
     );
   }
 

modules/customer-invoices/src/web/proformas/list/ui/pages/scoped-list-proformas-page-view.tsx

@@ -46,9 +46,9 @@ export const ScopedListProformasPageView = ({
 
           {content}
         </RdxPageContent>
-      </RdxPageContainer>
 
         {dialogs}
+      </RdxPageContainer>
     </RdxPageFrame>
   );
 };

modules/customer-invoices/src/web/recurring-proformas/list/list-recurring-proformas-page.tsx

@@ -4,8 +4,6 @@ import {
   DataTableColumnHeader,
   RdxBadge,
   RdxPageContainer,
-  RdxPageContent,
-  RdxPageFrame,
   type RdxRowAction,
   RdxRowActions,
   SkeletonDataTable,
@@ -269,9 +267,8 @@ export const ListRecurringProformasPage = () => {
 
   if (hasBlockingError && pageError) {
     return (
-      <RdxPageFrame>
+      <RdxPageContainer width="full">
-        <RdxPageContainer width="content">
+        <div className="mx-auto w-full max-w-3xl">
-          <RdxPageContent>
           <PageErrorState
             description={pageError.description}
             primaryAction={{
@@ -282,9 +279,8 @@ export const ListRecurringProformasPage = () => {
             title={pageError.title}
             variant="unknown"
           />
-          </RdxPageContent>
+        </div>
       </RdxPageContainer>
-      </RdxPageFrame>
     );
   }
 

modules/customers/src/web/list/ui/pages/list-customers-page-view.tsx

@@ -46,9 +46,9 @@ export const ListCustomersPageView = ({
 
           {content}
         </RdxPageContent>
-      </RdxPageContainer>
 
         {dialogs}
+      </RdxPageContainer>
     </RdxPageFrame>
   );
 };

modules/customers/src/web/list/ui/pages/list-customers-page.tsx

@@ -1,6 +1,6 @@
 import { PageErrorState, SimpleSearchInput } from "@erp/core/components";
 import { useReturnToNavigation } from "@erp/core/hooks";
-import { RdxPageContainer, RdxPageContent, RdxPageFrame } from "@repo/rdx-ui/components";
+import { RdxPageContainer, RdxPageFrame } from "@repo/rdx-ui/components";
 import {
   Button,
   ResizableHandle,
@@ -93,7 +93,6 @@ export const ListCustomersPage = () => {
     return (
       <RdxPageFrame>
         <RdxPageContainer width="content">
-          <RdxPageContent>
           <PageErrorState
             description={pageError.description}
             primaryAction={
@@ -112,7 +111,6 @@ export const ListCustomersPage = () => {
             title={pageError.title}
             variant={pageError.variant}
           />
-          </RdxPageContent>
         </RdxPageContainer>
       </RdxPageFrame>
     );

modules/suppliers/src/web/list/ui/suppliers-list-page.tsx

@@ -39,7 +39,6 @@ export const SuppliersListPage = () => {
     return (
       <RdxPageFrame>
         <RdxPageContainer width="content">
-          <RdxPageContent>
           <PageErrorState
             description={t("list.error.description")}
             primaryAction={{
@@ -51,7 +50,6 @@ export const SuppliersListPage = () => {
             title={t("list.error.title")}
             variant="unknown"
           />
-          </RdxPageContent>
         </RdxPageContainer>
       </RdxPageFrame>
     );