Cinta de estado (StatusRibbon)
Cinta diagonal pequeña en la esquina superior derecha de una tarjeta, para el estado final de un documento. Archivo: app/src/components/ui/status-ribbon.tsx.
Catálogo: página de componentes (/design-system/componentes, sección «Cinta de estado», justo después de «Badges de estado»), con ejemplos de Archivado, Anulado y un estado sin cinta, la tabla de uso y las reglas. Código: app/src/components/design-system/status-ribbon-showcase.tsx.
Cuándo se usa
Solo para dos estados: Archivado (tono neutro) y Anulado (tono de error). No se usa para los demás estados (No leído, Recibido, Atendido, Observado, en proyecto, para despacho…): ya tienen su insignia o su recorrido, y una cinta en cada estado compite con las acciones y pierde fuerza donde de verdad cierra el documento.
| Pantalla | Cinta | Fuente del estado |
|---|---|---|
| Documento recibido (Recepción) | «Archivado» o «Anulado» | Estado de la copia de la oficina que revisa (myRecipient.status) |
| Formulario del documento emitido (autor) | «Anulado» | Estado del documento (status === "annulled") |
| Formulario del autor, «Archivado» | No se muestra | «Archivado» es de cada destinatario, no del documento; cada oficina archiva su copia |
| Bandejas y tablas, Seguimiento, revisión de vistos buenos | No | La columna Estado y los destinos ya llevan su insignia |
Aspecto
Minimalista: una banda de 104 px de ancho (12 px de texto, semibold, en tipo oración) girada 45°, dentro de una esquina de 72 px. Colores suaves del sistema, sin sombra: Archivado border-border bg-muted text-muted-foreground; Anulado border-destructive/30 bg-destructive/10 text-destructive. Funciona igual en los temas claro y oscuro.
Reglas de uso
- La tarjeta que la contiene es
relative; el componente se recorta solo con la forma de la esquina (rounded-tr-[inherit]), sinoverflow-hiddenen la tarjeta. - La tarjeta reserva su esquina (
pr-16en su primera fila) para que botones y textos no queden bajo la cinta. - No recibe clics (
pointer-events-none) y es decorativa para los lectores de pantalla (aria-hidden): el estado debe estar escrito en otro lugar de la pantalla («Estado de recepción», el recorrido de estado, la insignia). - Texto corto, en tipo oración («Archivado», no «ARCHIVADO»).
- Si la pantalla ya tenía una insignia del mismo estado en su cabecera, esa insignia se oculta mientras hay cinta (la cinta la reemplaza); con los estados sin cinta se mantiene. En «Documento recibido»: «No leído» (Pendiente), Recibido, Atendido y Observado muestran su insignia en la cabecera, en tipo oración; Archivado y Anulado muestran la cinta. «Volver» y la insignia van agrupados a la derecha. El estado sigue escrito, con su insignia, en «Estado de recepción» y en la fila de cada destinatario.
- Para otro estado final, se amplía primero el criterio de este documento.
Verificación (24-oct-2026)
Chromium con la página de componentes (claro, oscuro y 390 px sin desborde horizontal) y con los componentes reales y /api/backend simulado: en «Documento recibido» la cinta aparece con «Archivado» y con «Anulado» y no aparece con «No leído» ni «Recibido»; en la tarjeta del formulario aparece con «Anulado» y no sin él, sin tapar el recorrido de estado ni los botones; mide 72 × 72 px. No verificado: lector de pantalla, los seis temas, y la tarjeta del formulario en pantalla de celular dentro de la página real (en una página de prueba aislada la tarjeta ya desbordaba a 390 px, con y sin cinta).