# Componentes HTML para Brainstorming Visual

Referencia de bloques HTML reutilizables para generar visualizaciones de apoyo
en `.planning/visual/`. Estos componentes son complementarios al terminal —
usar solo cuando la dimension visual aporta valor real a la decision.

## Estructura base del archivo HTML

```html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brainstorming: {tema}</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 960px; margin: 2rem auto; padding: 0 1rem; color: #1a1a1a; }
    h1 { font-size: 1.5rem; border-bottom: 2px solid #e5e7eb; padding-bottom: .5rem; }
    h2 { font-size: 1.1rem; color: #374151; margin-top: 2rem; }
    .options { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
    .option { flex: 1; min-width: 220px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 1rem; }
    .option:hover { border-color: #6366f1; }
    .option .letter { font-size: 2rem; font-weight: bold; color: #6366f1; line-height: 1; }
    .option h3 { margin: .5rem 0 .25rem; font-size: 1rem; }
    .option p { margin: 0; font-size: .875rem; color: #6b7280; }
    .pros-cons { display: flex; gap: 1rem; margin: 1rem 0; }
    .pros, .cons { flex: 1; border-radius: 6px; padding: .75rem 1rem; }
    .pros { background: #f0fdf4; border-left: 3px solid #22c55e; }
    .cons { background: #fef2f2; border-left: 3px solid #ef4444; }
    .pros h4 { color: #16a34a; margin: 0 0 .5rem; font-size: .875rem; }
    .cons h4 { color: #dc2626; margin: 0 0 .5rem; font-size: .875rem; }
    .pros ul, .cons ul { margin: 0; padding-left: 1.25rem; font-size: .875rem; }
    .mockup { border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; margin: 1rem 0; }
    .mockup-header { background: #f3f4f6; padding: .5rem 1rem; font-size: .8rem; color: #6b7280; border-bottom: 1px solid #d1d5db; }
    .mockup-body { display: grid; grid-template-columns: 180px 1fr; min-height: 200px; }
    .mock-nav { background: #1e293b; color: #94a3b8; padding: 1rem; font-size: .75rem; }
    .mock-sidebar { background: #f8fafc; border-right: 1px solid #e2e8f0; padding: 1rem; font-size: .8rem; grid-row: span 2; }
    .mock-content { padding: 1rem; font-size: .85rem; }
    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
    table.comparison { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .875rem; }
    table.comparison th { background: #f3f4f6; padding: .5rem .75rem; text-align: left; border: 1px solid #e5e7eb; }
    table.comparison td { padding: .5rem .75rem; border: 1px solid #e5e7eb; }
    table.comparison tr:nth-child(even) td { background: #f9fafb; }
    .badge { display: inline-block; padding: .15rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
    .badge-green { background: #dcfce7; color: #166534; }
    .badge-yellow { background: #fef9c3; color: #854d0e; }
    .badge-red { background: #fee2e2; color: #991b1b; }
  </style>
</head>
<body>
  <h1>Brainstorming: {tema}</h1>
  <p><strong>Fecha</strong>: {fecha} &nbsp;|&nbsp; <strong>Estado</strong>: En progreso</p>
  <!-- insertar componentes aquí -->
</body>
</html>
```

---

## Componente: Opciones A / B / C

Usar para comparar enfoques mutuamente excluyentes.

```html
<h2>Enfoques propuestos</h2>
<div class="options">
  <div class="option">
    <div class="letter">A</div>
    <h3>Nombre del enfoque A</h3>
    <p>Descripción breve del enfoque en 1-2 oraciones.</p>
  </div>
  <div class="option">
    <div class="letter">B</div>
    <h3>Nombre del enfoque B</h3>
    <p>Descripción breve del enfoque en 1-2 oraciones.</p>
  </div>
  <div class="option">
    <div class="letter">C</div>
    <h3>Nombre del enfoque C</h3>
    <p>Descripción breve del enfoque en 1-2 oraciones.</p>
  </div>
</div>
```

---

## Componente: Pros / Contras

Usar para una sola opción cuando se quiere detallar sus ventajas y desventajas.

```html
<div class="pros-cons">
  <div class="pros">
    <h4>Ventajas</h4>
    <ul>
      <li>Ventaja 1</li>
      <li>Ventaja 2</li>
    </ul>
  </div>
  <div class="cons">
    <h4>Desventajas</h4>
    <ul>
      <li>Desventaja 1</li>
      <li>Desventaja 2</li>
    </ul>
  </div>
</div>
```

---

## Componente: Mockup (wireframe de pantalla)

Usar para visualizar layouts de UI sin entrar en detalle de estilos.

```html
<h2>Mockup: {nombre de la pantalla}</h2>
<div class="mockup">
  <div class="mockup-header">Vista previa: {nombre}</div>
  <div class="mockup-body">
    <div class="mock-nav">
      <div>Nav item 1</div>
      <div>Nav item 2</div>
      <div>Nav item 3</div>
    </div>
    <div class="mock-sidebar">
      <strong>Filtros</strong>
      <div>Opcion 1</div>
      <div>Opcion 2</div>
    </div>
    <div class="mock-content">
      Contenido principal aquí.
      Tabla, lista, formulario, etc.
    </div>
  </div>
</div>
```

---

## Componente: Split View (comparación lado a lado)

Usar para comparar dos versiones del mismo flujo o pantalla.

```html
<div class="split">
  <div>
    <h2>Opción A</h2>
    <div class="mockup">
      <div class="mockup-header">Vista: Opción A</div>
      <div class="mockup-body" style="grid-template-columns: 1fr;">
        <div class="mock-content">Contenido opción A</div>
      </div>
    </div>
  </div>
  <div>
    <h2>Opción B</h2>
    <div class="mockup">
      <div class="mockup-header">Vista: Opción B</div>
      <div class="mockup-body" style="grid-template-columns: 1fr;">
        <div class="mock-content">Contenido opción B</div>
      </div>
    </div>
  </div>
</div>
```

---

## Componente: Tabla comparativa

Usar para comparar múltiples enfoques en varios atributos cuantificables o cualitativos.

```html
<h2>Comparación de enfoques</h2>
<table class="comparison">
  <thead>
    <tr>
      <th>Aspecto</th>
      <th>Enfoque A</th>
      <th>Enfoque B</th>
      <th>Enfoque C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Complejidad</td>
      <td><span class="badge badge-green">Baja</span></td>
      <td><span class="badge badge-yellow">Media</span></td>
      <td><span class="badge badge-red">Alta</span></td>
    </tr>
    <tr>
      <td>Tiempo estimado</td>
      <td>2h</td>
      <td>4h</td>
      <td>8h</td>
    </tr>
    <tr>
      <td>Escalabilidad</td>
      <td>Limitada</td>
      <td>Buena</td>
      <td>Excelente</td>
    </tr>
    <tr>
      <td>Riesgo técnico</td>
      <td><span class="badge badge-green">Bajo</span></td>
      <td><span class="badge badge-yellow">Medio</span></td>
      <td><span class="badge badge-red">Alto</span></td>
    </tr>
  </tbody>
</table>
```

---

## Diagrama de arquitectura en texto

Para decisiones técnicas sin componente visual de UI, el texto en el terminal es suficiente.
Formato preferido para diagramas de arquitectura en texto plano:

```
[Cliente Web]
     |
     v
[Load Balancer]
     |
     +---> [API Gateway]
               |
               +---> [Servicio Auth]  --> [Redis: sesiones]
               |
               +---> [Servicio Core]  --> [PostgreSQL]
               |
               +---> [Servicio Notif] --> [Queue: mensajes]
```

Este formato funciona en terminal y en markdown sin necesidad de HTML.

---

## Notas de uso

- Los archivos HTML se guardan en `.planning/visual/YYYY-MM-DD-{tema}.html`
- Abrir en el navegador con `open .planning/visual/archivo.html` (Mac/Linux) o doble clic (Windows)
- El terminal es el canal principal de la conversacion — el HTML es referencia visual de apoyo
- Generar HTML solo cuando lo visual aporta: UI, comparaciones de layout, diagramas complejos
- Para decisiones puramente tecnicas (algoritmos, esquemas de datos, patrones), texto en terminal es suficiente
- No incluir lógica de negocio ni datos reales en los archivos HTML — solo estructura y etiquetas
