# Plan: Migrar bordes de inline styles a SCSS

## Contexto

El CI falla porque el componente `Button` usa inline styles (`style={{ borderWidth, borderStyle, borderColor }}`) para los bordes. Los tests (Jest y Cypress) esperan clases CSS como `border-gold` y `border-black` que ya no se generan. El usuario quiere que los estilos se escriban con SCSS en lugar de inline styles.

## Cambios necesarios

### 1. Crear `src/components/Button/Button.scss`

Crear archivo SCSS con clases por variante para bordes. Cada variante que tenga borde (todos excepto `primary`) recibe:
- `border-width: 3px`
- `border-style: solid`
- `border-color` con el color correspondiente

```scss
$border-width: 3px;
$gold: #EABF2D;
$amber: #D4880F;
$black: #1A1A2E;
$white: #FFFFFF;
$danger: #DE3626;

.btn {
  // variantes con borde
  &.w-btnOutlineGold,
  &.w-btnOutline,
  &.w-btnOutlineLight,
  &.w-btnCircle,
  &.w-btnIcon,
  &.file-upload {
    border-width: $border-width;
    border-style: solid;
  }

  &.w-btnOutlineGold {
    border-color: $gold;
  }

  &.w-btnOutline {
    border-color: $black;
  }

  &.w-btnOutlineLight {
    border-color: $white;
  }

  &.w-btnCircle {
    border-color: $black;
  }

  &.w-btnIcon {
    // icon-edit usa gold, icon-delete usa danger — se maneja con clases adicionales
  }

  &.file-upload {
    border-color: $gold;
  }

  // icon-edit específico
  &.w-btnIcon--edit {
    border-color: $gold;
  }

  // icon-delete específico
  &.w-btnIcon--delete {
    border-color: $danger;
  }
}
```

**Reflexión:** El componente actual no tiene clases separadas para icon-edit vs icon-delete en el border-color. Ambas comparten `w-btnIcon` pero tienen bordes distintos (gold vs danger). Necesito revisar si se puede resolver con clases adicionales o con un approach diferente.

Mirando el código actual:
- `icon-edit` → `border-color: var(--color-gold, #EABF2D)` (inline style)
- `icon-delete` → `border-color: var(--color-danger, #DE3626)` (inline style)

Opción A: Agregar clases `border-gold` y `border-danger` al button y manejar el color con CSS custom properties o clases específicas.
Opción B: Usar `data-variant` attribute y selector `[data-variant="icon-edit"]`.
Opción C: Agregar clases específicas `btn--icon-edit` y `btn--icon-delete`.

La opción C es la más limpia y consistente con el patr Tailwind del proyecto.

### 2. Actualizar `src/components/Button/index.tsx`

- **Eliminar** `BORDER_WIDTH`, `variantBorders`, `variantBorderColors`, `getButtonStyle()`
- **Eliminar** `style={getButtonStyle(variant)}` de los elementos renderizados
- **Agregar** clases CSS específicas para bordes:
  - `outline-gold` → `border-gold`
  - `outline-dark` → `border-black`
  - `outline-light` → `border-white`
  - `ghost` → `border-black`
  - `circular` → `border-black`
  - `icon-edit` → `border-gold`
  - `icon-delete` → `border-danger`
  - `file-upload` → `border-gold`
- **Importar** el SCSS al inicio del archivo: `import './Button.scss';`

### 3. Actualizar tests

**`Button.test.tsx`** (Jest):
- Línea 58: `expect(outlineGoldBtn).toHaveClass('border-gold')` → ya funciona con la nueva clase
- Línea 62: `expect(outlineDarkBtn).toHaveClass('border-black')` → ya funciona con la nueva clase

**`Button.test.cy.tsx`** (Cypress):
- Línea 13: `cy.get('button').should('have.class', 'border-gold')` → ya funciona
- Línea 19: `cy.get('button').should('have.class', 'border-black')` → ya funciona

Los tests de Cypress también verifican `border-top-width` con `have.css` — eso seguirá funcionando porque el border-width se define en SCSS.

### 4. Actualizar Storybook

- `Button.stories.tsx`: Agregar `border-gold` y `border-black` como opciones de control si aplica

## Archivos a modificar

| Archivo | Acción |
|---------|--------|
| `src/components/Button/Button.scss` | **Crear** — clases SCSS para bordes |
| `src/components/Button/index.tsx` | **Editar** — eliminar inline styles, agregar clases CSS, importar SCSS |
| `src/components/Button/Button.stories.tsx` | **Editar** — actualizar si es necesario |

## Verificación

1. `npm test` — todos los tests deben pasar (incluyendo las assertions de `border-gold` y `border-black`)
2. `npm run build-storybook` — Storybook debe compilar sin errores
3. `npm run build` — el bundle debe generar correctamente
4. CI: Push a la rama y verificar que Gitea Actions pase en ambos jobs