Visor y verificador documental en celular

Patrón de pantalla para leer un documento en el celular con una mano: cabecera compacta, documento a pantalla casi completa, barra inferior de cinco herramientas y hojas inferiores para lo demás. Rige para el visor de documentos (file-service) y para el verificador público de documentos, que comparten organización, tipografía, iconos y colores del SGD. La muestra con medidas reales está en /design-system/componentes (sección «Visor y verificador en celular», componente ViewerMobileShowcase); no es el visor real.

Origen: revisión del verificador del 28-oct-2026. La captura del estado anterior mostraba el documento en cerca del 15 % de la altura, seis herramientas con etiquetas cortadas («Pá…», «Bu…», «Ale…») y un bloque fijo de anexos y texto legal. La referencia de organización es la de Adobe Acrobat móvil (icono arriba, etiqueta abajo, hojas con tirador); no se copian sus herramientas de edición, comentarios ni firma.

Distribución

El aviso de firma digital y el texto legal no ocupan franjas fijas: viven en la hoja de verificación.

Barra inferior

• Cinco herramientas, cada una con icono de 24 px arriba y etiqueta de 12 px completa abajo, en tipo oración. Si una etiqueta no cabe, sobra una herramienta: nunca se recorta con puntos suspensivos.
• Área de pulsación de al menos 44 px de alto y un quinto del ancho. El estado marcado (aria-pressed) pinta el icono con fondo --accent y el texto en --accent-foreground.
• Los botones reenvían el clic al control original del visor (PDF.js) y copian su estado; no tienen lógica propia (pdf-mobile-bar.ts en file-service).
• Páginas, Buscar y Ajustar cambian cómo se ve el documento. Ajustar alterna ancho de pantalla y página completa; se mantiene visible porque se usa al girar el teléfono.
• Zoom no está en la barra: el pellizco acerca y los botones de acercar y alejar están en «Más».

Hojas inferiores

• Tirador, botón de cerrar de 44 px y arrastre hacia abajo para cerrar; hacia arriba crece. Alternativa sin arrastrar (WCAG 2.5.7): el tirador es un botón con foco (Enter alterna el tamaño; flecha abajo cierra).
• El documento queda detrás con su página, su zoom y su posición de lectura; al cerrar se vuelve exactamente al mismo punto.
• Una sola zona de desplazamiento a la vez: la lista de la hoja se desplaza dentro de ella y el pie de la hoja queda fijo.
• Fondo --card, esquinas superiores de 14 px (el radio de los diálogos), velo de 50 % detrás.

Archivos

• Encabezado «Archivos» y subtítulo «Documento principal y N anexos».
• Sección «Documento» con una fila marcada con la insignia «En lectura» (fondo --accent, borde --primary) y sección «Anexos (N)».
• Cada fila: icono por tipo (fileTypeOf), nombre, tipo y peso; «Abrir» solo donde hay vista previa (PDF e imágenes); «Sin vista previa» en el resto. Tocar la fila abre el archivo en lectura; el icono de la derecha (44 px) descarga solo ese archivo.
• Pie fijo: «Descargar todo (ZIP)», botón de 48 px de alto con icono de 20 px; el texto no lleva el recuento de archivos (ya está bajo el título de la hoja) para que nunca desborde el botón.

Más

Zoom con botones («–», valor, «+»), Información de verificación, Firmas digitales (solo si hay firmas), Descargar este archivo, cambio de modo claro u oscuro con un solo icono (luna en modo claro, sol en modo oscuro) y Guía rápida. Es una fila que se pulsa para cambiar de modo; el texto dice a cuál pasa. Cada fila de 56 px; los destinos que abren otra hoja llevan una flecha a la derecha.

Verificación y firmas

Se abre al tocar «Verificado» en la cabecera o desde «Más». Muestra el estado («Documento verificado»), número, entidad emisora y fecha, la lista de firmas digitales (quién firmó y si la firma es válida, con la misma evaluación del panel de firmas de escritorio) y la nota de la entidad: «Esta consulta confirma la emisión del documento. Si el código no se reconoce, comuníquese con la entidad emisora.» Un documento no verificado usa el mismo diseño con estado de error y la indicación de qué hacer.

Orientación y tamaños

• «Celular» = ancho de hasta 600 px, o pantalla táctil con poca altura (celular en horizontal): el mismo criterio de pdf-mobile-bar.ts (data-sgd-movil y data-sgd-horizontal).
• Vertical: cabecera 56 px y barra inferior de 60 px. Horizontal: cabecera 44 px y las herramientas en un riel a la derecha, para conservar todo el alto de lectura; las hojas se abren desde el costado.
• Probar al menos 360, 390 y 412 px de ancho, y en horizontal.

Accesibilidad

• Barra con role="toolbar" y nombre «Herramientas del documento»; cada botón con nombre accesible propio (puede ser más largo que la etiqueta visible) y aria-pressed o aria-expanded según corresponda.
• Hojas como diálogo con foco atrapado, foco inicial en el título y devolución del foco al botón que las abrió; Escape o el botón de cerrar las cierran.
• Objetivos de 44 px o más (WCAG 2.5.8 pide 24 px), separados entre sí; estados comunicados por icono y texto, no solo por color.
• Contraste de 4,5:1 en texto y 3:1 en controles, en claro y oscuro; movimiento reducido sin animación de entrada de las hojas.

Qué no se incorpora

Herramientas de edición, comentarios, resaltado, dibujo o firma que aparecen en otros lectores de PDF: el verificador solo muestra y descarga. Tampoco se agregan acciones sin función en el flujo real.

Estado de implementación

• Documentado y con muestra en el catálogo: sí.
• Implementado en el verificador y en el visor de file-service: pendiente. El código del verificador desplegado no está en este repositorio; el visor ya tiene la barra inferior con Páginas, Buscar, Alejar, Acercar, Ajustar y Más, y las hojas con tirador, que este patrón reduce a cinco herramientas.