Mejorar estilos de diálogos y ajustar el cuerpo del formulario para un enfoque más accesible

apps/web/src/global.css

@@ -83,3 +83,24 @@
     text-decoration-line: none;
   }
 }
+
+/* Los diálogos necesitan separarse visualmente del fondo y de la capa de
+   superposición sin depender de una variante concreta de formulario. */
+[data-slot="dialog-content"] {
+  box-shadow:
+    0 18px 45px rgb(12 40 80 / 16%),
+    0 4px 12px rgb(12 40 80 / 10%);
+}
+
+/* El diálogo activo necesita un límite inequívoco cuando aparece sobre otro. */
+[data-slot="dialog-content"] {
+  border: 1px solid color-mix(in oklch, var(--foreground) 1%, var(--border));
+  box-shadow:
+    0 24px 60px rgb(12 40 80 / 24%),
+    0 8px 18px rgb(12 40 80 / 14%),
+    0 0 0 1px rgb(12 40 80 / 8%);
+}
+
+[data-slot="dialog-content"] [data-slot="dialog-header"] {
+  background-color: var(--popover);
+}

docs/componentes-de-interfaz.md

@@ -315,3 +315,5 @@ La ficha lateral de activos utiliza un ancho adaptable entre 320 y 400 px, accio
 Los enlaces de contenido usan `app-link`: color semántico `primary`, cursor de mano, subrayado al pasar el puntero y foco visible por teclado. `BrowserLink` lo incorpora de forma predeterminada, conservando la navegación interna, los clics modificados, destinos externos y descargas. Los botones que presentan nombres navegables o «Ver todos» comparten este estilo sin alterar sus callbacks. Los controles deshabilitados no muestran cursor de enlace ni subrayado. La navegación lateral y los enlaces presentados como botones conservan los colores de su contexto para mantener contraste; las acciones de guardar, editar o cancelar mantienen su presentación de botón.
 
 En el menú de secciones de una compañía, los elementos utilizan el color normal de texto y solo destacan su texto al pasar el puntero. Se mantienen el cursor de mano, el foco por teclado y el indicador de la sección actual. Esta excepción no afecta a enlaces dentro de listados, fichas o bloques del dashboard.
+
+El cuerpo desplazable `FormBody` reserva 4 px interiores en ambos laterales y al inicio para el anillo exterior de foco (3 px). No debe eliminarse ese espacio: `overflow-y-auto` también recorta horizontalmente y produciría un foco asimétrico en campos pegados al borde. Se conserva el scroll y las acciones fijas.

packages/rdx-ui/src/components/form-dialog.tsx

@@ -77,10 +77,10 @@ export function FormActions({ children }: { children: ReactNode }) {
   );
 }
 
-/** El cuerpo se desplaza dentro del formulario; las acciones conservan su submit nativo. */
+/** El cuerpo reserva espacio simétrico para que el scroll no recorte el anillo de foco. */
 export function FormBody({ children }: { children: ReactNode }) {
   return (
-    <div className="min-h-0 flex-1 space-y-5 overflow-y-auto pb-5 pr-1" data-slot="form-body">
+    <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-1 pt-1 pb-5" data-slot="form-body">
       {children}
     </div>
   );

packages/shadcn-ui/src/styles/globals.css

@@ -180,4 +180,8 @@
     @apply bg-background text-foreground;
     letter-spacing: var(--tracking-normal);
   }
+
+  button:not(:disabled), [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 }