Fintech UI

Toda columna de importes, portfolios y dashboards debe usar font-variant-numeric: tabular-nums para que cada digito ocupe el mismo espacio horizontal. Los valores monetarios deben alinearse a la derecha para que los puntos decimales apilen verticalmente.

Disparar la validacion de tarjeta solo cuando el usuario abandona el campo (onblur), nunca mientras escribe. Ejecutar el algoritmo Luhn (mod-10) inmediatamente en el cliente para detectar errores de tipeo antes de cualquier llamada de red. Auto-formatear en grupos de cuatro: 4111 1111 1111 1111.

Usar el token exacto de autocomplete para cada campo: cc-name, cc-number, cc-exp, cc-csc. Agregar inputmode="numeric" a numero y CVV para mostrar teclado numerico en movil sin usar type="number". Nunca usar autocomplete="off" en campos de pago.

El placeholder skeleton debe aparecer unicamente cuando la carga supera 500ms. Por debajo de ese umbral, el estado vacio seguido del contenido es perceptualmente mas rapido. El skeleton debe reflejar el numero exacto de filas visibles (+-1 fila) para evitar content shift al llegar los datos.

Transferencias significativas deben mostrar una pantalla dedicada de revision antes de ejecutarse. La pantalla debe incluir: nombre del destinatario, cuenta/IBAN, institucion, importe con simbolo de moneda y fecha estimada de llegada. El CTA debe ser especifico: "Enviar $1,200.00", no "Confirmar".

Aproximadamente el 8% de los hombres tiene deficiencia rojo-verde. Acompanar siempre el color con un indicador tipografico: signo mas/menos, icono de flecha, o notacion contable ($340). El texto debe alcanzar minimo 4.5:1 de contraste sobre el fondo (WCAG 2.2 AA).

Los flujos KYC tienen 50-80% de abandono; la subida de documentos es el paso de mayor fuga. Mostrar una pantalla "Antes de empezar" con: documentos necesarios, tiempo estimado y consejos de entorno. Cada pantalla posterior contiene exactamente una tarea. Mostrar barra de progreso segmentada en cada paso.

El gauge de score debe mostrar: el numero (minimo 32px), los extremos del rango etiquetados, y una categoria verbal ("Bueno", "Excelente"). El segmento activo del arco debe alcanzar 3:1 de contraste contra el track inactivo (WCAG 2.2 SC 1.4.11). Animar el fill en 600-800ms ease-out, gateado por prefers-reduced-motion.

PANs, IBANs y numeros de cuenta deben mostrarse enmascarados al cargar (ej. ".... .... .... 4521"). Proveer un icono de ojo (minimo 44x44px) que revele el numero completo maximo 30 segundos antes de re-enmascarar. Usar caracteres de reemplazo en el DOM, nunca CSS blur.

El simbolo de moneda debe ser un elemento DOM adyacente (no placeholder), para que no desaparezca al escribir y los lectores de pantalla lo anuncien correctamente. Usar inputmode="decimal" (no type="number") para el teclado correcto en movil. Un solo campo para enteros y decimales, con separadores de miles automaticos.