> ## Documentation Index
> Fetch the complete documentation index at: https://mozdocs.mozartfintech.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tema

La pestaña de tema te permite personalizar la apariencia de tu mozbot.

## Global

Esta sección te permite habilitar o deshabilitar la marca de mozbot, cambiar la fuente y el fondo de tu bot.

## Chat

Esta sección te permite personalizar todos los componentes del chat (avatares, burbujas, entradas, etc.).

Haz clic en el avatar del bot para cambiar la imagen:

<Frame>
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/mozartfintech/images/theme/avatar.png" alt="Avatar" />
</Frame>

## CSS Personalizado

También puedes decidir personalizar aún más añadiendo cualquier CSS personalizado que desees. Para esto, haz clic derecho en el bot en la página de Tema e inspecciona el elemento que deseas personalizar:

<Frame>
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/mozartfintech/images/theme/custom-css.png" alt="Inspección de CSS personalizado" />
</Frame>

Por ejemplo, si quiero que mis botones sean más redondeados y tengan un color degradado elegante, puedo agregar esto al CSS personalizado:

```css
.mozbot-button {
  border-radius: 40px;
  background-image: linear-gradient(to right, #e052a0, #f15c41);
  border: none;
}
```

<Frame>
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/mozartfintech/images/theme/fancy-button.png" alt="Botón elegante" />
</Frame>

### Personalizar el color de un solo botón

Gracias al CSS personalizado, puedes personalizar el color de un solo botón, por ejemplo, utilizando el atributo `data-itemid`:

```css
[data-itemid='cl3iunm4p000f2e6gfr8cznnn'] {
  background-color: gray;
  border-color: gray;
}
```

Para encontrar el ID del elemento de un botón, haz clic derecho en el botón e inspecciona el elemento:

<Frame>
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/mozartfintech/images/theme/button-inspect.png" alt="Inspección de botón" />
</Frame>