# EliCartao

O `EliCartao` é um componente de cartão focado em **listas/pipelines** (ex.: oportunidades e propostas comerciais), com um **status semântico** padronizado.

Ele encapsula o `v-card` (Vuetify) e adiciona:

- Área de **título**
- **Badge de status** padronizado (`novo`, `rascunho`, `vendido`, `cancelado`)
- Slot de **conteúdo**
- Slot opcional de **ações**

## API

### Props

| Prop      | Tipo                                            | Padrão       | Descrição |
|----------|--------------------------------------------------|--------------|-----------|
| `titulo` | `string`                                         | `""`        | Título de fallback (se o slot `titulo` não for usado). |
| `status` | `"novo" \| "rascunho" \| "vendido" \| "cancelado"` | *(obrigatório)* | Status semântico do cartão. Controla label/cor do badge e classes. |
| `variant`| `"outlined" \| "flat" \| "elevated" \| "tonal"`      | `"outlined"` | Variante do `v-card` (Vuetify). |

### Emits

| Evento   | Payload                 | Quando dispara |
|----------|-------------------------|----------------|
| `clicar` | `(status: CartaoStatus)`| Quando o cartão for clicado (opcional; útil para padronizar navegação). |

> Observação: o componente deixa `v-bind="$attrs"` para você passar `class`, `style`, `to`, `href`, etc.

## Slots

| Slot     | Objetivo |
|----------|----------|
| `titulo` | Conteúdo customizado do título (override do `titulo`). |
| `default`| Corpo do cartão. |
| `acoes`  | Rodapé de ações (botões/links). |

## Exemplos

### 1) Cartão simples

```vue
<EliCartao titulo="Proposta #1024" status="novo">
  <div><strong>Cliente:</strong> ACME Ltda</div>
  <div><strong>Valor:</strong> R$ 12.500,00</div>
</EliCartao>
```

### 2) Título via slot + ações

```vue
<EliCartao status="vendido">
  <template #titulo>
    <span>Oportunidade #204</span>
  </template>

  <div>Cliente: Empresa X</div>

  <template #acoes>
    <EliBotao variant="text">Abrir</EliBotao>
    <EliBotao variant="text" color="secondary">Editar</EliBotao>
  </template>
</EliCartao>
```

## Casos de borda / comportamento esperado

- `status` é obrigatório e sempre deve ser um valor suportado.
- Status `cancelado` aplica leve redução de opacidade via classe CSS.
- A renderização de ações só ocorre se o slot `acoes` existir.

