# Personalice sus páginas de inicio de sesión

La personalización cambia el aspecto del inicio de sesión alojado, del portal de la cuenta y de los correos electrónicos. La configuración se hereda en este orden: valor predeterminado de la plataforma, entorno, aplicación y organización. Cada token toma el valor del nivel más específico que lo defina.

## Qué puede configurar

- Colores: `color.primary`, `color.primary_contrast`, `color.background`, `color.surface`, `color.text`, `color.text_muted`, `color.border`, `color.link`, `color.focus_ring`, `color.error` y `color.success`, como valores hexadecimales sRGB. El modo claro y el oscuro tienen valores independientes, y `mode` puede ser `light`, `dark` o `system`.
- Fuentes: `font.body` y `font.heading` de la lista de fuentes permitidas, o una fuente cargada; `font.size_base` de 14 a 18 px.
- Forma: `radius.card` de 0 a 24 px y `radius.control` de 0 a 16 px.
- Diseño: `center`, `split_left` o `split_right`.
- Imágenes: `logo`, `logo_height` (de 24 a 80 px), `favicon` y `background_image` (solo con un diseño `split_*`).

Las organizaciones solo pueden reemplazar los tokens `logo` y `color.primary`. La personalización de una organización se muestra únicamente cuando se verifica el contexto de la organización, por ejemplo mediante una invitación válida o después del selector de organización. Un parámetro `organization` sin más no cambia el aspecto de la página.

## Protección del contraste

Al guardar, KeenAuth comprueba estos pares, por separado para el modo claro y el oscuro:

| Par | Relación mínima |
|---|---|
| Texto sobre fondo | 4.5:1 |
| `color.link` sobre fondo | 4.5:1 |
| `color.primary_contrast` sobre `color.primary` | 4.5:1 |
| Borde del control sobre fondo | 3:1 |
| Anillo de foco (`color.focus_ring`) sobre fondo | 3:1 |

La API de administración rechaza un par que no alcanza su mínimo con `422 brand_contrast_insufficient` (RFC 9457). El cuerpo del error indica el campo y sugiere el color más cercano que sí cumple; la sugerencia mantiene el tono y la saturación, y solo modifica la luminosidad. El panel ofrece la misma sugerencia con un solo clic. Un valor que no cumple no puede publicarse. Consulte [Publicar la personalización](/docs/api/management/branding/publish) para ver el formato del error.

El CSS personalizado (plan Startup) puede reducir el contraste, y KeenAuth no lo corrige. Un análisis de vista previa informa de los problemas como advertencias en el panel, y la conformidad de los cambios realizados con CSS personalizado es responsabilidad suya.

## Recursos

Suba imágenes y fuentes con `POST /v1/branding/assets`. Las imágenes pueden pesar como máximo 1 MB y las fuentes como máximo 300 KB. Se aceptan PNG, JPEG y WebP; ICO solo para favicons y WOFF2 solo para fuentes. SVG se rechaza. Las imágenes se recodifican como PNG, se reducen a un máximo de 1024×1024 px y se eliminan sus metadatos. Un entorno puede contener 200 archivos y 50 MB.

## CSS personalizado y plantillas

En el plan Startup y superiores puede añadir CSS personalizado y una plantilla de página. Las partes de una página críticas para la seguridad se dibujan en una capa protegida que su CSS no puede ocultar ni cubrir: el nombre de la aplicación y el origen verificado en las pantallas de consentimiento, la lista de permisos solicitados, los botones de permitir y denegar, las advertencias de seguridad, el banner del entorno y los enlaces legales. El JavaScript del cliente no se ejecuta en ningún plan.

Use propiedades CSS lógicas (`margin-inline-start`, no `margin-left`); las propiedades físicas se rechazan para que sus estilos funcionen también en idiomas de derecha a izquierda. Consulte [Idiomas y escritura de derecha a izquierda](/docs/guides/localization).

## Marca de KeenAuth

El inicio de sesión alojado, el portal de la cuenta y los correos electrónicos muestran una pequeña línea "Protegido por KeenAuth" en la capa protegida. En los planes Business y Enterprise, y en los entornos `development`, no se muestra. El plan se comprueba cada vez que se dibuja una página o un correo, de modo que la línea vuelve a aparecer si cambia el plan. El CSS personalizado y las sustituciones de texto no pueden ocultarla ni modificarla.

## Publicar

Los cambios se guardan como borrador y entran en vigor al publicarlos. Las versiones anteriores pueden listarse y revertirse. Las páginas de la API están bajo `/docs/api/management/branding/`, empezando por [Publicar la personalización](/docs/api/management/branding/publish).