# Hosted Widget Branding and Customization

Este artículo se refiere al widget multirregional
El contenido de este artículo se refiere al widget multirregional (aplicable para Empleos y Fiscal en México, así como Empleos en Brasil). Si deseas operar en Brasil, por favor consulta nuestro Hosted Widget para OFDA Regulada.

Con el Hosted Widget de Belvo, puedes personalizar y dar marca al widget de dos maneras: a través de tu solicitud de token de acceso y mediante la herramienta del panel de control 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`.

### 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 las siguientes pantallas:

- 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:

**Instrucciones**
Para agregar un ícono de empresa personalizado, simplemente añade 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 agrega 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",
        }
     }
}
```

### Agregar un enlace a tu política de privacidad

Puedes agregar un enlace a tu política de privacidad (o términos y condiciones) en la pantalla inicial del widget que, al ser clicado, redirigirá a tus usuarios a la página web vinculada. Esto ayuda a tus usuarios a entender mejor cuál es tu caso de uso respecto a los datos que estás solicitando. Por defecto, el widget incluirá la URL a la política de privacidad de Belvo (`<https://belvo.com/terms-service/`>).

**Instrucciones**
Para agregar un enlace a tu política de privacidad en la pantalla de conexión inicial, simplemente añade la URL de tu política al key `company_terms_url`.

```json Show Belvo Middle Logo
{
  "widget": {
    "branding": {
      "company_terms_url": "https://belvo.com/terms-service/",
        }
     }
}
```

### Rastrea la versión de tus términos y condiciones

Al utilizar una URL personalizada para términos y condiciones (a través de `company_terms_url`), puedes rastrear qué versión de tus T&C aceptó el usuario durante el flujo del widget. Esto es útil para propósitos de cumplimiento y auditoría, especialmente cuando tus términos se actualizan con el tiempo.

**Instrucciones**
Para rastrear la versión de los T&C, agrega el identificador de la versión a la clave `company_terms_version`. Este parámetro es obligatorio cuando proporcionas una `company_terms_url` personalizada (no usando el valor predeterminado de Belvo).

Formato recomendado
Recomendamos usar un formato de fecha (por ejemplo, `2024-03-15` o `20240315`) para indicar claramente cuándo se actualizaron por última vez tus términos. Esto facilita el seguimiento de los cambios a lo largo del tiempo en comparación con los números de versión.

```json Company Terms and Conditions
{
  "widget": {
    "branding": {
      "company_terms_url": "https://yourcompany.com/terms",
      "company_terms_version": "2024-03-15",
        }
     }
}
```

### Agregar texto a la pantalla de conexión

Puedes añadir un mensaje personalizado en la pantalla inicial del widget para proporcionar información adicional a tus usuarios sobre por qué necesitan conectar su cuenta usando Belvo. Esto ayuda a impulsar la conversión y aumentar la confianza del usuario final para vincular su cuenta.

**Instrucciones**
Para agregar texto personalizado en la pantalla inicial de conexión:

1. Añade el título del cuadro expandible a la clave `company_benefit_header`.
📝 La longitud máxima (incluyendo espacios) para el título es de 30 caracteres.
2. Añade el contenido para el cuadro expandible a la clave `company_benefit_content`.
📝 La longitud máxima (incluyendo espacios) para el contenido es de 140 caracteres.


Debes proporcionar contenido tanto para `company_benefit_header` como para `company_benefit_content`. Si no proporcionas contenido para ambos, no aparecerá nada.

```json Benefits
{
  "widget": {
    "branding": {
      "company_benefit_header": "Aprobaciones más rápidas",
      "company_benefit_content": "Usar Belvo reduce el tiempo de aprobación de tu préstamo hasta en 15 días.",
        }
     }
}
```

### Agregar un mensaje de salida

Puedes agregar un mensaje personalizado para mostrar cuando un usuario final elige cancelar la conexión de su cuenta. El mensaje aparece debajo de un aviso estándar "¿Estás seguro de que deseas cancelar?". Puedes resaltar los beneficios de continuar vinculando su cuenta usando el widget en comparación con los métodos tradicionales.

**Instrucciones**

Para agregar un mensaje de salida personalizado, añade el contenido a mostrar en la clave `opportunity_loss`.

📝 Tu mensaje puede tener un máximo de 120 caracteres, incluidos los espacios.

```json Exit Message
{
  "widget": {
    "branding": {
      ...
      "opportunity_loss": "Puede tomar hasta 20 días evaluar tu solicitud usando métodos tradicionales.",
      ...
        }
     }
}
```

### Ocultar mensaje en la pantalla de conexión de cuenta

Puedes optar por ocultar el mensaje "*+1m usuarios han conectado sus cuentas de forma segura usando Belvo*" que aparece cuando tu usuario llega a la pantalla de conexión de cuenta en el widget. Por defecto, este mensaje es visible en el widget (`true`).

**Instrucciones**

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

```json Ocultar Mensaje Social
{
  "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. |


### Pantalla de Credenciales

| Variable CSS | Predeterminado | Descripción |
|  --- | --- | --- |
| `--credentials-screen-extra-info-align` | `center` | Establece la alineación del texto de información adicional en la pantalla de credenciales. |
| `--credentials-screen-extra-info-font-weight` | `400` | Establece el peso de la fuente del texto de información adicional en la pantalla de credenciales. |
| `--credentials-screen-extra-info-font-size` | `1rem` | Establece el tamaño de la fuente del texto de información adicional en la pantalla de credenciales. |
| `--credentials-screen-extra-info-line-height` | `24px` | Establece la altura de línea del texto de información adicional en la pantalla de credenciales. |
| `--credentials-screen-extra-info-color` | `#161a1d` | Establece el color del texto de información adicional en la pantalla de credenciales. |
| `--credentials-screen-extra-info-color-dark` | `#eef3f8` | Establece el color del texto de información adicional en la pantalla de credenciales en modo oscuro. |
| `--credentials-screen-title-align` | `center` | Establece la alineación del título de la pantalla de credenciales. |
| `--credentials-screen-title-font-weight` | `600` | Establece el peso de la fuente del título de la pantalla de credenciales. |
| `--credentials-screen-title-font-size` | `1.125rem` | Establece el tamaño de la fuente del título de la pantalla de credenciales. |
| `--credentials-screen-title-line-height` | `26px` | Establece la altura de línea del título de la pantalla de credenciales. |
| `--credentials-screen-title-color` | `#161a1d` | Establece el color del título de la pantalla de credenciales. |
| `--credentials-screen-title-color-dark` | `#eef3f8` | Establece el color del título de la pantalla de credenciales en modo oscuro. |
| `--credentials-screen-institution-logo-border-radius` | `8px` | Define el radio del borde del logo de la institución en la pantalla de credenciales. |
| `--credentials-screen-header-logo-reversed` | `false` | Invierte el orden del logo de la institución y el encabezado (título/información adicional) cuando se establece en `true`. |
| `--credentials-screen-help-link-align` | `center` | Establece la alineación del enlace de ayuda en la pantalla de credenciales. |
| `--credentials-screen-help-link-font-size` | `0.875rem` | Establece el tamaño de la fuente del enlace de ayuda en la pantalla de credenciales. |
| `--credentials-screen-counter-border-radius` | `8px` | Define el radio del borde para el contador de la pantalla de credenciales. |
| `--credentials-screen-counter-font-size` | `0.875rem` | Establece el tamaño de la fuente para el contador de la pantalla de credenciales. |