# DOC-1505: Análisis de Brechas de Variables de Personalización del Widget

Lista de origen: 183 propiedades personalizadas de CSS proporcionadas para la renovación de personalización del widget.

Verificado contra los dos documentos de personalización en vivo:

- **Widget multi-región** (Empleos Brasil, Registros de Empleo México, Fiscal México) → la fuente canónica es `_partials/hosted-widget-branding-and-customization.md`, incluida a través de `{% partial %}` en las tres páginas de productos.
- **Widget OFDA** (Brasil Open Finance / Agregación Regulada) → `products/aggregation_brazil/ofda-widget-branding-and-customization.md` (completamente en línea, no un parcial).


Existe un tercer documento de widget — `products/payments_brazil/payments-brazil-bio-pix-widget-customization.md` (Pix Biometria) — pero utiliza un espacio de nombres de variables completamente diferente (`--nav-bar-stepper-color-active`, `--color-surface-base`, `--container-border-*`, etc.) que no está presente en la lista proporcionada, por lo que se excluye del conteo de brechas a continuación. Indicar si Pix Biometria también debería estar en el alcance para DOC-1505.

## Números principales

|  | Cantidad |
|  --- | --- |
| Total de variables en la lista proporcionada | 183 |
| Documentadas en **ambas** Multi-región y OFDA | 72 |
| Documentadas solo en Multi-región | 6 |
| Documentadas solo en OFDA | 0 |
| **Faltantes en ambos documentos** | 105 |


**El 57% de la lista de variables proporcionada (105/183) no está documentada en ningún lugar.** El conjunto no documentado está dominado por categorías completas de componentes que no existen en los documentos actuales en absoluto: tipografía/fuentes, enlaces, tokens de texto a nivel de página, diálogos, casillas de verificación, menús desplegables, listas de ítems, acordeones y las pantallas de consentimiento/redirección específicas de OFDA.

## Brecha 1 — Multi-región tiene 6 variables que OFDA no tiene

El documento de OFDA no tiene una sección "Modificar la pantalla de credenciales del widget" en absoluto. Estas están documentadas solo para Multi-región:

| Variable CSS |
|  --- |
| `--credentials-screen-institution-logo-border-radius` |
| `--credentials-screen-header-logo-reversed` |
| `--credentials-screen-help-link-align` |
| `--credentials-screen-help-link-font-size` |
| `--credentials-screen-counter-border-radius` |
| `--credentials-screen-counter-font-size` |


**Acción necesaria:** confirmar con el equipo de ingeniería si el widget de OFDA realmente soporta la tematización de la pantalla de credenciales. Si es así, esta sección falta en el documento de OFDA. Si no, no se requiere acción — pero vale la pena incluir una nota de una línea en el documento de OFDA explicando la diferencia de plataforma (refleja el patrón existente donde OFDA también carece de `--button-border-color-disabled` en su tabla de botones a pesar de aparecer en el ejemplo de código de botones).

## Gap 2 — 105 variables faltantes en ambos documentos

Agrupadas por componente aparente, en el orden en que probablemente se agregarían a ambos documentos:

### Tipografía / fuentes (nueva categoría — no hay sección existente)

| Variable |
|  --- |
| `--font-family-primary` |
| `--font-family-regular-file-name` |
| `--font-family-semibold-file-name` |
| `--font-family-bold-file-name` |


### Enlaces (nueva categoría)

| Variable |
|  --- |
| `--link-font-color` |
| `--link-font-color-dark` |
| `--link-text-decoration` |


### Tokens de texto a nivel de página (nueva categoría — título/cuerpo fuera de componentes específicos)

| Variable |
|  --- |
| `--text-title-color` |
| `--text-title-color-dark` |
| `--text-title-font-size` |
| `--text-title-line-height` |
| `--text-body-color` |
| `--text-body-color-dark` |
| `--text-body-font-size` |
| `--text-body-line-height` |


### Botones (extiende la sección existente "Modificar los botones del widget")

| Variable |
|  --- |
| `--text-button-font-color` |
| `--text-button-font-color-dark` |


### Banners (extiende la sección existente "Modificar los banners del widget")

| Variable |
|  --- |
| `--banner-icon-size` |
| `--banner-icon-name-error` |
| `--banner-icon-name-success` |
| `--banner-icon-name-info` |
| `--banner-icon-name-warning` |


### Campos de entrada (extiende la sección existente "Modificar los campos de entrada del widget" — esta es la mayor brecha en una sección existente)

| Variable |
|  --- |
| `--input-text-font-size` |
| `--input-text-font-color` |
| `--input-text-font-color-dark` |
| `--input-text-border-color-error` |
| `--input-text-border-color-error-dark` |
| `--input-text-label-weight` |
| `--input-text-label-font-size` |
| `--input-text-assistive-color` |
| `--input-text-assistive-color-dark` |
| `--input-text-assistive-color-error` |
| `--input-text-assistive-color-error-dark` |
| `--input-text-assistive-font-weight` |
| `--input-text-icon-opacity` |
| `--input-text-icon-size` |
| `--input-text-icon-order` |
| `--input-text-password-visible-icon` |
| `--input-text-password-non-visible-icon` |


### Checkbox (nueva categoría)

| Variable |
|  --- |
| `--checkbox-border-color` |
| `--checkbox-border-color-dark` |
| `--checkbox-border-radius` |


### Diálogo (nueva categoría)

| Variable |
|  --- |
| `--dialog-title-color` |
| `--dialog-title-color-dark` |
| `--dialog-body-color` |
| `--dialog-body-color-dark` |
| `--dialog-body-font-size` |
| `--dialog-body-line-height` |


### Pestañas (extiende la sección existente "Modificar Componentes de Pestañas del Widget" — variantes de modo oscuro faltantes)

| Variable |
|  --- |
| `--tab-text-color-dark` |
| `--tab-border-color-dark` |


Nota: a diferencia de cualquier otro componente temático, el ejemplo de código "Oscuro" de la sección de pestañas reutiliza las claves simples `--tab-text-color` / `--tab-border-color` en lugar de las que tienen el sufijo `-dark`. Eso es inconsistente con la convención del documento (establecida explícitamente: "agrega `-dark` a cualquiera de las variables CSS ... para aplicar un estilo personalizado específicamente para el modo oscuro") y con el resto de la página. Confirma con el equipo de ingeniería si las pestañas realmente carecen de variables específicas para el modo oscuro (en cuyo caso el ejemplo de código es correcto y estas dos están fuera de alcance) o si los documentos simplemente las están omitiendo (en cuyo caso el ejemplo de código Oscuro en sí necesita una corrección, no solo una nueva fila en la tabla).

### Superposición / superficie / divisor / imagen / diseño (nuevas categorías)

| Variable |
|  --- |
| `--overlay-background-color` |
| `--overlay-background-color-dark` |
| `--surface-color` |
| `--surface-color-dark` |
| `--divider-color` |
| `--divider-color-dark` |
| `--image-border-radius` |
| `--layout-side-padding` |


Nota: `overlay_background_color` (minúsculas, snake_case, sin guiones) ya existe en ambos documentos, pero como una **clave JSON de marca** (`widget.branding.overlay_background_color`), no como una variable CSS. `--overlay-background-color` / `-dark` son hermanos con espacio de nombres de variables CSS y son genuinamente nuevos/no documentados — vale la pena verificar con el equipo de ingeniería que estos no sean simplemente el mismo control expuesto dos veces.

### Dropdown (nueva categoría)

| Variable |
|  --- |
| `--dropdown-border-radius` |
| `--dropdown-font-color` |
| `--dropdown-font-color-dark` |
| `--dropdown-label-display` |


### Lista de ítems (nueva categoría)

| Variable |
|  --- |
| `--item-list-hover-color` |
| `--item-list-hover-color-dark` |
| `--item-list-skeleton-color` |
| `--item-list-skeleton-color-dark` |
| `--item-list-icon-color` |
| `--item-list-icon-color-dark` |
| `--item-list-title-color` |
| `--item-list-title-color-dark` |
| `--item-list-body-color` |
| `--item-list-body-color-dark` |


### Acordeón (nueva categoría)

| Variable |
|  --- |
| `--accordion-icon-color` |
| `--accordion-icon-color-dark` |
| `--accordion-title-color` |
| `--accordion-title-color-dark` |


### Pantalla de credenciales — información adicional y título (extiende la sección de pantalla de credenciales, que hoy en día es solo para múltiples regiones — ver Brecha 1)

| Variable |
|  --- |
| `--credentials-screen-extra-info-align` |
| `--credentials-screen-extra-info-font-weight` |
| `--credentials-screen-extra-info-font-size` |
| `--credentials-screen-extra-info-line-height` |
| `--credentials-screen-extra-info-color` |
| `--credentials-screen-extra-info-color-dark` |
| `--credentials-screen-title-align` |
| `--credentials-screen-title-font-weight` |
| `--credentials-screen-title-font-size` |
| `--credentials-screen-title-line-height` |
| `--credentials-screen-title-color` |
| `--credentials-screen-title-color-dark` |


### Detalles del consentimiento / resumen del consentimiento (Conceptos exclusivos de OFDA — el flujo de consentimiento de Open Finance no tiene documentación de variables CSS hoy en día)

| Variable |
|  --- |
| `--consent-details-identification-section-icon` |
| `--consent-details-expiration-section-icon` |
| `--consent-details-header-background-color` |
| `--consent-details-header-background-color-dark` |
| `--consent-summary-identification-section-icon` |
| `--consent-summary-expiration-section-icon` |
| `--consent-summary-purpose-section-icon` |
| `--consent-summary-shared-information-section-icon` |


**Estos son casi con certeza exclusivos de OFDA** (las pantallas de consentimiento son un concepto regulado por Open Finance/Brasil — el widget multirregional no tiene paso de consentimiento). Vale la pena confirmar el alcance con el equipo de ingeniería antes de decidir si estos pertenecen solo al documento de OFDA.

### Pantalla de obtención de consentimiento (probablemente solo OFDA)

| Variable |
|  --- |
| `--fetching-consent-title-font-size` |
| `--fetching-consent-title-line-height` |
| `--fetching-consent-body-font-size` |
| `--fetching-consent-body-line-height` |


### Pantalla de redirección (probablemente solo OFDA)

| Variable |
|  --- |
| `--redirect-title-font-size` |
| `--redirect-title-line-height` |
| `--redirect-body-font-size` |
| `--redirect-body-line-height` |
| `--redirect-openfinance-logo-visibility` |


## Totalmente documentado (72 variables, no se necesita acción)

Presente con una fila de tabla (o su equivalente en modo oscuro documentado) en **ambos** los documentos de Multi-región y OFDA hoy: el color primario completo, barra de navegación, botones (menos las dos adiciones de botones de texto mencionadas arriba), banners (menos el nombre/tamaño del icono), campos de entrada (menos las adiciones mencionadas arriba), y secciones de pestañas (modo claro). Lista completa disponible a solicitud — omitida aquí ya que no necesita trabajo de documentación.

## Advertencia sobre la fuente de verdad

`apis/BelvoOpenApiSpec.yaml` define el esquema del array `theme` (`css_key` / `value`, ambos de tipo libre `type: string`) tanto para los endpoints de token OFDA como para los de múltiples regiones, pero **no** enumera los nombres de las variables como un enum: la descripción de `css_key` solo lista 3 ejemplos ilustrativos (`--color-primary-base`, `--nav-bar-title-color`, `--nav-bar-icon-color`) en prosa. La especificación no puede usarse para validar la lista de 183 variables suministradas contra el producto; esa confirmación debe provenir de ingeniería/diseño, no del contrato de la API.

## Siguiente paso sugerido

Antes de escribir actualizaciones de la documentación: confirma con el equipo de ingeniería (a) cuáles de las categorías "probablemente solo OFDA" (detalles/resumen de consentimiento, obtención de consentimiento, redirección) son genuinamente exclusivas de OFDA vs. también disponibles en múltiples regiones, y (b) si la sección de pantalla de credenciales solo para múltiples regiones (Brecha 1) debería trasladarse a OFDA o es una limitación genuina de la plataforma.