# Components

> Todos los componentes derivan de los valores en `tokens.md`. El comportamiento de motion sigue las reglas de `motion.md`.
> Este archivo define estructura, estados y reglas de uso — no los valores crudos.

---

## Buttons

`[ Describí la filosofía general de los botones en este sistema: forma, energía, actitud. ]`

### Botón Primario

La acción principal de cualquier pantalla o sección. Máximo uno visible a la vez.

```
Background:   #[ HEX ]
Text:         #[ HEX ]
Border:       [ none / N px solid #HEX ]
Radius:       [ N ]px
Padding:      [ N ]px [ N ]px
Font:         [ familia ] [ peso ], [ N ]px, tracking [ N ]em
Hover bg:     #[ HEX ]
Active:       scale([ N ])
Transition:   [ N ]ms [ easing ]
```

### Botón Secundario / Outline

```
Background:   transparent
Text:         #[ HEX ]
Border:       [ N ]px solid #[ HEX ]
Hover bg:     #[ HEX ]
Hover text:   #[ HEX ]
Hover border: #[ HEX ]
```

### Botón Terciario / Ghost

```
Background:   transparent
Text:         #[ HEX ]
Border:       none
Hover text:   #[ HEX ]
```

### Estados (todos los variantes)

| Estado | Tratamiento |
|---|---|
| Default | Como especificado arriba |
| Hover | `[ Descripción ]` |
| Active | `[ ej: scale(0.98) ]` |
| Focus | `[ outline: Npx solid #HEX; outline-offset: Npx ]` — nunca eliminar |
| Disabled | `[ ej: 40% opacidad, cursor: not-allowed ]` |
| Loading | `[ ej: spinner, mismas dimensiones ]` |

---

## Typography Components

### Headings

```
Display:  [ familia ], [ size ], [ peso ], [ line-height ], [ letter-spacing ]
H1:       [ familia ], [ size ]px, [ peso ], lh [ N ], tracking [ N ]em
H2:       [ familia ], [ size ]px, [ peso ], lh [ N ], tracking [ N ]em
H3:       [ familia ], [ size ]px, [ peso ], lh [ N ], tracking [ N ]em
H4:       [ familia ], [ size ]px, [ peso ], lh [ N ]
```

`[ Regla sobre el uso de color de acento en headings. Máximo cuántas veces, cómo se aplica. ]`

### Body

```
Body large:  [ familia ] [ peso ], [ N ]px, lh [ N ]
Body:        [ familia ] [ peso ], [ N ]px, lh [ N ]
```

### Labels & Captions

```
Section label: [ N ]px, tracking [ N ]em, uppercase, color #[ HEX ]
Caption:       [ N ]px, color #[ HEX ], alineación
Mono label:    [ familia mono ] [ N ]px, color #[ HEX ]
```

---

## Cards

`[ Describí qué es una card en este sistema y cuándo se usa. ]`

### Card Estándar

```
Background:   #[ HEX ]
Border:       [ N ]px solid #[ HEX ]
Radius:       [ N ]px
Padding:      [ N ]px
Hover border: #[ HEX ]
Transition:   border-color [ N ]ms [ easing ]
```

### Anatomía de una Card

1. **`[ Elemento 1 ]`** — `[ ej: Label — categoría o fecha. N px, color acento. ]`
2. **`[ Elemento 2 ]`** — `[ ej: Título — H3, familia bold. ]`
3. **`[ Elemento 3 ]`** — `[ ej: Cuerpo — N px, color muted. ]`
4. **`[ Elemento 4 ]`** — `[ ej: Footer — link o metadata. Opcional. ]`

### Variantes de Card

| Variante | Uso |
|---|---|
| `[ Variante 1 ]` | `[ ... ]` |
| `[ Variante 2 ]` | `[ ... ]` |
| `[ Variante 3 ]` | `[ ... ]` |

---

## Forms

`[ Filosofía de formularios: qué tan simples, cuántos campos, tono de los labels. ]`

### Input

```
Background:   #[ HEX ]
Border:       [ N ]px solid #[ HEX ]
Radius:       [ N ]px
Padding:      [ N ]px [ N ]px
Text:         #[ HEX ], [ N ]px
Placeholder:  #[ HEX ]
Focus:        border-color #[ HEX ]
Transition:   border-color [ N ]ms [ easing ]
```

### Textarea

`[ Mismo que input. Altura mínima, resize: vertical o no. ]`

### Label

```
Font:    [ familia ] [ peso ], [ N ]px, tracking [ N ]em
Color:   #[ HEX ]
Spacing: [ N ]px debajo del label, encima del input
```

### Form Layout

`[ Describí si los formularios van en columna, cuántos campos por fila, dónde va el botón. ]`

### Error State

```
Border:  [ N ]px solid #[ HEX ]
Message: [ N ]px, #[ HEX ], debajo del input, [ N ]px de gap
```

---

## Navigation

### Desktop Nav

```
Position:    sticky top-0
Background:  [ color + opacidad ]
Blur:        [ backdrop-filter: blur(Npx) o no ]
Border:      [ N ]px solid #[ HEX ] (bottom)
Height:      [ N ]px
Padding:     0 [ N ]px
```

Links: `[ N ]`px, tracking `[ N ]`em, `[ uppercase / normal ]`, color `#[ HEX ]`. Hover: `#[ HEX ]`. Active: `#[ HEX ]`.

### Mobile Nav

`[ Describí el menú mobile: hamburger, overlay, full-screen, drawer. ]`

---

## Tags & Chips

```
Background:   [ transparent / #HEX ]
Border:       [ N ]px solid #[ HEX ]
Text:         #[ HEX ], [ N ]px, tracking [ N ]em, [ familia ] [ peso ]
Radius:       [ N ]px (pill) o [ N ]px (redondeado)
Padding:      [ N ]px [ N ]px
Hover border: #[ HEX ]
Hover text:   #[ HEX ]
```

**Tag relleno / activo**: `[ Background: #HEX — texto: #HEX ]`

---

## Dividers

`[ Describí cómo el sistema separa secciones: con espacio, con línea, o ambos. ]`

| Variante | Estilo | Uso |
|---|---|---|
| Estándar | `[ N ]px solid #[ HEX ]` | `[ ... ]` |
| Acento | `[ N ]px solid #[ HEX ], ancho [ N ]px` | `[ ... ]` |
| Solo espacio | Sin línea, spacing `[ N ]`px | `[ Default entre secciones ]` |

---

## Timeline (si aplica)

`[ Si el sistema incluye timeline (portfolio, historial profesional), describí la estructura. ]`

```
Línea vertical: [ N ]px solid #[ HEX ]
Dot marker:     [ N ]px × [ N ]px, border-radius 50%, color #[ HEX ]
Año / fecha:    [ familia ], [ N ]px, tracking [ N ]em, color #[ HEX ]
Título:         [ familia ] [ peso ], [ N ]px
Subtítulo:      [ familia ] [ peso ], [ N ]px, color #[ HEX ]
Cuerpo:         [ familia ] [ peso ], [ N ]px, color #[ HEX ]
Gap entre items:[ N ]px
```

---

## Modals & Overlays

```
Overlay:      rgba([ R, G, B ], [ opacidad ]) + backdrop-filter: blur([ N ]px)
Panel:        background #[ HEX ], border [ N ]px solid #[ HEX ], radius [ N ]px
Max width:    [ N ]px
Padding:      [ N ]px
Close button: [ posición y estilo ]
```

Entrada: `[ opacity + translateY, duración, easing ]`
Salida: `[ opacity, duración, easing ]` — salidas siempre más rápidas que entradas.

---

## Alerts & Notifications

### Toast

```
Background:  #[ HEX ]
Border:      [ N ]px solid #[ HEX ]
Radius:      [ N ]px
Padding:     [ N ]px [ N ]px
Text:        [ N ]px, #[ HEX ]
Posición:    [ bottom-right / top-right / bottom-center ]
Max width:   [ N ]px
```

Auto-dismiss: `[ N ]` segundos.
Variante error: `[ border-left: Npx solid #HEX ]`

---

## Tables

```
Header:      background #[ HEX ], [ familia ] [ peso ] [ N ]px, tracking [ N ]em, uppercase
Body rows:   background transparent, [ N ]px solid #[ HEX ] (bottom border)
Cell padding:[ N ]px [ N ]px
Hover row:   background #[ HEX ]
```

En mobile: `overflow-x: auto` en el wrapper. Nunca comprimir columnas para que entren.

---

## `[ Componente custom ]` (si aplica)

`[ Describí cualquier componente específico del sistema que no esté en la lista anterior. Skills, timeline especial, hero interactivo, etc. ]`