# BrandaCare Manual — Brand & Workflow Instructions

**Para Claude / Cowork agents:** Cuando el usuario pida cualquier documento interno
(SOP técnico, training para staff, reporte, manual, etc.) en este proyecto o en cualquier
proyecto BrandaCare — aplicá este sistema.

## Reglas rápidas

- **Siempre 2 versiones** por documento: `_ES.html` (español) + `_EN.html` (inglés). Ambas **branded** con logo.
- **NO crear versión "plain"** — todas llevan el logo BrandaCare en el header
- **PROHIBIDO usar emojis** (🦷 ✅ ⚠ 💡 🇪🇸 🇺🇸 etc). El usuario los odia. Usar SIEMPRE el icon system de `brand/icons.svg`
- **Siempre** colores oficiales BrandaCare + tipografía Mulish
- **Siempre** logo PNG transparente (nunca cortado, nunca en caja blanca)
- **Siempre** Mermaid flowchart al principio de cualquier procedure / training
- Stylesheet compartido: `brand/brandacare.css` — no redefinir colores inline
- Toggle ES↔EN en el header de cada doc (con icon `#icon-lang-es` o `#icon-lang-en`)

## Tipos de documento (2 tracks paralelos)

BrandaCare maneja **dos tipos de docs** con el mismo branding:

### 1. SOPs (procedimientos técnicos)
Para el equipo interno que opera el stack técnico (claims, billing, scripts, etc).
ID format: `SOP-<DEPT>-<NNN>`
- `SOP-CL-001` Importar Fee Schedule a Open Dental
- `SOP-CL-002` Export Patient Account
- `SOP-ST-001` Audit claims via Stedi 276
- ...

### 2. Training (capacitación staff)
Para entrenar empleados/odontólogos (terminología, procesos clínicos, comunicación, etc).
Migrado del Google Doc "Training BrandaCare".
ID format: `TRN-<DEPT>-<NNN>`
- `TRN-CL2-001` Terminología Dental Básica (clinical)
- `TRN-OP-001` Onboarding nuevo cliente
- ...

## Brand colors (oficial, Brand Guidelines FEB 24)

| Variable          | Hex        | Pantone   | Uso                          |
|-------------------|------------|-----------|------------------------------|
| `--bc-blue`       | `#4B6AF7`  | 2727 C    | Azul principal (títulos)     |
| `--bc-blue-dark`  | `#415EDB`  | 2726 C    | Gradient end, secondary text |
| `--bc-peach`      | `#F1CCB1`  | 489 C     | Accent peach (bordes, steps) |
| `--bc-gray`       | `#E2E6F0`  | 663 C     | Fondos claros                |

## Typography

- **Mulish** (Google Fonts) — open-source equivalent de Muli oficial
- Pesos: 300 (light), 400 (body), 600 (subtítulos), 700 (bold), 800 (titles)

## Icon system (mandatory — replaces ALL emojis)

Available icons in `brand/icons.svg` — usar SIEMPRE estos en lugar de emojis:

| Reemplaza | Icon ID            | Uso típico                          |
|-----------|--------------------|--------------------------------------|
| 💡        | `#icon-info`       | Callouts informativos               |
| ⚠         | `#icon-warn`       | Warnings (peach/orange)             |
| ❌        | `#icon-danger`     | Errores críticos (rojo)             |
| ✅        | `#icon-success`    | Confirmación / completado (verde)   |
| ✓         | `#icon-check`      | Checkboxes / items completados      |
| 🇪🇸        | `#icon-lang-es`    | Toggle a español                    |
| 🇺🇸        | `#icon-lang-en`    | Toggle a inglés                     |
| 📘        | `#icon-book`       | SOPs / sections de procedures       |
| 🎓        | `#icon-training`   | Training material                   |
| 🦷        | `#icon-tooth`      | Clinical / dental content           |
| 🛡         | `#icon-shield`     | Insurance / coverage                |
| 📄        | `#icon-file`       | Documentos / archivos               |
| 💻        | `#icon-code`       | Comandos / scripts                  |
| ⚙         | `#icon-gear`       | Configuración / setup               |
| 🕐        | `#icon-clock`      | Tiempo estimado                     |
| 💡        | `#icon-tip`        | Tips / consejos                     |
| 👁        | `#icon-eye`        | Verificación / review               |
| →         | `#icon-arrow`      | Flechas direccionales               |
| 📁        | `#icon-folder`     | Carpetas                            |
| 👤        | `#icon-user`       | Usuario / paciente / staff          |
| 🔗        | `#icon-link`       | Links externos                      |

Uso en HTML:
```html
<svg class="bc-icon blue"><use href="../brand/icons.svg#icon-info"/></svg>
<svg class="bc-icon warn lg"><use href="../brand/icons.svg#icon-warn"/></svg>
```

Modificadores: `.sm` (14px), `.lg` (24px), `.blue`, `.peach`, `.success`, `.warn`, `.danger`, `.muted`, `.white`.

## Logo usage

- `brand/brandacare-logo-white.png` (978×200, transparente) — para fondos azules/oscuros
- `brand/brandacare-logo-blue.png` — para fondos claros
- Header logo height: **56px**
- Safety area: 1x logo-height alrededor (Brand Guidelines pp. 7-9)

## Estructura mandatoria

```
1. Header branded (logo blanco + ID + version + date)
2. h1 título + subtítulo
3. ES↔EN toggle (esquina superior derecha)
4. Purpose paragraph + callout (tiempo + requisitos)
5. Mermaid flowchart (theme-tinted: #4B6AF7, #F1CCB1, #E2E6F0)
6. Pre-checks table (si aplica)
7. Numbered step cards (peach left border, blue circle num)
8. Troubleshooting table (si aplica)
9. Safety rules con pill badges
10. Copy-paste commands (si SOP técnico)
11. Footer (BrandaCare · doc-ID · lang)
```

## File naming

```
docs/
├── brand/                  ← logo + CSS + templates + this file
├── sop/                    ← SOPs técnicos
│   ├── SOP-CL-001-Fee-Schedule_ES.html
│   └── SOP-CL-001-Fee-Schedule_EN.html
├── training/               ← training para staff
│   ├── TRN-CL2-001-Terminologia-Dental_ES.html
│   └── TRN-CL2-001-Terminologia-Dental_EN.html
├── INDEX.html              ← landing con ambos tracks
└── build_pdfs.py           ← HTML → PDF batch (opcional)
```

## Workflow para generar docs (el flujo real)

### Escenario A — SOP técnico desde working project
1. Usuario trabaja en un Cowork project (ej: claims, OD scripts)
2. Resuelve un problema con Claude
3. Al final pide: **"dame un resumen SOP en markdown"**
4. Claude del working project responde con un resumen estructurado en markdown
5. Usuario copia ese markdown
6. Lo pega en el chat del Manual project (o en cualquier chat con esta `BRAND-INSTRUCTIONS.md` cargada)
7. Claude del Manual project lo convierte a 2 HTML branded (ES + EN)

### Escenario B — Training migrado desde Google Doc
1. Usuario copia una sección del Google Doc "Training BrandaCare"
2. Pega el texto plano en el chat del Manual project
3. Claude del Manual project:
   - Identifica si es training (`TRN-XX-NNN`)
   - Traduce al otro idioma si solo viene uno
   - Genera 2 HTML branded
   - Sugiere mejoras (estructura, claridad, ejemplos faltantes)

## Prompt template para pedir resumen SOP en otro chat

Cuando el usuario está en un working project y termina una tarea, le sugiero pegar esto:

```
Dame un resumen SOP en markdown plano (para pasar al Manual BrandaCare).
Estructura:
- Título corto
- Propósito (1 párrafo)
- Tiempo estimado + requisitos
- Flujo paso a paso (numerado, comandos exactos)
- Troubleshooting (los errores reales que encontramos hoy)
- Reglas de seguridad
Idioma: español. Lo branded ES/EN lo armo después.
```

## Cuando el usuario pide "armame el SOP/training"

1. Si viene texto en markdown crudo → convertilo a HTML branded ES + EN
2. Si viene un tema general sin draft → preguntar con AskUserQuestion: ¿hay un draft a importar, o lo armamos desde cero conversando?
3. Después de generar: actualizá `INDEX.html` con el nuevo doc
4. Decile cómo bajar a PDF: Chrome → Cmd+P → Save as PDF (incluir Background graphics)