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 ( -
+
{children}
); 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