Sistema de diseño del EGD
Catálogo de componentes
Componentes en revisión: botones, badges, tablas con selector de columnas, tooltips, diálogos, alertas flotantes y gestión de sesión. Usa Tab para comprobar el foco y cambia la paleta y el modo para revisar las seis combinaciones.
Badges de estado
Soft es el uso habitual en tablas; Solid destaca un caso puntual; Outline reduce el peso visual sobre una superficie comprobada. El texto identifica el estado además del color.
Soft · predeterminado
Solid · énfasis puntual
Outline · menor peso
Tamaños e iconos opcionales
Texto extenso en una sola línea (...)
Las etiquetas no quiebran en varias líneas. Si el espacio es reducido, truncan con puntos suspensivos (...) y muestran el texto completo en tooltip y al ensanchar columnas.
Tabla de ejemplo
Haz clic en una fila para seleccionarlaVarios estados con una anatomía uniforme, hover azul clarito al pasar el cursor y selección destacada.
| Documento | Estado | Detalle |
|---|---|---|
| EXP-001 | Completado | Trámite finalizado |
| EXP-002 | En proceso | En curso |
| EXP-003 | Pendiente | Aún sin iniciar |
| EXP-004 | Requiere revisión | Necesita atención |
| EXP-005 | Fallido | Operación fallida |
Cinta de estado
Cinta diagonal pequeña en la esquina de la tarjeta de un documento, solo para su estado final: Archivado y Anulado. Es el componente StatusRibbon; cámbiala de tema con el selector de arriba para ver ambos modos.
Archivado
Documento recibido: la copia de tu oficina está archivada.
- Tipo de documento
- Oficio
- Fecha de emisión
- 22/10/2026, 04:13 p. m.
Anulado
Documento recibido o formulario del autor: el documento fue anulado.
- Tipo de documento
- Oficio
- Fecha de emisión
- 22/10/2026, 04:13 p. m.
Sin cinta
Cualquier otro estado: se muestra con su insignia, sin cinta.
- Tipo de documento
- Oficio
- Fecha de emisión
- 22/10/2026, 04:13 p. m.
Cuándo se usa
| Estado | Cinta | Fuente o motivo |
|---|---|---|
| Archivado | Sí, neutra | Estado de la copia de la oficina, en «Documento recibido» |
| Anulado | Sí, de error | Estado del documento: «Documento recibido» y formulario del autor |
| No leído, Recibido, Atendido, Observado | No | Ya tienen su insignia; la cinta se reserva para el cierre del documento |
| En proyecto, Para despacho, Emitido | No | Se muestran en el recorrido de estado del formulario |
Reglas
- Solo para estados finales: Archivado y Anulado. Una cinta en cada estado compite con las acciones y pierde fuerza donde de verdad cierra el documento.
- Pequeña y suave: banda de 104 px con texto de 12 px en tipo oración («Archivado», no «ARCHIVADO»), sin sombra, dentro de una esquina de 72 px.
- La tarjeta es
relativey reserva su esquina (pr-16en su primera fila) para que botones y textos no queden bajo la cinta. - No recibe clics y es decorativa para los lectores de pantalla (
aria-hidden): el estado debe estar escrito en otro lugar de la pantalla, con el mismo nombre. - Si la pantalla ya tenía una insignia del mismo estado en su cabecera, se oculta mientras hay cinta; con los estados sin cinta se mantiene, en tipo oración.
- «Archivado» es de cada oficina destinataria, no del documento: no se muestra en el formulario de quien emitió.
Iconos por tipo de archivo
El icono del botón «Ver» de los anexos depende del tipo de archivo. Elige un formato para ver qué icono recibe.
Tipos de archivo
| Icono | Tipo | Archivos |
|---|---|---|
| Documento de texto | DOCDOCXODTRTFTXT | |
| Hoja de cálculo | XLSXLSXODSCSV | |
| Imagen | JPGJPEGPNGGIFWEBPBMPTIFTIFF | |
| Presentación | PPTPPTXODP | |
| Archivo comprimido | ZIPRAR7Z | |
| Otro tipo de archivo | Cualquier otro formato |
Probar un formato
Elige un formato
Elige un formato para ver el tipo y el icono que recibe un archivo con esa extensión.
Reglas
- El botón «Ver» de cada anexo lleva el icono de su tipo: dice qué se va a abrir. Un PDF lleva el icono de PDF, como toda acción que abre un PDF.
- Se detecta por la última extensión del nombre real del archivo, sin distinguir mayúsculas («Informe técnico 012-2026.DOCX» es un documento de texto). Si el nombre no sirve, se usa el tipo MIME; sin ninguno de los dos, el icono de archivo genérico.
- En el catálogo, los formatos se muestran como etiquetas sin punto (PDF, DOCX…) y la prueba se hace eligiendo el formato de una lista, sin escribir nada: quien usa el catálogo no necesita conocer ni escribir extensiones. El sistema sigue detectando por la extensión real.
- Sin color: el tipo se distingue por la forma del icono, no por un tono. El nombre accesible del botón sigue siendo «Ver nombre-del-archivo» y el tooltip, «Ver».
- Son iconos de Material Symbols (documento, tabla, imagen…), no los logos de Word o Excel: los logos de marca no forman parte del sistema.
- Una sola función para todas las listas de anexos:
fileTypeOfensrc/lib/file-type.ts(Cargar anexos, Reportes y Mesa de Partes).
Barra de acciones de un documento
Botones de la tarjeta de un documento (formulario de emisión y «Documento recibido»). Pasa el cursor o enfoca los botones apagados y con insignia para ver sus tooltips.
Estados
De izquierda a derecha: paso que toca, normal, con elementos, apagado con motivo, en curso y de peligro.
Reglas
- Es la barra de la tarjeta de un documento: el formulario de emisión y «Documento recibido» usan los mismos botones (
Action,src/components/user/toolbar-action.tsx), con el alto compacto de 36 px y iconos de 16 px. - El botón de color (
primary) es el paso que toca; solo uno por barra. Los demás son de contorno. - Un botón que todavía no se puede usar queda apagado (borde discontinuo,
reason): sigue siendo enfocable y su motivo sale en el tooltip y se anuncia como descripción. No se oculta, para que la barra no cambie de sitio. - Una acción en curso muestra el indicador de carga en el icono y no se puede repetir (
busy). Con elementos (items), el botón lleva una insignia con el número y su tooltip los lista: «Ver anexos» es siempreViewAttachmentsAction(lectura conuseAttachmentNames), el mismo en el formulario, «Documento recibido», la revisión de visto bueno y Mesa de partes: no se reimplementa por pantalla. - Las acciones que destruyen o deshacen usan el contorno de peligro (
DANGER_CLS) o, si son poco frecuentes, el menú ⋮ junto al título (Anular), con el icono de copiar el número (CopyNumberButton) y el recorrido de estado en flechas (StatusSteps) a la derecha de la fila del título. En pantallas angostas queda solo el icono y el nombre sigue disponible para los lectores de pantalla (max-sm:sr-only, nohidden).
Cabecera de un documento
Ruta, título con copiar y menú ⋮, recorrido de estado y acciones, igual en el formulario de emisión, «Documento recibido», la revisión de visto bueno y Mesa de partes. Pasa el cursor o enfoca «Ver anexos» para ver su tooltip.
Con anexos
Recorrido en curso; «Ver anexos» con la cantidad.
Informe N° 0000002-2026-MINJUSDH
- Pendiente
- Recibido
- Atendido
- Archivado
Archivado
Estado final: recorrido completo y cinta en la esquina.
Informe N° 0000002-2026-MINJUSDH
- Pendiente
- Recibido
- Archivado
Observado
Estado que pide acción: el paso actual va en rojo, con icono de error.
Informe N° 0000002-2026-MINJUSDH
- Pendiente
- Recibido
- Observado
Anulado
Estado final que cerró mal: rojo, con la cinta en la esquina.
Informe N° 0000002-2026-MINJUSDH
- Pendiente
- Anulado
«Ver anexos»: estados
Mismo botón y mismas reglas en todas las pantallas.
Con anexos propios
3 anexos: informe.pdf, cuadro.xlsx, foto.jpgCargando o sin lectura
Sin anexos propios, con referencias
Sin anexos propios. Clic para ver los de las referenciasSin anexos ni referencias
Este documento no tiene anexos ni referencias
Logo institucionalReglas
- La cabecera de un documento es una tarjeta (
sgd-panel) con dos zonas separadas por una línea: arriba, la ruta, el título con sus iconos y el recorrido de estado a la derecha; debajo, las acciones (Action). La usan el formulario de emisión, «Documento recibido», la revisión de visto bueno y la edición de Mesa de partes. - La ruta reemplaza al botón «Volver»: el primer tramo es el enlace a la bandeja de origen y el último, la pantalla actual (
aria-current="page"). - El título es
Tipo N° número(h1de 16 px, recortado si no cabe). A su derecha, el icono de copiar el número (CopyNumberButton: avisa «Número copiado» y muestra una marca un instante) y, solo cuando hay algo que anular o deshacer, el menú ⋮ con Anular (sgd-option-danger). Anular nunca va como botón de la fila. - El recorrido de estado (
StatusSteps) va a la derecha de la fila del título. Pasos «hecho» (verde, con marca), «actual» (de color,aria-current="step"), «pendiente» (gris) y «alerta» (rojo, con icono de error): el paso actual es de alerta cuando el estado pide acción o cerró mal (Observado, Anulado), porque quien ve el documento debe levantar la observación o saber que ya no sigue. El estado no depende solo del color: lleva marca o icono y el nombre. Cada pantalla define sus pasos con sus propios estados; en pantallas angostas se desplaza dentro de su contenedor (enfocable con teclado). - Un documento anulado o archivado añade además la cinta de estado (
StatusRibbon), y la primera fila reserva la esquina (pr-16). - «Ver anexos» es siempre
ViewAttachmentsActioncon los nombres que devuelveuseAttachmentNames(una sola lectura). Con anexos propios: insignia verde con la cantidad y tooltip que lista los nombres. Sin anexos propios pero con referencias queda habilitado, porque la ventana también muestra los anexos de los documentos referenciados. Solo se apaga sin anexos ni referencias. Mientras carga o si falla la lectura, el botón queda sin contador. - El logo institucional (
BrandLogo) es único para todas las cabeceras, redondo (círculo completo,rounded-full) y con aro fino; el radio se cambia solo en el componente.
Visor y verificador en celular
Distribución para leer un documento con una mano: cabecera compacta, documento a pantalla casi completa, barra inferior de cinco herramientas y hojas para Archivos y Más. Se parece a la organización de Adobe Acrobat móvil, pero solo con las funciones reales del visor. Especificación en docs/components/visor-movil.md.
0000002-2026-MINJUSDH-DMIN-SGEN-OGTI-ODSI
Verificado · MINJUS · 24/10/2026
Principal
Cabecera de 56 px, documento al ancho de la pantalla y barra de 60 px con cinco herramientas.
0000002-2026-MINJUSDH-DMIN-SGEN-OGTI-ODSI
Verificado · MINJUS · 24/10/2026
Archivos
Documento principal y 4 anexos
Documento
Documento principal
PDF · 26 KBEn lectura
Anexos (4)
Panel fotográfico.jpg
Imagen · 84 KBAbrir
Referidos 2026.xlsx
357 KB · Sin vista previa
Convenio marco.docx
27 KB · Sin vista previa
Archivos
Se abre sobre el documento sin cambiar de página; el icono de cada fila descarga solo ese archivo.
0000002-2026-MINJUSDH-DMIN-SGEN-OGTI-ODSI
Verificado · MINJUS · 24/10/2026
Más opciones
Zoom
Información de verificación
Código, entidad emisora y fecha
Firmas digitales
Quién firmó y si la firma es válida
Descargar este archivo
Documento principal · 26 KB
Cambiar a modo oscuro
Guía rápida
Recorrido por las zonas del visor
Más
Zoom, información, firmas, descarga del archivo, apariencia y guía: lo que no se usa a cada rato.
Reglas
- La lectura manda: cabecera de 56 px y barra de 60 px; sin franjas fijas de contador de páginas, aviso de firma, anexos ni texto legal. En horizontal (poca altura) la barra pasa a un riel a la derecha y la cabecera baja a 44 px.
- Cabecera: logo circular (
BrandLogo), número del documento y estado «Verificado · entidad · fecha». El título largo se recorta con puntos suspensivos y se abre completo con la flecha; tocar «Verificado» abre la hoja de verificación. Una sola acción: descargar el documento principal, como icono sin relleno (círculo de 44 px, icono de 24 px) para que no compita con el título. - Barra inferior: cinco herramientas con icono de 24 px arriba y etiqueta de 12 px completa abajo (Páginas, Buscar, Ajustar, Archivos con insignia de cantidad, Más). Nunca etiquetas cortadas («Pá…»): si no caben, sobra una herramienta.
- Zoom con botones, descarga del archivo, información, firmas, modo claro u oscuro con un solo icono y guía van en «Más»; el pellizco sigue acercando. Lo ocasional no ocupa la barra.
- Hojas inferiores con tirador, botón de cerrar y arrastre hacia abajo: el documento queda detrás con su página y su zoom. Una sola zona de desplazamiento a la vez y sin barras superpuestas.
- Archivos: documento principal marcado «En lectura», anexos con su peso, vista previa solo donde existe («Sin vista previa» si no), descarga individual de 44 px en cada fila y «Descargar todo (ZIP)» fijo al pie de la hoja, sin el recuento en el botón (la cabecera de la hoja ya lo dice).
- Áreas de pulsación de 44 px o más, separadas entre sí, con estado marcado visible; el espacio de los botones del teléfono queda reservado bajo la barra (
env(safe-area-inset-bottom)). - Solo funciones reales del visor: sin herramientas de edición, comentarios ni firma por parecerse a otros lectores de PDF.
Contador de caracteres
Solo aparece cuando el texto se acerca al límite. Escribe más de 80 caracteres en el campo de ejemplo (límite de 100) para verlo.
Reglas
- El contador no se muestra mientras el texto está lejos del límite: un «0/2000» permanente recarga cada campo. Aparece al llegar al 80 % del máximo, con icono y el texto «quedan N».
- Al llegar al máximo cambia a «límite alcanzado» con el icono de error. El estado no depende solo del color: lleva icono y texto.
- Solo en campos de texto largo (
Textarea) y conmultiline; los campos de una línea no llevan contador. El campo sigue limitando conmaxLength. - Los lectores de pantalla reciben el aviso (una región
role="status"siempre presente) solo al cruzar el 80 % y el 100 %, no con cada tecla. - Se usa con
FieldLabel counter(a la derecha de la etiqueta) o conCharCountersuelto; los campos de subrayado conshowCountsiguen la misma regla.
Dato de solo lectura
Filas de las tarjetas del formulario de emisión, «Documento recibido» y la revisión de visto bueno: ícono, etiqueta pequeña y valor.
Serie documental
063 — Desarrollo de Sistemas de Información
Expediente
063-2026-000001 — Sistema de gestión documental
N.º de emisión
0000123-2026-MINJUSDH-OPP
Asunto
Solicitud de opinión técnica sobre la propuesta de directiva de gestión documental
Número
Se genera al grabar
Estado
Observado
Reglas
- Un dato de solo lectura (
ReadOnlyData) lleva su ícono solo, en gris suave (text-muted-foreground, 18 px) y sin recuadro de color: la etiqueta ya dice qué es el dato y un recuadro tintado repetido en cada fila recarga la tarjeta. - El ícono conserva su hueco de 28 px, de modo que etiquetas y valores quedan alineados con el título de la tarjeta; es decorativo (
aria-hidden). - El color de marca se reserva para lo que se puede accionar (botones, enlaces, el paso actual del recorrido) y para un valor que se destaca (
mono: número de documento). - Las iniciales de una persona («Elaborado por») no son un ícono de dato: siguen en su avatar redondo tintado.
- El valor largo se ajusta a varias líneas (
multiline); un valor provisional («Se genera al grabar») va atenuado (muted).
Variantes
Una única primitiva Button. La jerarquía depende de la tarea, no de un color fijo.
Primario
Acción principal de la zona
Secundario de marca
Contorno y texto de marca
Terciario
Acción de texto sin contenedor
Ghost de marca
Acción discreta con superficie en hover
Enlace
Subrayado solo en el texto; icono direccional o externo; hover sobre todo el botón
Barra de estado
: paso actual resaltado (aria-current); pasos futuros deshabilitados; solo estados reales
Peligro
Verbo explícito e icono; reservar para acciones destructivas
Peligro en línea
Confirmar una acción menor y reversible dentro de una fila (p. ej. eliminar un favorito): enlace de peligro junto a «Cancelar»
Neutro
Texto de baja prioridad
Con icono
Icono Material Symbols Rounded de 18 px
Tamaños
40 px estándar; 36 px compacto; 44 px amplio
Estados
Las muestras señaladas como simulación permiten comparar estados sin mover el cursor. Los botones también responden realmente a hover y teclado.
Normal
Primario y contorno en reposo
Hover · simulación
Superficie tenue; sin desplazamiento ni salto de tamaño
Foco · simulación
Contorno de 2 px con separación; prueba también con Tab
Seleccionado
Marca y aria-pressed además del color
Deshabilitado
Atributo disabled real; no recibe foco ni ejecuta acción
Carga
aria-busy, bloqueo de clic y texto de progreso
Peligro
Semántica estable en las tres paletas
Sobre fondo de marca
Los botones inversos se usan solo sobre la superficie de identidad del tema. El panel conserva la misma estructura en claro y oscuro.
Acciones sobre superficie oscura
Tab muestra el contorno de foco. Los enlaces se mantienen subrayados.
Tooltips de iconos
Pasa el mouse o usa Tab. La flecha sigue al icono cuando el tooltip cambia de lado por falta de espacio; Escape lo cierra.
Los cuatro lados
Menú
Tabla con desbordamiento
| Documento de muestra |
Bordes y texto largo
Acerca la página a los bordes y prueba con un ancho móvil: el texto se ajusta y la flecha conserva su dirección.
Atajos de teclado
Mantén pulsada Alt para ver la letra de cada acción y pulsa Alt + letra para ejecutarla. El botón «Atajos» (Alt + I) abre la ayuda con la lista de la pantalla. Con un modal abierto solo cuentan las acciones del modal. Windows y Linux usan Alt (no actúa con AltGr, Ctrl ni Mayús); macOS usa Control, porque Option escribe caracteres y Cmd es del navegador.
Ninguna acción todavía.
Cada control declara su atajo con <Button shortcut="G"> y expone aria-keyshortcuts="Alt+G". Las insignias son solo ayuda visual (aria-hidden).
| Acción | Windows / Linux | macOS | Contexto |
|---|---|---|---|
| Ver las letras de los atajos | Alt | Control | Global (mantener el modificador) |
| Abrir la ayuda de atajos | Alt más I | Control más I | Global |
| Nuevo | Alt más N | Control más N | Barra de acciones (en macOS no actúa dentro de un campo de texto) |
| Guardar | Alt más G | Control más G | Barra de acciones |
| Firmar | Alt más R | Control más R | Barra de acciones |
| Cancelar | Alt más C | Control más C | Barra de acciones y diálogos |
| Cerrar un diálogo | Esc | Esc | Diálogos |
Dónde se usa en el sistema
Una letra por acción visible en cada pantalla; las mismas acciones usan la misma letra en todo el sistema. Anular y Eliminar no llevan atajo a propósito.
| Letra | Acción | SGD | Portal ciudadano |
|---|---|---|---|
| Alt más G | Grabar o actualizar | Formulario de documento (Grabar) · Revisión de visto bueno (Grabar) · Mesa de partes: registro (Grabar) y edición (Actualizar) · Todos los diálogos con formulario, también en administración (Guardar, Crear, Actualizar, Registrar, Aplicar, Agregar, Asignar, Enviar, Importar, Generar) | — |
| Alt más N | Nuevo | Emisión de documentos y Documentos en Proyecto (Nuevo) · Bandeja de Mesa de partes (Nuevo) · Páginas de administración (Nueva oficina, Nuevo rol, etc.) | Menú: Registrar documento |
| Alt más R | Generar, registrar o recibir | Formulario de documento (Generar) · Mesa de partes: edición (Registrar doc.) · Recepción (Recibir) | — |
| Alt más C | Cargar o cancelar | Formulario de documento (Cargar) · Mesa de partes: edición (Cargar Doc.) y registro (Cancelar) · Ventana de firma (Cancelar) · Todos los diálogos (Cancelar) | Buzón: Notificaciones |
| Alt más A | Abrir o ver el documento | Formulario de documento (Abrir / Ver Documento) · Revisión de visto bueno (Ver Documento) · Mesa de partes: bandeja (Ver Doc.) y edición (Ver PDF) | Buzón: Archivado |
| Alt más X | Anexos | Formulario de documento · Revisión de visto bueno · Mesa de partes: bandeja y edición | — |
| Alt más M | Firmar o visar (SGD) / Mis documentos (portal) | Formulario de documento (Firmar) · Revisión de visto bueno (Visar Doc.) · Ventana de firma (Firmar, Emitir) | Menú: Mis documentos |
| Alt más O | Observar / Más filtros | Revisión de visto bueno (Observar) · Tablas con filtros avanzados (Más filtros) | — |
| Alt más Q | Ir al buscador de la tabla | Todas las tablas con buscador · Filtros de las páginas de administración | — |
| Alt más U | Editar (bandeja) / Actualizar | Bandeja de Mesa de partes (Editar) | Casilla (Actualizar) |
| Alt más L | Detalle / Cargar más | Bandeja de Mesa de partes (Detalle) | Casilla (Cargar más) |
| Alt más Y | Grabar y enviar a verificar / Destacados | Mesa de partes: registro | Buzón: Destacados |
| Alt más I | Abrir la ayuda de atajos | Cabecera del Dashboard y de administración (Atajos) | — |
Diálogos y cierre
La superficie, el fondo atenuado y el pie son compartidos. Prueba el cierre permitido y el bloqueado con la X, Escape y el fondo exterior.
Normal
Icono neutro sin contorno ni fondo.
Hover
Superficie gris de 36 px dentro del área de 44 px.
Foco / pulsación
Un anillo del tema al enfocar o presionar.
El formulario largo pide confirmación al descartar cambios. En el bloqueado solo funciona la acción explícita.
Confirmación de «Regresar a proyecto»
Confirmación con texto condicional y breve: dice solo lo que se pierde en ese documento. Cada fila usa la misma función que el formulario de documentos (revertConfirmText); «Probar» abre la confirmación con ese texto. Cerrar equivale a cancelar.
| Estado | Vistos buenos | ¿Hay firma? | Qué dice | Probar |
|---|---|---|---|---|
| Para despacho | Ninguno | No | El documento volverá a ser editable. | |
| Para despacho | 1 | No | El documento volverá a ser editable. Se perderá el visto bueno. | |
| Para despacho | 3 | No | El documento volverá a ser editable. Se perderán los vistos buenos. | |
| Emitido | Ninguno | Sí | El documento volverá a ser editable. Se perderá la firma. | |
| Emitido | 1 | Sí | El documento volverá a ser editable. Se perderán el visto bueno y la firma. | |
| Emitido | 3 | Sí | El documento volverá a ser editable. Se perderán los vistos buenos y la firma. | |
| Para despacho PIDE | Ninguno | Sí | El documento volverá a ser editable y dejará de estar pendiente de envío por PIDE (saldrá de la Bandeja de Despacho de Interoperabilidad). Se perderá la firma. | |
| Para despacho PIDE | 1 | Sí | El documento volverá a ser editable y dejará de estar pendiente de envío por PIDE (saldrá de la Bandeja de Despacho de Interoperabilidad). Se perderán el visto bueno y la firma. | |
| Para despacho PIDE | 3 | Sí | El documento volverá a ser editable y dejará de estar pendiente de envío por PIDE (saldrá de la Bandeja de Despacho de Interoperabilidad). Se perderán los vistos buenos y la firma. |
Reglas
- Siempre: «El documento volverá a ser editable.» En «Para despacho PIDE» se añade que dejará de estar pendiente de envío por PIDE, que es un efecto real y distinto.
- Después, una sola frase y solo si se pierde algo: vistos buenos, firma o ambos. Sin vistos buenos y sin firma no se dice nada más.
- La firma existe desde «Emitido» (también «Para despacho PIDE» y «Observado»). En «Para despacho» todavía no hay firma, así que ahí solo pueden perderse vistos buenos.
- No se repite que se conserva el PDF original sin firmar: se acorta.
- El número se dice bien: «el visto bueno» con uno, «los vistos buenos» con varios.
Contenido corto
Altura adaptada sin scroll innecesario.
El texto ocupa el cuerpo del diálogo de forma natural. Los botones permanecen visibles y alineados, adaptándose a la altura requerida sin barras de desplazamiento forzadas.
Contenido largo
Crece en altura según el contenido.
El texto ocupa el cuerpo del diálogo de forma natural. Los botones permanecen visibles y alineados, adaptándose a la altura requerida sin barras de desplazamiento forzadas.
El texto ocupa el cuerpo del diálogo de forma natural. Los botones permanecen visibles y alineados, adaptándose a la altura requerida sin barras de desplazamiento forzadas.
El texto ocupa el cuerpo del diálogo de forma natural. Los botones permanecen visibles y alineados, adaptándose a la altura requerida sin barras de desplazamiento forzadas.
Alertas flotantes
Sileo es el proveedor compartido. Éxito e información duran 5 s; advertencia, 8 s; los errores permanecen hasta cerrar o resolver. Pasa el mouse o enfoca una alerta para pausar su tiempo.
Checkboxes del Design System
Geometría estandarizada más cuadradita (radio uniforme de 3 px), sin bordes ovalados o píldora. Comportamiento uniforme en tablas, modales y formularios.
Estados interactivos
Desmarcado, marcado e indeterminado (selección parcial en tablas).
Estados deshabilitados
Conservan la geometría cuadradita de 3 px con opacidad reducida.
Con etiqueta y descripción
Alineación vertical con la primera línea de texto.
Selectores desplegables
Todos comparten el contenedor de opciones (.sgd-listbox: fondo, borde, sombra) y las filas (.sgd-option: 40 px, marca de selección a la izquierda, resaltado de la opción activa). Los que buscan permiten escribir en el mismo campo, sin buscador dentro de la lista. Los menús de acciones conservan su comportamiento y usan las mismas filas sin columna de marca.
Selección simple (lista corta)
Selección con búsqueda (se escribe en el campo)
Selección múltiple y menú de acciones
Estado de la lista · Cargando
Estado de la lista · Sin resultados
Estado de la lista · Error
Campos de formulario y fechas
Los campos (Input, Textarea, Select, botón outline, casilla) usan el token --sgd-field-background: la superficie de la tarjeta en claro y el fondo hundido en oscuro, de modo que un campo vacío dentro de una tarjeta o un diálogo blancos no se confunde con uno deshabilitado (que usa --sgd-surface-muted). El campo de fecha acepta escritura manual y calendario.
Campos sobre tarjeta blanca
Campo de fecha (dd/mm/aaaa)
Escribe solo los números: las barras se ponen solas («25121990» → «25/12/1990»), un día 4-9 o un mes 2-9 se completa con cero y se validan día, mes, año (1900-2100), meses con menos días y bisiestos. El ícono abre el calendario (Alt + ↓ dentro del campo). Los desplegables de mes y año son los del sistema. Con texto incompleto o inválido el valor es vacío y el motivo se lee bajo el campo.
Valor: —
Valor: —
Control segmentado
SegmentedControl: de 2 a 4 opciones excluyentes que cambian un modo o una vista y se aplican al instante. La opción activa lleva contorno del color primario y fondo de acento; siempre hay una seleccionada. Flechas para moverse, Enter o Espacio para elegir. Para navegar entre páginas usa Tabs; para activar o desactivar algo, Switch.
Dos opciones
Seleccionado: excl
Con íconos
Seleccionado: list
Ancho completo y una opción deshabilitada
Grupo deshabilitado
Interruptor (Switch)
Switch: activa o desactiva una opción y el cambio se aplica al instante (o al guardar el formulario). Siempre lleva una etiqueta visible asociada con htmlFor. Tiene dos medidas: la normal (44 × 24 px) para formularios y filas, y size="sm"(28 × 16 px) para encabezados o filas compactas junto a texto pequeño; la pequeña conserva un área de clic de 24 px de alto. Para elegir entre vistas o modos usa SegmentedControl; para elegir varias opciones de una lista, Checkbox.
Medida normal (44 × 24 px)
Se guarda en este navegador. No incluye filas seleccionadas.
Estado: apagado · activo
Deshabilitado
Medida pequeña (28 × 16 px)
Para encabezados o filas compactas con texto de 11 a 12 px.
Estado: apagado · activo
Deshabilitado
Mapas de calor
CalendarHeatmap muestra la actividad por día (una columna por semana) y MatrixHeatmap cruza dos categorías (persona u oficina por semana, tipo por persona u oficina). La escala sale del color primario del tema (o del destructivo con tone="destructive", o del verde de éxito con tone="success") y funciona en claro y oscuro. El color nunca es lo único: cada celda se lee completa por teclado y lector de pantalla, y el valor aparece al instante en un globo (mouse o foco), sin la espera de 1 s de los tooltips de íconos. Con Tab se entra a la cuadrícula y las flechas recorren las celdas. Datos de ejemplo.
Alcance por rol (demostración)
- Trabajador: solo sus propias métricas.
- Jefatura: sus métricas, las de toda su oficina y las de cada persona de su oficina.
- Alta dirección: todas las oficinas, o una oficina concreta (con su personal) para decidir dónde reforzar y qué procesos mejorar.
Estos selectores son solo para esta demo: en el sistema el alcance lo decide el permiso del usuario en el servidor (report:read_own, report:read_office y uno institucional), nunca un control del cliente.
Actividad de la institución en el año (calendario)
16 068 documentos entre octubre de 2025 y septiembre de 2026. Los días con borde fino son no laborables. Haz clic en un día para seleccionarlo.
Documentos recibidos por oficina y semana
Con el valor dentro de cada celda.
Pendientes por oficina y antigüedad (tono de alerta)
Más rojo = más documentos sin atender. Decisión: a qué oficinas reforzar con personal o reasignar carga, y dónde pedir explicaciones por retrasos de más de 10 días. Haz clic en una fila para ver solo esa oficina.
Días promedio de atención por tipo de documento y oficina
Más rojo = más lento. Decisión: qué tipos de trámite rediseñar o simplificar, y qué oficinas no cumplen el plazo. Las celdas rayadas son «sin dato».
Mapas de calor en impacto ambiental
El ahorro de papel y de CO₂ se calcula de los documentos digitales y el mapa de calor lo reparte por día y por oficina o persona, con el tono verde de éxito (tone="success"). Mismo alcance por rol que el resto. Los factores son ilustrativos (5 hojas por documento, 5 g por hoja, 4,5 kg de CO₂ por kg de papel y 8 500 hojas por árbol): deben validarse y publicarse con su fuente antes de mostrarlos a la alta dirección.
Alcance por rol (demostración)
Trabajador: su propio ahorro. Jefatura: el suyo, el de su oficina y el de cada persona. Alta dirección: todas las oficinas o una concreta. En el sistema lo decide el permiso en el servidor, no un selector.
Ahorro de hojas de la institución por día
16 164 documentos digitales = 80 820 hojas · 404,1 kg de papel · 1 818,5 kg de CO₂ · 9,5 árboles equivalentes. Haz clic en un día para seleccionarlo.
Hojas ahorradas por oficina y mes
Más verde = más ahorro. Decisión: qué oficinas lideran la digitalización y dónde reforzar la capacitación o revisar por qué se sigue imprimiendo. Haz clic en una fila para ver el detalle.
Pestañas con línea, comando copiable y árbol de menú
Tabs variant="line": solo la pestaña activa lleva el subrayado de 3 px; el hover es un fondo suave y el foco un contorno visible. CommandBlock: comando que se ajusta a varias líneas y se copia completo con el ícono de la derecha. PathRow: ruta del equipo con copiar y abrir del mismo tamaño. .sgd-tree: guías finas por rama que, al pasar el mouse o enfocar con teclado, resaltan una «L» de 2 px hacia la opción y hacia sus niveles padres; la opción seleccionada conserva su «L» con el trazo normal.
Pestañas con línea y logos de sistema
Los logos son SVG propios (ui/os-logos.tsx) y toman el color del texto. El punto verde marca la pestaña del sistema del agente conectado y lleva un texto solo para lectores de pantalla.
Comando copiable
curl -fsSL https://ejemplo.gob.pe/instalador/install.sh | bashSin comando publicado, el recuadro lo avisa y el ícono queda deshabilitado:
El comando aparecerá aquí cuando se publique.Ruta con copiar y abrir
PathRow (ui/path-row.tsx): la ruta en monoespaciado, un botón cuadrado de 36 px para copiarla (cambia a «check» 2 s y avisa) y «Abrir» con el mismo alto. Quien la usa decide cómo se abre; el popup del agente local la usa para su carpeta de documentos.
Carpeta de documentos
C:\Users\persona\Documents\sgd-agent
Avisos con «×» para cerrarlos
Los avisos informativos y de éxito se pueden cerrar y el cierre se recuerda en este navegador (por pantalla y título); las advertencias no llevan «×».
Edición restringida
Advertencia
Árbol con líneas guía (pasa el mouse o usa Tab)
Menú lateral redimensionable
SidebarResizeHandle: arrastra el borde derecho del panel (entre 220 y 420 px; 288 px por defecto). El ancho vive en --sgd-sidebar-width y mientras arrastras se escribe directamente en el panel, sin transición ni renderizados por movimiento. Con el teclado (el asa tiene foco): ← → 16 px, Mayús + flecha 64 px, Inicio / Fin (mínimo / máximo); Enter o doble clic restablecen. El menú es blanco y su lista se desplaza sin barra visible (.sgd-scroll-hidden). Clic o Espacio en el separador abre los controles de ancho: reducir, aumentar, escribir un valor y restablecer, sin arrastrar.
Ancho actual: 288 px (mínimo 220, máximo 420).
El área de contenido ocupa el resto y se ajusta sola. En el menú real el ancho se guarda en el navegador y el riel colapsado de 68 px no se redimensiona.
Tablas compartidas del SGD
Base común sobre TanStack Table (useSgdTable + DataTable): ordenamiento por tipo real, anchos ajustables, selector de columnas, selección por lote, buscador opcional y paginación.
Ejemplo 1: Tabla con selección por lote y buscador habilitado
7 de 20 columnas visiblesClic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | |
|---|---|---|---|---|---|---|---|
| 04 oct | ASC-2026/00151 | Dr. Manuel Peña Carazas | Dictamen legal dirimente sobre aplicación de silencio administrativo positivo en apelación de sanción disciplinaria | S/ 3,500.00 | — | Observado | |
| 04 oct | ASC-2026/00150 | Telefónica del Perú S.A.A. | Servicio de enlace troncal SIP y conectividad segura para sedes descentralizadas de la Procuraduría Pública | S/ 2,150.00 | — | Conciliado | |
| 03 oct | ASC-2026/00149 | Superintendencia Nacional de Bienes Estatales | Pago de derechos de búsqueda catastral para predio institucional en San Isidro con informe registral | S/ 450.00 | — | Pendiente | |
| 03 oct | ASC-2026/00148 | Editorial Jurídica Grijley | Adquisición de compendios normativos y textos especializados en derecho administrativo para biblioteca institucional | S/ 890.00 | — | Conciliado | |
| 02 oct | ASC-2026/00147 | Consorcio Vial Andino | Constancia judicial de consignación para proceso civil de ejecución de garantías reales en tribunal arbitral | — | S/ 1,200.00 | Pendiente | |
| Total filtrado (10) | S/ 13,540.00 | S/ 2,670.00 |
Mostrando 1-5 de 10 resultados
Ejemplo 2: Tabla sin buscador (searchable=false) con selección por lote
Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | |
|---|---|---|---|---|---|---|
| EXP-2026-0079 | 30 sept 2026 | Secretaría General | Remisión de expediente sancionador con resolución de sanción consentida para ejecución inmediata | Alta | Archivado | |
| EXP-2026-0081 | 01 oct 2026 | Oficina de Recursos Humanos | Solicitud de informe de disponibilidad presupuestal para contratación de locadores de servicios | Alta | Pendiente | |
| EXP-2026-0082 | 01 oct 2026 | Dirección General de Desarrollo | Proyecto de directiva sobre digitalización de legajos notariales y custodia segura en sede central | Media | Atendido |
Ejemplo 3: Listado del administrador (AdminDataTable)
Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Acciones |
|---|---|---|---|---|
| Derivación por competencia | Sí | Activo | 12/9/2026 | |
| Devolución por falta de requisitos | Sí | Activo | 30/8/2026 | |
| Solicitud de información adicional | No | Activo | 1/10/2026 | |
| Archivo por duplicidad | No | Inactivo | 4/7/2026 |
Ejemplo 4: Estado vacío guiado (guidedEmpty)
Haz clic en cualquier zona vacía: el botón principal de arriba («Crear expediente») se enfoca y resalta, sin ejecutar la acción; el estado vacío no lo repite.
Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | |
|---|---|---|---|---|---|---|
Aún no tienes expedientes Empieza creando tu primer expediente; aquí verás su seguimiento.
| ||||||
Selector con «X» (FloatingUnderlineSelect)
DataTableSelectionBar muestra la pastilla [ N sel. × ] y [ ⚙ Acciones ▾ ], alineados sin saltos.ConfirmDialog y notifican mediante Sileo Toaster (notifySuccess).notifyWarning.TableCellDescription adapta la altura de fila sin cortar la segunda línea ni emitir tooltips redundantes en textos cortos.th con guía vertical continua al arrastrar, anchos min/max, teclado (←/→), doble clic y botón «Anchos» para restaurar.Árbol: sangría profunda, contraer y expandir
useDeepTreeScroll, DeepTreeScrollbar y DEEP_TREE_ROW_CLASS (ui/deep-tree-scroll.tsx): cada nivel suma sangría; con decenas de niveles el texto de las filas de abajo quedaba fuera de la vista. El desplazamiento horizontal acompaña al vertical: 0 arriba del todo y, abajo del todo, el necesario para leer el último elemento; su barra está en el pie. Con pocos niveles no cambia nada. Cada rama con hijos se contrae y se expande con su flecha (aria-expanded) o con «Expandir todo» y «Contraer todo»; una rama contraída indica cuántos documentos oculta y se abre desde ese mismo texto. Especificación: docs/components/arboles-sangria-profunda.md.
Desplácese, contraiga y expanda; al elegir un documento, su detalle aparece a la derecha
Memorando 0000129-2026-MINJUSDH-DM-SG-OGTI
Emitido- Expediente
- EXP-2026-000062
- Oficina
- Secretaría General
- Elaborado por
- Yuan Raymond Retamozo Vilca
- Fecha
- 30/10/2026 03:40 p. m.
- Estado del trámite
- Emitido
Desplazamiento horizontal: 0 px
Gestión de sesión
Referencia de dos estados. Las tarjetas usan el mismo contenido que el diálogo; las acciones de prueba son completamente simuladas.
Sesión por expirar
Tu sesión está a punto de expirar por inactividad
Tu sesión ha expirado
Tu sesión ha finalizado. Inicia sesión nuevamente para continuar
Probar el diálogo
La cuenta regresiva usa una fecha absoluta de prueba. El botón de renovación no llama a Auth.js en esta página.
La demostración no utiliza la sesión real.
Observado: rojo de acción, azul de foco, contornos de 1 px, tipografía de peso medio o alto, iconos junto a la etiqueta, estados sobre fondo claro y una variante inversa sobre índigo.
Propuesto para el SGD: altura estándar de 40 px, radio compartido de 6 px, Inter 14 px, foco visible también en modo oscuro y color de marca derivado del tema activo. La referencia visual no precisa tokens, tiempos de animación, contraste medido ni todos los estados para cada variante.
Especificación y ejemplos de uso: docs/components/buttons.md. Los cambios de paleta y modo usan y guardan la preferencia actual del SGD.
Accesibilidad (WCAG 2.2 AA)
Los componentes compartidos se comprueban con WCAG 2.2 nivel AA, pruebas con teclado y herramientas automáticas. Detalle en app/docs/accesibilidad.md.
Reordenación con teclado, clic o toque
Usa el asa con Espacio y las flechas, o los botones Subir/Bajar. Este ejemplo no modifica documentos reales.
- Documento A
- Documento B
- Documento C
Gráfica con datos diarios equivalentes
La leyenda cambia las series de la gráfica y de su tabla. «Ver datos diarios» abre los valores exactos sin cambiar la altura del card. Datos de ejemplo.
Enlace «Saltar al contenido» (2.4.1)
Pulsa Tab con el foco al inicio de esta caja: el enlace aparece y permite saltar la navegación repetida.
Vista previa del enlace (visible solo con foco).
| Control | Teclas | Resultado |
|---|---|---|
| Enlace «Saltar al contenido» | Tab (primer elemento de la página) | Aparece al recibir foco; Enter lleva el foco al contenido principal. |
| Más filtros | Enter o Espacio | Abre el desplegable; el foco entra en la primera opción. Esc lo cierra y devuelve el foco al botón. |
| Opción de filtro (check sin caja) | Espacio o Enter | Marca o desmarca; el estado se anuncia como casilla marcada o sin marcar. |
| Categoría expandible | Enter o Espacio | Abre o cierra la lista; informa «expandido/contraído» y la lista que controla. |
| Selector con chips | Escribir, ↓ o clic · Enter · Retroceso | La lista no se abre al recibir foco. Enter elige, Retroceso quita el último chip, Esc cierra solo la lista. |
| Favoritos | Tab · Enter | Aplicar, sincronizar, editar y eliminar son botones con nombre propio. Tras guardar o eliminar, el foco pasa a un elemento lógico. |
| Encabezado de columna | Enter o Espacio | Ordena ascendente, descendente y de nuevo ascendente; el estado queda en aria-sort. |
| Separador de ancho de columna | ← → · Inicio / Fin · Enter · Espacio | Flechas ajustan, Inicio/Fin llevan a los límites y Enter restablece. Clic o Espacio abre +/- y valor numérico sin arrastrar. |
| Casilla de fila / de encabezado | Espacio | La selección cambia solo desde la casilla; el recuento se anuncia con calma («2 seleccionados»). |
| Tabla con desplazamiento horizontal | Tab, luego ← → | Solo cuando hay desbordamiento es una región con nombre y foco. |
| Reordenar destinatarios y vistos buenos | Espacio o Enter · ↑ ↓ · Escape | Inicia, mueve y confirma; Escape cancela. Subir/Bajar ofrecen la misma acción por clic o toque. |
| Criterio | Nivel WCAG | Cómo se cumple |
|---|---|---|
| 1.3.1 Información y relaciones | A | Encabezados con scope=col y nombre propio; grupos y regiones con nombre; sin depender de la presentación. |
| 1.4.1 Uso del color | A | Selección con check, texto y peso; error con icono y mensaje; modo de alto contraste con contorno. |
| 1.4.3 / 1.4.11 Contraste | AA | Texto ≥ 4,5:1 y bordes de campo, foco e iconos ≥ 3:1 en los tres temas y en claro/oscuro. |
| 1.4.4 / 1.4.10 Texto y reflujo | AA | Sin pérdida a 200 % y 400 % (320 px); encabezados que se ajustan en lugar de truncarse. |
| 1.4.12 / 1.4.13 Espaciado y hover | AA | Tooltips alcanzables con teclado, descartables con Esc y con el puntero encima. |
| 2.1.1 / 2.1.2 Teclado | A | Todo operable con teclado; Esc cierra paneles; sin trampas de foco. |
| 2.4.1 / 2.4.3 / 2.4.7 Orden y foco | A/AA | Enlace «Saltar al contenido»; orden lógico; foco visible de 2 px. |
| 2.5.7 / 2.5.8 Arrastre y objetivo | AA | Alternativa por clic/toque sin arrastrar, además del teclado; objetivos de 24 px o excepción válida. Revisar cada función. |
| 3.3.1 / 3.3.2 Errores y etiquetas | A | Etiqueta persistente, marca * en obligatorios, error con texto, enlazado con aria-describedby. |
| 4.1.2 / 4.1.3 Nombre, rol y mensajes | A/AA | Nombres de diálogos, popovers y botones de icono; avisos corteses (role=status). |
«Nivel WCAG» es el nivel en que la norma define cada criterio (A básico, AA intermedio); no indica trabajo pendiente. El compromiso del SGD es cumplir A y AA. La conformidad completa no se declara hasta contar con pruebas de lector de pantalla y de las pantallas reales.
PDF, ubicación del sello y carga accesible
Prueba con un PDF local: leer texto por página, elegir página y coordenadas, cambiar zoom y bloquear el movimiento. Esta demostración no sube archivos ni ejecuta firma digital.
Arrastra un archivo aquí o haz clic para elegirlo
PDF · máximo 25 MB
Ningún archivo cargado.
Ejemplo 4: AdminDataTable
Oficinas de ejemplo
4 oficinas de ejemplo
Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. |
|---|---|---|---|
| DGAJ | Dirección General de Asuntos Jurídicos | 2 | Activo |
| OGA | Oficina General de Administración | 2 | Activo |
| OTI | Oficina de Tecnologías de la Información | 3 | Inactivo |
| SG | Secretaría General | 1 | Activo |
Ejemplo 5: Documentos con fecha y hora (hora de Lima)
Documentos de ejemplo
Un valor sin hora muestra solo la fecha
Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. | Clic o Espacio para ajustar el ancho sin arrastrar. Flechas para ajustar; Enter para restablecer. |
|---|---|---|---|---|
| OFICIO N.º 0142-2026-ENTIDAD/OGA | Oficio | Solicitud de información sobre expediente administrativo | En proyecto | |
| MEMORANDO N.º 0143-2026-ENTIDAD/OGA | Memorando | Remisión de informe trimestral | Emitido | |
| CARTA N.º 0007-2026-ENTIDAD/DGAJ | Carta | Respuesta a solicitud ciudadana | Emitido |