# El objeto styling

Las catorce propiedades del objeto styling que aplica el formulario insertado, con sus valores por defecto, y los textos que van en la raíz del formulario.

`styling` es el objeto que guarda el aspecto de un formulario de captación: colores, tipografía, medidas y si se ven el título y la descripción. Lo envías al crear o editar el formulario con las [operaciones de formularios de la herramienta MCP `org_integrations_settings`](https://os.utilia.ai/docs/developers/mcp/reference#org_integrations_settings), y el panel lo rellena desde la pestaña «Estilo» del constructor. La guía de uso es [Personalización y estilos](https://os.utilia.ai/docs/guides/lead-forms/styling).

El formulario insertado aplica exactamente las catorce propiedades de esta página. Cualquier otra clave dentro de `styling` se guarda, pero no se valida ni tiene ningún efecto: si un ajuste no se ve en tu web, comprueba primero que su nombre está aquí.

## Propiedades

| Nombre | Tipo | Obligatorio | Por defecto | Descripción |
| - | - | - | - | - |
| `primaryColor` | `string` | No | `#3b82f6` | Botón de envío, borde del campo activo, enlaces del consentimiento y botón flotante. |
| `backgroundColor` | `string` | No | `#ffffff` | Fondo del formulario. |
| `textColor` | `string` | No | `#1f2937` | Etiquetas, valores y títulos. |
| `borderColor` | `string` | No | `#e5e7eb` | Borde de los campos y de los separadores. |
| `buttonTextColor` | `string` | No | `#ffffff` | Texto del botón de envío e icono del botón flotante. |
| `fontFamily` | `string` | No | | Familia de Google Fonts ('Inter', 'Roboto'...). Se carga a través de UTILIA OS, nunca desde Google en el navegador del visitante. Sin ella, hereda la de tu página. |
| `fontSize` | `number` | No | `14` | Tamaño base del texto en píxeles; títulos y textos de apoyo se calculan a partir de él. |
| `borderRadius` | `number` | No | `8` | Radio de los campos en píxeles. La tarjeta del formulario usa este valor más 4. |
| `borderWidth` | `number` | No | `1` | Grosor del borde de los campos en píxeles. |
| `buttonBorderRadius` | `number` | No | `6` | Radio del botón de envío en píxeles. |
| `maxWidth` | `number` | No | `480` | Ancho máximo en píxeles. No se aplica a la barra fija. |
| `padding` | `number` | No | `24` | Espaciado interior en píxeles. |
| `showTitle` | `boolean` | No | `true` | Muestra el nombre del formulario (name) en la cabecera. |
| `showDescription` | `boolean` | No | `true` | Muestra su descripción (description) bajo el nombre. |

Lo que no se puede cambiar: el fondo oscuro detrás de la ventana emergente (negro al 40 %) y el botón flotante, que es redondo, lleva un icono de sobre y toma su esquina de `widgetPosition`, no de `styling`. Cuida el contraste entre `textColor` y `backgroundColor`: para una lectura cómoda, al menos 4,5 a 1.

## Textos: en la raíz, no en styling

Los textos del formulario son propiedades de la raíz, al mismo nivel que `styling`:

| Nombre | Tipo | Obligatorio | Por defecto | Descripción |
| - | - | - | - | - |
| `name` | `string` | Sí | | Nombre del formulario; es el título de la cabecera. |
| `description` | `string` | No | | Descripción bajo el título. |
| `submitButtonText` | `string` | No | `Enviar` | Botón de envío. Hasta 100 caracteres. |
| `successTitle` | `string` | No | `Gracias` | Título tras un envío correcto. Hasta 200 caracteres. |
| `successMessage` | `string` | No | | Mensaje tras un envío correcto. Por defecto, «Hemos recibido tu información correctamente.» |
| `privacyText` | `string` | No | | Si lo pones, el formulario añade una casilla obligatoria con este texto. |
| `privacyUrl` | `string` | No | | Si es una dirección completa (https\://...), la casilla de privacyText lleva el enlace «Ver privacidad». Hasta 500 caracteres. |
| `showBranding` | `boolean` | No | `true` | Muestra «Powered by UTILIA OS» al pie. |

## Ejemplo

```json
{
  "styling": {
    "primaryColor": "#2563EB",
    "backgroundColor": "#FFFFFF",
    "textColor": "#111827",
    "borderColor": "#E5E7EB",
    "buttonTextColor": "#FFFFFF",
    "fontFamily": "Inter",
    "fontSize": 14,
    "borderRadius": 8,
    "borderWidth": 1,
    "buttonBorderRadius": 6,
    "maxWidth": 480,
    "padding": 24,
    "showTitle": true,
    "showDescription": true
  },
  "submitButtonText": "Enviar solicitud",
  "successTitle": "Solicitud recibida",
  "successMessage": "Te escribimos en menos de un día laborable.",
  "showBranding": false
}
```

Un cambio de estilo puede tardar hasta 5 minutos en verse en tu web, porque la configuración pública del formulario se guarda ese tiempo.

## Siguiente paso

Con los campos y el estilo listos, publica el formulario e [insértalo en tu web](https://os.utilia.ai/docs/developers/lead-forms/embed).