# Personalización y Branding del Hosted Widget (OFDA)

Con el Hosted Widget de Belvo, puedes personalizar y darle tu marca al widget de dos maneras: a través de tu solicitud de token de acceso y mediante la herramienta del panel de control de Custom Widget.

## Configurar a través de tu solicitud de token de acceso

Las configuraciones a continuación se envían como JSON en la misma llamada de backend que tu solicitud para generar un `access_token`. Para un ejemplo completo de cómo se ve esto, consulta el ejemplo de código a continuación.

### Agregar un ícono de empresa

Puedes agregar el ícono de tu empresa al widget para que esté más alineado con tu marca. Cuando agregas el ícono de tu empresa, aparece en la siguiente pantalla:

- inicio inicial del widget


Asegúrate de que tu ícono tenga dimensiones cuadradas, esté en formato SVG, tenga un fondo transparente y no contenga espacios en blanco alrededor. Si tu ícono no sigue estas especificaciones, el widget de Belvo mostrará el siguiente ícono:

Ejemplo de ícono de empresa
**Instrucciones**
Para agregar un ícono de empresa personalizado, simplemente agrega la URL de tu imagen SVG a la clave `company_icon`.

```json Ejemplo de Ícono de Empresa
{
  "widget": {
    "branding": {
      ...
      "company_icon": "https://mysite.com/icon.svg",
      ...
        }
     }
}
```

### Agregar el logotipo de la empresa

Puedes agregar el logotipo de tu empresa al widget para que esté más alineado con tu marca. Cuando agregas el logotipo de tu empresa, aparece en las siguientes pantallas:

- mientras se está vinculando la cuenta
- una vez que una cuenta se ha vinculado exitosamente
- cuando un usuario elige cancelar el proceso de vinculación


Asegúrate de que tu logotipo esté en formato SVG, tenga un fondo transparente y no contenga espacios en blanco alrededor. Para una mejor visibilidad y escalado, te sugerimos que uses un logotipo horizontal (ver el ejemplo en la parte superior izquierda de la imagen a continuación).

**Instrucciones**
Para agregar un logotipo personalizado de la empresa, simplemente añade la URL de tu imagen SVG a la clave `company_logo`.

```json Ejemplo de Logotipo de Empresa
{
  "widget": {
    "branding": {
      ...
      "company_logo": "https://mysite.com/logo.svg",
      ...
        }
     }
}
```

### Agrega el nombre de tu empresa

Puedes agregar el nombre de tu empresa para que se muestre cuando el widget se inicie por primera vez. Por defecto, solo mostrará "Vincula tu cuenta". Cuando agregas el nombre de tu empresa, el mensaje seguirá el formato "[company_name] usa Belvo para conectar tu cuenta".

Ten en cuenta que solo el nombre de la empresa es personalizable en la frase introductoria

**Instrucciones**

Para agregar el nombre de tu empresa, simplemente agrégalo a la clave `company_name`.

```json Company Name
{
  "widget": {
    "branding": {
      ...
      "company_name": "ACME",
      ...
        }
     }
}
```

### Mostrar el logo de Belvo en el medio

Puedes optar por mostrar el logo de Belvo entre el logo de tu empresa y el logo de la institución en la pantalla inicial de conexión. Esto ayuda a reforzar que Belvo está facilitando la conexión segura. Por defecto, esta opción está configurada como `false`, y solo se muestran el logo de tu empresa y el logo de la institución.

Cuando está habilitado, el diseño del logo cambia a: **[Logo de tu Empresa]** → **[Logo de Belvo]** → **[Logo de la Institución]**

**Instrucciones**

Para mostrar el logo de Belvo en el medio de la pantalla inicial de conexión, configura el parámetro `show_belvo_middle_logo` a `true`.

```json Mostrar Logo de Belvo en el Medio
{
  "widget": {
    "branding": {
      ...
      "show_belvo_middle_logo": true,
      ...
    }
  }
}
```

### Mensajería personalizada para el propósito de consentimiento

Puedes modificar el texto que describe el propósito de solicitar los datos de tu usuario (*Propósito del compartimiento*) para describir mejor tu caso de uso.

Por defecto, el texto mostrado es: *Soluções financeiras personalizadas oferecidas por meio de recomendações sob medida, visando melhores ofertas de produtos financeiros e de crédito.*

**Instrucciones**

Para personalizar el texto que describe el propósito de solicitar acceso a los datos de tu usuario, simplemente añade tu texto (máximo 600 caracteres) a la clave `purpose`.

```json Consent Purpose
{
  "widget": {
    "consent": {
       "purpose": "Tu texto personalizado aquí. Máximo 600 caracteres",
       ...
    }
  }   
}
```

### Establecer la duración predeterminada del consentimiento

Puedes especificar la duración predeterminada del consentimiento (en días) que se preseleccionará en el menú desplegable de la pantalla de consentimiento. Esto ayuda a optimizar la experiencia del usuario al presentar tu período de consentimiento preferido como la opción predeterminada.

El backend admite los siguientes valores de duración del consentimiento:

| Etiqueta | Valor (días) |
|  --- | --- |
| Indeterminado | `null` |
| 12 meses | `366` |
| 9 meses | `275` |
| 6 meses | `183` |
| 3 meses | `92` |


**Cómo funciona:**

- Si proporcionas uno de los valores válidos (`366`, `275`, `183` o `92`), esa opción se preseleccionará en el menú desplegable de duración del consentimiento.
- Si no proporcionas un valor o proporcionas un valor diferente, "Indeterminado" será la opción preseleccionada.
- El orden de la lista desplegable permanece sin cambios; solo cambia la opción preseleccionada.
- El widget acepta cualquier número entero positivo, pero solo los valores listados anteriormente corresponden a las opciones disponibles de duración del consentimiento.


**Instrucciones**

Para establecer la duración predeterminada del consentimiento, agrega el número de días a la clave `default_consent_duration_days` dentro del objeto `consent`.

```json Default Consent Duration
{
  "widget": {
    "consent": {
       "default_consent_duration_days": 183
    }
  }
}
```

Opcional e Independiente
El parámetro `default_consent_duration_days` es opcional e independiente del parámetro `purpose`. Puedes usarlos juntos o por separado según tus necesidades.

Valores Soportados
Para que la duración del consentimiento se preseleccione correctamente, utiliza uno de estos valores: `366` (12 meses), `275` (9 meses), `183` (6 meses) o `92` (3 meses). Cualquier otro valor resultará en que "Indeterminado" sea preseleccionado.

### Ocultar mensaje en la pantalla de selección de institución

Puedes optar por ocultar el mensaje "*Mais de 5 milhões de usuários já conectaram com segurança suas contas.*" que aparece cuando tu usuario selecciona su institución en el widget. Por defecto, este mensaje es visible en el widget (`true`).

**Instrucciones**

Para ocultar el mensaje en la pantalla de selección de institución, simplemente establece el parámetro `social_proof` en `false`.

```json Social Proof
{
  "widget": {
    "branding": {
      ...
      "social_proof": false,
      ...
        }
     }
}
```

## Configurar a través de la herramienta de panel de control del Custom Widget

Las variables CSS se configuran visualmente a través de la herramienta **Custom Widget** en tu panel de control de Belvo.

**Instrucciones**

En tu panel de control de Belvo, ve a **Developer Tools > Custom Widget**, y luego en la sección de **Widget Configuration** configura lo siguiente:

1. **Locale**: el idioma de visualización del widget: `en` (Inglés), `es` (Español) o `pt-BR` (Portugués).
2. **Integration Type**: `Open Finance` para el widget de Open Finance Brasil (OFDA), o `Credentials` para el widget multirregional.
3. **Color scheme**: Claro u Oscuro. Las variables CSS específicas para el modo oscuro utilizan un sufijo `-dark` — por ejemplo, `--color-primary-base-dark` establece el color primario específicamente para el modo oscuro.
4. **Country Codes**: qué países aparecen en la vista previa del widget.
5. **Institution Types**: qué tipos de instituciones aparecen en la vista previa: `Fiscal` (conexiones con autoridades fiscales), `Retail` (banca personal), `Business` (banca corporativa) o `Employment` (sistemas de empleador/nómina).


Panel de Configuración del Widget con campos numerados: Locale, Integration Type, Color scheme, Country Codes, Institution Types, y Load Widget
Una vez que hayas hecho clic en **Load Widget**, podrás acceder al panel de **CSS Variables**. Busca o utiliza los filtros de categoría (Font, Navbar, Button, Banner, Input Text, y más) para encontrar una variable, luego ingresa un valor. La **Widget Preview** a la derecha se actualiza en vivo mientras escribes, para que puedas verificar cada cambio antes de finalizarlo.

Panel de Variables CSS con campos de variables editables junto a una Vista Previa del Widget en vivo
Haz clic en **Export Configuration**. Esto crea automáticamente un ticket de soporte en Zendesk con tu JSON de personalización adjunto, que el equipo de Belvo utiliza para aplicarlo a tu cuenta. Usa **Import** para cargar una configuración previamente exportada de nuevo en la herramienta si deseas seguir editándola.

Esta página enumera los parámetros `css_key` disponibles, sus valores predeterminados y lo que controla cada uno. Para cualquier variable con un equivalente `-dark`, la clave `-dark` establece esa anulación específicamente para el modo oscuro. Consulta la sección anterior para saber cómo aplicarlos.

### Colores Primarios

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--color-primary-base` | `#0663f9` | Establece el color primario para botones, casillas de verificación y la barra de progreso. |
| `--color-primary-base-dark` | `#0663f9` | Establece el color primario en modo oscuro. |


### Tipografía

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--font-family-primary` | `Geist` | Establece la familia tipográfica principal utilizada en todo el widget. Fuente de respaldo cuando no se proporciona una fuente personalizada. |
| `--font-family-regular-file-name` | `—` | Archivo de fuente a utilizar para texto de peso regular (400). No hay valor predeterminado — solo se usa si se proporciona una fuente personalizada. |
| `--font-family-semibold-file-name` | `—` | Archivo de fuente a utilizar para texto de peso seminegrita (600). No hay valor predeterminado — solo se usa si se proporciona una fuente personalizada. |
| `--font-family-bold-file-name` | `—` | Archivo de fuente a utilizar para texto de peso negrita (700). No hay valor predeterminado — solo se usa si se proporciona una fuente personalizada. |


### Enlaces

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--link-font-color` | `#0663f9` | Establece el color de la fuente para los hipervínculos (por ejemplo, el enlace a la política de privacidad). |
| `--link-font-color-dark` | `#0663f9` | Establece el color de la fuente para los hipervínculos en modo oscuro. |
| `--link-text-decoration` | `none` | Establece la decoración del texto (por ejemplo, subrayado) para los hipervínculos. |


### Texto a Nivel de Página

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--text-title-color` | `#161a1d` | Establece el color de los títulos a nivel de página. |
| `--text-title-color-dark` | `#eef3f8` | Establece el color de los títulos a nivel de página en modo oscuro. |
| `--text-title-font-size` | `1.125rem` | Establece el tamaño de fuente de los títulos a nivel de página. |
| `--text-title-line-height` | `1.75rem (26px)` | Establece la altura de línea de los títulos a nivel de página. |
| `--text-body-color` | `#414d58` | Establece el color del texto del cuerpo a nivel de página. |
| `--text-body-color-dark` | `#c2cfd9` | Establece el color del texto del cuerpo a nivel de página en modo oscuro. |
| `--text-body-font-size` | `1rem` | Establece el tamaño de fuente del texto del cuerpo a nivel de página. |
| `--text-body-line-height` | `1.5rem (24px)` | Establece la altura de línea del texto del cuerpo a nivel de página. |


### Barra de Navegación

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--nav-bar-title-color` | `#161a1d` | Establece el color del título de la barra de navegación. |
| `--nav-bar-title-color-dark` | `#eef3f8` | Establece el color del título de la barra de navegación en modo oscuro. |
| `--nav-bar-title-align` | `center` | Especifica la alineación del título de la barra de navegación. Las posiciones posibles son `center`, `start` y `end`. |
| `--nav-bar-icon-color` | `#161a1d` | Establece el color de los íconos de la barra de navegación. |
| `--nav-bar-icon-color-dark` | `#eef3f8` | Establece el color de los íconos de la barra de navegación en modo oscuro. |
| `--nav-bar-background-color` | `#ffffff` | Define el color de fondo de la barra de navegación. |
| `--nav-bar-background-color-dark` | `#011432` | Define el color de fondo de la barra de navegación en modo oscuro. |
| `--nav-bar-box-shadow` | `none` | Añade un efecto de sombra a la barra de navegación. |
| `--nav-bar-border-color` | `#f0f2f4` | Especifica el color del borde de la barra de navegación. |
| `--nav-bar-border-color-dark` | `#2b3d54` | Especifica el color del borde de la barra de navegación en modo oscuro. |
| `--nav-bar-left-icon` | `arrow_back` | Establece un ícono personalizado para la acción izquierda de la barra de navegación (por ejemplo, flecha de retroceso). |
| `--nav-bar-left-icon-dark` | `arrow_back` | Establece un ícono personalizado para la acción izquierda en modo oscuro. |
| `--nav-bar-right-icon` | `—` | Establece un ícono personalizado para la acción derecha de la barra de navegación (por ejemplo, ayuda). No hay predeterminado — se establece a través de una prop del componente, no del tema. |
| `--nav-bar-right-icon-dark` | `—` | Establece un ícono personalizado para la acción derecha en modo oscuro. No hay predeterminado — se establece a través de una prop del componente, no del tema. |
| `--nav-bar-icon-size` | `24px` | Establece el tamaño de los íconos de la barra de navegación. |


### Botones

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--text-button-font-color` | `—` | Establece el color de la fuente para botones de solo texto (no rellenos). |
| `--text-button-font-color-dark` | `—` | Establece el color de la fuente para botones de solo texto (no rellenos) en modo oscuro. |
| `--button-font-color` | `#ffffff` | Establece el color de la fuente para los botones. |
| `--button-font-color-dark` | `—` | Establece el color de la fuente para los botones en modo oscuro. |
| `--button-font-color-disabled` | `#ffffff` | Define el color de la fuente para los botones deshabilitados. |
| `--button-font-color-disabled-dark` | `—` | Define el color de la fuente para los botones deshabilitados en modo oscuro. |
| `--button-border-radius` | `8px` | Especifica el radio del borde de los botones. |
| `--button-background-color-disabled` | `#009EE3` | Define el color de fondo para los botones deshabilitados. |
| `--button-background-color-disabled-dark` | `—` | Define el color de fondo para los botones deshabilitados en modo oscuro. |
| `--button-opacity-disabled` | `0.2` | Especifica la opacidad para los botones deshabilitados. |


### Banners

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--banner-border-radius` | `8px` | Especifica el radio del borde de los banners. |
| `--banner-background-color` | `#ffffff` | Establece el color de fondo de los banners. |
| `--banner-background-color-dark` | `#011432` | Establece el color de fondo de los banners en modo oscuro. |
| `--banner-background-color-error` | `#ffffff` | Establece el color de fondo para los banners de error. |
| `--banner-background-color-error-dark` | `#011432` | Establece el color de fondo para los banners de error en modo oscuro. |
| `--banner-background-color-info` | `#ffffff` | Establece el color de fondo para los banners de información. *(no en la lista original de 183 elementos — añadido ya que ya está implementado)* |
| `--banner-background-color-info-dark` | `#011432` | Establece el color de fondo para los banners de información en modo oscuro. *(no en la lista original de 183 elementos — añadido ya que ya está implementado)* |
| `--banner-background-color-success` | `#ffffff` | Establece el color de fondo para los banners de éxito. *(no en la lista original de 183 elementos — añadido ya que ya está implementado)* |
| `--banner-background-color-success-dark` | `#011432` | Establece el color de fondo para los banners de éxito en modo oscuro. *(no en la lista original de 183 elementos — añadido ya que ya está implementado)* |
| `--banner-background-color-warning` | `#ffffff` | Establece el color de fondo para los banners de advertencia. *(no en la lista original de 183 elementos — añadido ya que ya está implementado)* |
| `--banner-background-color-warning-dark` | `#011432` | Establece el color de fondo para los banners de advertencia en modo oscuro. *(no en la lista original de 183 elementos — añadido ya que ya está implementado)* |
| `--banner-border-color` | `#e2e6e9` | Especifica el color del borde de los banners. |
| `--banner-border-color-dark` | `#2b3d54` | Especifica el color del borde de los banners en modo oscuro. |
| `--banner-border-color-left-error` | `#f90e06` | Color del borde izquierdo para los banners de error. |
| `--banner-border-color-left-error-dark` | `#e04a39` | Color del borde izquierdo para los banners de error en modo oscuro. |
| `--banner-border-color-left-success` | `#59c837` | Color del borde izquierdo para los banners de éxito. |
| `--banner-border-color-left-success-dark` | `#59c837` | Color del borde izquierdo para los banners de éxito en modo oscuro. |
| `--banner-border-color-left-info` | `#0663f9` | Color del borde izquierdo para los banners de información. |
| `--banner-border-color-left-info-dark` | `#0663f9` | Color del borde izquierdo para los banners de información en modo oscuro. |
| `--banner-border-color-left-warning` | `#f9c806` | Color del borde izquierdo para los banners de advertencia. |
| `--banner-border-color-left-warning-dark` | `#f9c806` | Color del borde izquierdo para los banners de advertencia en modo oscuro. |
| `--banner-border-left-width` | `0.25rem` | Controla el grosor del borde izquierdo para las variantes de banners. Establecer en `0` para eliminar el borde izquierdo y depender solo del color de fondo. |
| `--banner-icon-color-error` | `#f90e06` | Color del ícono para los banners de error. |
| `--banner-icon-color-error-dark` | `#e04a39` | Color del ícono para los banners de error en modo oscuro. |
| `--banner-icon-color-success` | `#59c837` | Color del ícono para los banners de éxito. |
| `--banner-icon-color-success-dark` | `#59c837` | Color del ícono para los banners de éxito en modo oscuro. |
| `--banner-icon-color-info` | `#0663f9` | Color del ícono para los banners de información. |
| `--banner-icon-color-info-dark` | `#0663f9` | Color del ícono para los banners de información en modo oscuro. |
| `--banner-icon-color-warning` | `#f9c806` | Color del ícono para los banners de advertencia. |
| `--banner-icon-color-warning-dark` | `#f9c806` | Color del ícono para los banners de advertencia en modo oscuro. |
| `--banner-icon-size` | `24px` | Establece el tamaño del ícono para los íconos de los banners. |
| `--banner-icon-name-error` | `—` | Establece el ícono utilizado para los banners de error. Sin valor predeterminado — no se muestra ícono a menos que se proporcione. |
| `--banner-icon-name-success` | `—` | Establece el ícono utilizado para los banners de éxito. Sin valor predeterminado — no se muestra ícono a menos que se proporcione. |
| `--banner-icon-name-info` | `—` | Establece el ícono utilizado para los banners de información. Sin valor predeterminado — no se muestra ícono a menos que se proporcione. |
| `--banner-icon-name-warning` | `—` | Establece el ícono utilizado para los banners de advertencia. Sin valor predeterminado — no se muestra ícono a menos que se proporcione. |
| `--banner-title-color` | `#161a1d` | Establece el color de los títulos de los banners. |
| `--banner-title-color-dark` | `#eef3f8` | Establece el color de los títulos de los banners en modo oscuro. |
| `--banner-body-color` | `#576775` | Especifica el color del texto del cuerpo de los banners. |
| `--banner-body-color-dark` | `#a6b4c3` | Especifica el color del texto del cuerpo de los banners en modo oscuro. |
| `--banner-title-font-weight` | `600` | Define el peso de la fuente de los títulos de los banners. |
| `--banner-body-font-weight` | `600` | Especifica el peso de la fuente del texto del cuerpo de los banners. |
| `--banner-box-shadow` | `0 2px 4px 0 rgb(0 0 0 / 5%)` | Añade un efecto de sombra a los banners. |


### Campos de Entrada

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--input-text-font-size` | `1rem` | Establece el tamaño de fuente para el texto del campo de entrada. |
| `--input-text-font-color` | `#161a1d` | Establece el color de fuente para el texto del campo de entrada. |
| `--input-text-font-color-dark` | `#eef3f8` | Establece el color de fuente para el texto del campo de entrada en modo oscuro. |
| `--input-text-border-radius` | `8px` | Define el radio del borde para los campos de entrada. |
| `--input-text-border-color` | `#161a1d` | Especifica el color del borde para los campos de entrada. |
| `--input-text-border-color-dark` | `#2b3d54` | Especifica el color del borde para los campos de entrada en modo oscuro. |
| `--input-text-outline-border-color` | `#0663f980` | Define el color del borde de contorno para los campos de entrada (como un efecto hover). |
| `--input-text-outline-border-color-dark` | `#0663f980` | Define el color del borde de contorno para los campos de entrada en modo oscuro. |
| `--input-text-border-color-error` | `#f90e06` | Establece el color del borde para los campos de entrada en estado de error. |
| `--input-text-border-color-error-dark` | `#e04a39` | Establece el color del borde para los campos de entrada en estado de error, en modo oscuro. |
| `--input-text-placeholder-color` | `#8a9aa8` | Define el color para el texto del marcador de posición. |
| `--input-text-placeholder-color-dark` | `#2b3d54` | Define el color para el texto del marcador de posición en modo oscuro. |
| `--input-text-label-color` | `#414d58` | Establece el color de la etiqueta para los campos de entrada. |
| `--input-text-label-color-dark` | `#eef3f8` | Establece el color de la etiqueta para los campos de entrada en modo oscuro. |
| `--input-text-label-color-error` | `#f90e06` | Especifica el color de la etiqueta para los campos de entrada en estado de error. |
| `--input-text-label-color-error-dark` | `#e04a39` | Especifica el color de la etiqueta para los campos de entrada en estado de error, en modo oscuro. |
| `--input-text-label-variation` | `outlined` | Especifica la posición de variación de la etiqueta. Las opciones posibles son `outlined` y `top`. |
| `--input-text-label-weight` | `600` | Establece el peso de la fuente para las etiquetas de los campos de entrada. |
| `--input-text-label-font-size` | `0.75rem` | Establece el tamaño de fuente para las etiquetas de los campos de entrada. |
| `--input-text-assistive-color` | `#2b343b` | Establece el color para el texto asistivo (de ayuda) debajo de un campo de entrada. |
| `--input-text-assistive-color-dark` | `#eef3f8` | Establece el color para el texto asistivo en modo oscuro. |
| `--input-text-assistive-color-error` | `#f90e06` | Establece el color para el texto asistivo cuando el campo de entrada está en estado de error. |
| `--input-text-assistive-color-error-dark` | `#e04a39` | Establece el color para el texto asistivo en estado de error, en modo oscuro. |
| `--input-text-assistive-font-weight` | `400` | Establece el peso de la fuente para el texto asistivo. |
| `--input-text-icon-color` | `#8a9aa8` | Establece el color de los íconos de entrada. |
| `--input-text-icon-color-dark` | `#eef3f8` | Establece el color de los íconos de entrada en modo oscuro. |
| `--input-text-icon-opacity` | `—` | Establece la opacidad para los íconos del campo de entrada. No hay valor predeterminado — actualmente no se consume en CSS. |
| `--input-text-icon-size` | `40px` | Establece el tamaño para los íconos del campo de entrada. |
| `--input-text-icon-order` | `1` | Establece el orden de visualización de los íconos dentro de un campo de entrada. |
| `--input-text-password-visible-icon` | `show` | Establece el ícono que se muestra cuando el contenido de un campo de contraseña es visible. |
| `--input-text-password-non-visible-icon` | `hide` | Establece el ícono que se muestra cuando el contenido de un campo de contraseña está oculto. |


### Checkbox

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--checkbox-border-color` | `#161a1d` | Establece el color del borde para los checkboxes. |
| `--checkbox-border-color-dark` | `#2b3d54` | Establece el color del borde para los checkboxes en modo oscuro. |
| `--checkbox-border-radius` | `4px` | Establece el radio del borde para los checkboxes. |


### Diálogo

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--dialog-title-color` | `#161a1d` | Establece el color de los títulos de los diálogos. |
| `--dialog-title-color-dark` | `#eef3f8` | Establece el color de los títulos de los diálogos en modo oscuro. |
| `--dialog-body-color` | `#8a9aa8` | Establece el color del texto del cuerpo de los diálogos. |
| `--dialog-body-color-dark` | `#6a7e93` | Establece el color del texto del cuerpo de los diálogos en modo oscuro. |
| `--dialog-body-font-size` | `1rem` | Establece el tamaño de fuente del texto del cuerpo de los diálogos. |
| `--dialog-body-line-height` | `24px` | Establece la altura de línea del texto del cuerpo de los diálogos. |


### Pestañas

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--tab-text-color` | `#0663f9` | Define el color del texto para las pestañas. |
| `--tab-text-color-dark` | `#0663f9` | Establece el color del texto para las pestañas en modo oscuro. |
| `--tab-border-color` | `#0663f9` | Especifica el color del borde para la parte inferior de las pestañas. |
| `--tab-border-color-dark` | `#0663f9` | Establece el color del borde para la parte inferior de las pestañas en modo oscuro. |


### Desplegable

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--dropdown-border-radius` | `8px` | Establece el radio del borde para los campos desplegables. |
| `--dropdown-font-color` | `#161a1d` | Establece el color de la fuente para los campos desplegables. |
| `--dropdown-font-color-dark` | `#eef3f8` | Establece el color de la fuente para los campos desplegables en modo oscuro. |
| `--dropdown-label-display` | `visible` | Controla cómo se muestra la etiqueta del desplegable. |


### Lista de Ítems

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--item-list-hover-color` | `#f0f2f4` | Establece el color de fondo de un ítem de la lista al pasar el cursor. |
| `--item-list-hover-color-dark` | `#0b1c3c` | Establece el color de fondo de un ítem de la lista al pasar el cursor, en modo oscuro. |
| `--item-list-skeleton-color` | `#f0f2f4` | Establece el color del esqueleto de carga mostrado mientras se carga una lista. |
| `--item-list-skeleton-color-dark` | `#0b1c3c` | Establece el color del esqueleto de carga en modo oscuro. |
| `--item-list-icon-color` | `#161a1d` | Establece el color de los íconos dentro de un ítem de la lista. |
| `--item-list-icon-color-dark` | `#eef3f8` | Establece el color de los íconos dentro de un ítem de la lista en modo oscuro. |
| `--item-list-title-color` | `#161a1d` | Establece el color del título de un ítem de la lista. |
| `--item-list-title-color-dark` | `#eef3f8` | Establece el color del título de un ítem de la lista en modo oscuro. |
| `--item-list-body-color` | `#6c8193` | Establece el color del cuerpo/texto secundario de un ítem de la lista. |
| `--item-list-body-color-dark` | `#dee6ec` | Establece el color del cuerpo/texto secundario de un ítem de la lista en modo oscuro. |


### Acordeón

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--accordion-icon-color` | `#161a1d` | Establece el color del ícono de expandir/colapsar del acordeón. |
| `--accordion-icon-color-dark` | `#eef3f8` | Establece el color del ícono de expandir/colapsar del acordeón en modo oscuro. |
| `--accordion-title-color` | `#161a1d` | Establece el color del título del acordeón. |
| `--accordion-title-color-dark` | `#eef3f8` | Establece el color del título del acordeón en modo oscuro. |


### Superposición, Superficie, Divisor, Imagen y Diseño

Puedes agregar un color de superposición personalizado cuando el widget se carga en tu aplicación de escritorio. Recomendamos elegir un color neutro relacionado con tu marca para mantener el contexto ambiental.

Opacidad de la superposición
No importa qué color elijas, Belvo establece automáticamente la opacidad al 90%. Esto se debe a las siguientes mejores prácticas de UX:

- Con opacidades más bajas (menos del 70%), los usuarios pueden experimentar dificultad para enfocarse en el flujo, ya que tendrán "ruido visual" en el fondo.
- Los colores de bloque (opacidad establecida al 100%) pueden causar un cambio drástico, resultando en una experiencia discontinua o antinatural.


| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--overlay-background-color` | `#03286380` | Establece el color de fondo de la superposición mostrada detrás del widget. Por defecto es gris. |
| `--overlay-background-color-dark` | `#03286380` | Establece el color de fondo de la superposición en modo oscuro. |
| `--surface-color` | `#ffffff` | Establece el color base de la superficie (fondo) del widget. |
| `--surface-color-dark` | `#011432` | Establece el color base de la superficie (fondo) del widget en modo oscuro. |
| `--divider-color` | `#e2e6e9` | Establece el color de las líneas divisorias. |
| `--divider-color-dark` | `#2b3d54` | Establece el color de las líneas divisorias en modo oscuro. |
| `--image-border-radius` | `8px` | Establece el radio del borde para las imágenes mostradas dentro del widget. |
| `--layout-side-padding` | `16px` | Establece el relleno lateral horizontal para el diseño del widget. |


### Detalles del Consentimiento

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--consent-details-identification-section-icon` | `article` | Establece el ícono para la sección de identificación en la pantalla de detalles del consentimiento. |
| `--consent-details-expiration-section-icon` | `date_range` | Establece el ícono para la sección de expiración en la pantalla de detalles del consentimiento. |
| `--consent-details-header-background-color` | `color-mix(in srgb, #0663f9, white 90%) (≈ azul pálido)` | Establece el color de fondo del encabezado de la pantalla de detalles del consentimiento. |
| `--consent-details-header-background-color-dark` | `color-mix(in srgb, #0663f9, #011432 80%) (≈ azul marino oscuro)` | Establece el color de fondo del encabezado de la pantalla de detalles del consentimiento en modo oscuro. |


### Resumen de Consentimiento

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--consent-summary-identification-section-icon` | `profile_filled` | Establece el ícono para la sección de identificación en la pantalla de resumen de consentimiento. |
| `--consent-summary-expiration-section-icon` | `date_range` | Establece el ícono para la sección de expiración en la pantalla de resumen de consentimiento. |
| `--consent-summary-purpose-section-icon` | `badge_check` | Establece el ícono para la sección de propósito en la pantalla de resumen de consentimiento. |
| `--consent-summary-shared-information-section-icon` | `info` | Establece el ícono para la sección de información compartida en la pantalla de resumen de consentimiento. |


### Pantalla de Consentimiento en Proceso

La pantalla de carga que se muestra mientras se procesa el consentimiento.

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--fetching-consent-title-font-size` | `1.125rem` | Establece el tamaño de fuente del título en la pantalla de consentimiento en proceso. |
| `--fetching-consent-title-line-height` | `1.75rem` | Establece la altura de línea del título en la pantalla de consentimiento en proceso. |
| `--fetching-consent-body-font-size` | `0.875rem` | Establece el tamaño de fuente del texto del cuerpo en la pantalla de consentimiento en proceso. |
| `--fetching-consent-body-line-height` | `22px` | Establece la altura de línea del texto del cuerpo en la pantalla de consentimiento en proceso. |


### Pantalla de Redirección

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--redirect-title-font-size` | `—` | Establece el tamaño de fuente del título en la pantalla de redirección. No tiene valor predeterminado en tiempo de ejecución — no se encontró consumidor del componente en el código; efectivamente no utilizado/legado. |
| `--redirect-title-line-height` | `—` | Establece la altura de línea del título en la pantalla de redirección. No tiene valor predeterminado en tiempo de ejecución — no se encontró consumidor del componente en el código; efectivamente no utilizado/legado. |
| `--redirect-body-font-size` | `—` | Establece el tamaño de fuente del texto del cuerpo en la pantalla de redirección. No tiene valor predeterminado en tiempo de ejecución — no se encontró consumidor del componente en el código; efectivamente no utilizado/legado. |
| `--redirect-body-line-height` | `—` | Establece la altura de línea del texto del cuerpo en la pantalla de redirección. No tiene valor predeterminado en tiempo de ejecución — no se encontró consumidor del componente en el código; efectivamente no utilizado/legado. |
| `--redirect-openfinance-logo-visibility` | `—` | Controla si el logo de Open Finance es visible en la pantalla de redirección. No tiene valor predeterminado en tiempo de ejecución — no se encontró consumidor del componente en el código; efectivamente no utilizado/legado. |