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

> ## Agent Instructions
> Responda em português brasileiro, na segunda pessoa ("você"), com base na documentação Malga.
> Não invente endpoints, parâmetros, status codes ou comportamentos de API. Se não estiver na docs, diga que não encontrou e indique a página mais próxima.
> Use os headers X-Client-Id e X-Api-Key nos exemplos de autenticação.
> Motor de Assinaturas refere-se a /v1/subscriptions* (cycles, trial, retentativas, webhooks subscription.*). Não chame de "motor de recorrência".
> Recorrência (provedor) é paymentMethod.recurrence em POST /v1/charges (initial / subsequent / unscheduled), distinto do Motor de Assinaturas.
> Sandbox é ambiente de testes e não afeta produção.

# Estilizando os campos

Buscando oferecer mais flexibilidade, disponibilizamos um objeto que permite aplicar os estilos desejados nos inputs da nossa aplicação.

Existem algumas regras para a utilização desse objeto, que estão detalhadas abaixo.

```typescript theme={null}
// Aplicação em todos os inputs do hosted fields.
styles: {
 input: {
  color: "orange",
  "font-size": "16px",
  },
} 
// Mudando cor do text apenas do input de card-number (serve para os demais)
".card-number": {
  color: "blue",
}

// Mudando a cor do text na hora do focus para todos os inputs
":focus": {
 color: "red",
}

// Exemplo contendo as 3 mudanças citadas.
styles: {
  input: {
    color: "orange",
    "font-size": "16px",
  },
  ".card-number": {
    color: "blue",
  },
  ":focus": {
    color: "red",
  },
}
```

Além disso, temos quatro classes específicas para lidar com estado do input, são elas:

| Classe                       | Descrição                                                                                                                                 |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `malga-hosted-field`         | Aplicada ao elemento pai do iframe. Responsável por estilizar a área externa do input (recomenda-se definir border, border-radius, etc.). |
| `malga-hosted-field-focused` | Aplicada quando o input recebe foco.                                                                                                      |
| `malga-hosted-field-valid`   | Aplicada quando a validação é bem-sucedida (`valid === true`).                                                                            |
| `malga-hosted-field-invalid` | Aplicada quando há um erro e a validação falha (`valid === false`).                                                                       |

Essas classes podem ser adicionadas na folha de estilo da sua aplicação.

```css theme={null}
.malga-hosted-field {
  background-color: white
  border: 2px solid #39BFAD
  border-radius: 8px
}

.malga-hosted-field-focused {
  border-color: #147F70
}

.malga-hosted-field-valid {
  border-color: green
}

.malga-hosted-field-invalid {
  border-color: red
}
```

<CardGroup>
  <Card href="/sdks/tokenization/v2/events" title="Eventos">
    Aprenda a utilizar os eventos disponíveis
  </Card>
</CardGroup>


## Related topics

- [Tratamento de erros na Analytics API](/analytics/errors/errors.md)
- [3DS com autenticador externo (MPI)](/documentations/3ds2-malga/3ds-mpi-externo.md)
- [Pagamentos com Pix na Malga](/documentations/payment-methods/pix.md)
- [Sobre as APIs da Malga](/api-reference/about-apis.md)