# Plan: Verificar y actualizar Button component con estilos de Penpot

## Contexto

Se conectó el MCP de Penpot y se exportaron todas las variantes de botones del diseño. El worktree `agente-button-ds` ya tiene una implementación del componente Button con 9 variantes, pero hay que verificar que los estilos exportados de Penpot coincidan exactamente con lo implementado, y actualizar cualquier discrepancia.

## Verificación de estilos Penpot vs Implementación

### Colores exactos de Penpot:
- **Gold**: `#EABF2D` (fill) / stroke `#EABF2D`
- **Amber**: `#D4880F` (fill)
- **Black/Dark**: `#1A1A2E` (fill/text)
- **Danger**: `#DE3626` (fill)
- **White**: `#FFFFFF`
- **Muted text**: `#6B6B7B`

### Tamaños exactos de Penpot:
- Primary: 170×40px, rounded 6px, font 12px bold
- Outline Gold: 230×40px, rounded 6px, font 12px bold
- Outline Dark: 110×40px, rounded 0px, font 11px bold
- Outline Light: 140×60px, rounded 0px, font 11px bold
- Ghost: 110×40px, rounded 20px, font 11px bold
- Circular: 56×56px, rounded 28px, font 20px
- Icon Edit: 36×36px, rounded 4px
- Icon Delete: 36×36px, rounded 4px
- File Upload: 200×36px, rounded 4px

### Bordes:
- Todos usan `stroke-width: 3` en Penpot → `border-[1.5px]` en Tailwind (mitad del valor visual)
- Outline Dark y Ghost tienen stroke `#1A1A2E` (black)

### Hover states:
- Outline Dark: hover bg `#D4880F` (amber), hover text `#fff`
- Ghost: hover bg `#D4880F` (amber), hover text `#fff`

## Pasos

1. **Verificar** que el `tailwind.config.js` del worktree tenga los colores y tamaños correctos según Penpot
2. **Verificar** que `Button/index.tsx` tenga las clases Tailwind correctas para cada variante
3. **Actualizar** cualquier discrepancia encontrada
4. **Commit** los cambios en la rama `agente-button-ds`
5. **Push** al remote
6. **Actualizar** Docmost con el checkpoint de avance

### Archivos a revisar:
- `.worktrees/agente-button-ds/tailwind.config.js`
- `.worktrees/agente-button-ds/src/components/Button/index.tsx`
- `.worktrees/agente-button-ds/src/components/Button/Button.stories.tsx`

### Verificación:
- `npm run build` debe pasar sin errores
- `npm run test` debe pasar
- Storybook debe mostrar todas las variantes correctamente