From 454e68d5c8910fcaaaf706987a919a3a9aca4c30 Mon Sep 17 00:00:00 2001
From: David <darranz@rodax-software.com>
Date: Fri, 9 Oct 2026 21:44:42 +0200
Subject: [PATCH] =?UTF-8?q?Mejorar=20estilos=20de=20di=C3=A1logos=20y=20aj?=
 =?UTF-8?q?ustar=20el=20cuerpo=20del=20formulario=20para=20un=20enfoque=20?=
 =?UTF-8?q?m=C3=A1s=20accesible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/global.css                       | 21 +++++++++++++++++++
 docs/componentes-de-interfaz.md               |  2 ++
 .../rdx-ui/src/components/form-dialog.tsx     |  4 ++--
 packages/shadcn-ui/src/styles/globals.css     |  4 ++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/global.css b/apps/web/src/global.css
index bc98082..4d66669 100644
--- a/apps/web/src/global.css
+++ b/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);
+}
diff --git a/docs/componentes-de-interfaz.md b/docs/componentes-de-interfaz.md
index d5b454c..9132a63 100644
--- a/docs/componentes-de-interfaz.md
+++ b/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.
diff --git a/packages/rdx-ui/src/components/form-dialog.tsx b/packages/rdx-ui/src/components/form-dialog.tsx
index 41e1831..1766377 100644
--- a/packages/rdx-ui/src/components/form-dialog.tsx
+++ b/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>
   );
diff --git a/packages/shadcn-ui/src/styles/globals.css b/packages/shadcn-ui/src/styles/globals.css
index 0e57191..c23b7c4 100644
--- a/packages/shadcn-ui/src/styles/globals.css
+++ b/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;
+  }
 }
\ No newline at end of file