# Proceso de Branding — Paso a paso

> Como personalizar la identidad visual de un proyecto incoming

---

## Prerequisitos

- Proyecto ya provisionado con `bewpro:new` (DB creada, demo asignado)
- Datos de marca del cliente: logo(s), colores, tipografia preferida
- `.env` apuntando a la DB del proyecto

---

## Paso 1: Assets (logos, favicon, og-image)

### Que necesitas del cliente

| Asset | Formato | Uso |
|-------|---------|-----|
| **logo.png** | PNG, fondo transparente, min 400px ancho | Logo principal (header, hero) |
| **logo-alternative.png** | PNG, version clara o alternativa | Footer, fondos oscuros |
| **logo-2.png** | PNG, version secundaria/icono | Loader, favicon alternativo |
| **favicon.ico** | ICO, 32x32 o 16x16 | Tab del navegador |
| **favicon.svg** | SVG | Favicon moderno (browsers nuevos) |
| **apple-touch-icon.png** | PNG, 180x180 | Icono iOS al guardar en pantalla |
| **og-image.png** | PNG/JPG, 1200x630 | Preview en redes sociales |

### Proceso

```bash
# 1. Dropear archivos del cliente en la carpeta de assets
#    (reemplaza los anteriores — la carpeta es temporal)
cp ~/cliente-assets/* public/cd-project/assets/

# 2. Verificar que los archivos estan
ls public/cd-project/assets/
#    Debe tener: logo.png, logo-alternative.png, logo-2.png,
#    favicon.ico, favicon.svg, apple-touch-icon.png, og-image.png

# 3. Correr el seeder de assets (sube a Cloudinary + guarda URLs en DB)
php artisan db:seed --class=AssetsSeeder --force

# 4. Verificar que los settings apuntan a Cloudinary
php artisan tinker --execute="
\$assets = \App\Models\Setting::where('key', 'like', 'site.assets%')->get();
foreach(\$assets as \$s) echo \$s->key . ' = ' . substr(\$s->value, 0, 60) . PHP_EOL;
"
```

### Como funciona internamente

```
cd-project/assets/logo.png   (archivo temporal)
        ↓
AssetsSeeder                  (lee assets.json, sube a Cloudinary)
        ↓
Cloudinary: coke/assets/logo  (storage permanente, URL publica)
        ↓
DB settings: site.assets.main_logo = https://res.cloudinary.com/...
        ↓
site_asset_url('main_logo')   (helper que resuelve la URL)
```

**Importante:** Una vez subido a Cloudinary, el archivo local ya no importa. La DB tiene la URL de Cloudinary. Cambiar de proyecto (cambiar .env DB_DATABASE) carga los assets de ese proyecto desde su propia carpeta en Cloudinary.

---

## Paso 2: Paleta de colores (Skin CSS)

### Que necesitas del cliente

| Color | Rol | Ejemplo |
|-------|-----|---------|
| **Primary** | Color principal de marca, botones, links, acentos | #FFBF00 (ambar) |
| **Secondary** | Color secundario, fondos, contraste | #1A1A1A (gris oscuro) |
| **Tertiary** | Tercer color, backgrounds suaves (opcional, default white) | #FFFFFF |
| **Quaternary** | Cuarto color, detalles, subtextos (opcional) | #A0A0A0 |
| **Dark** | Color base oscuro, textos principales | #111111 |
| **Light** | Color base claro, fondos principales | #FFFFFF |

Minimo necesitas: **primary** y **secondary**. El resto tiene defaults sensatos.

### Proceso

```bash
# Opcion A: Generar desde los colores del cliente
php artisan bewpro:skin --primary=#FFBF00 --secondary=#1A1A1A --output=skin-mi-proyecto.css

# Opcion B: Partir de los colores default del demo y override lo que cambie
php artisan bewpro:skin --from-demo=insurance --primary=#FF5500 --output=skin-mi-proyecto.css

# Opcion C: Ver preview sin crear archivo
php artisan bewpro:skin --from-demo=accounting-2 --primary=#3366FF --dry-run
```

### Alternativa: Porto Style Switcher

Si preferis generar el skin desde Porto:

1. Abrir: `https://www.okler.net/previews/porto/13.0.0/demo-{nombre}.html`
2. Usar el Style Switcher (panel lateral) para ingresar los HEX
3. Copiar el CSS generado
4. Guardar como `public/template/css/skins/skin-{proyecto}.css`

### Registrar el skin

Despues de generar el archivo, el sistema lo detecta automaticamente via `get_demo_skin_mapping()` en helpers.php. Si el skin tiene un nombre custom (no el default del demo), actualizar el mapping o configurar en la DB:

```bash
php artisan tinker --execute="
\App\Models\Setting::updateOrCreate(
    ['key' => 'cd-system.theme.skin'],
    ['value' => 'skin-mi-proyecto']
);
"
```

---

## Paso 3: Tipografia (Fonts)

### Que necesitas del cliente

3 familias tipograficas:

| Font | Rol | Default |
|------|-----|---------|
| **Primary** | Titulos principales (h1, h2) | Lexend |
| **Secondary** | Subtitulos, navegacion | Lexend |
| **Tertiary** | Cuerpo de texto, parrafos | Open Sans |

### Proceso

Las fonts se configuran en el core JSON (`database/seeders/products/core/{slug}.json`):

```json
"fonts": {
    "primary": "Montserrat",
    "secondary": "Montserrat",
    "tertiary": "Lato"
}
```

O directamente en la DB del proyecto:

```bash
php artisan tinker --execute="
\App\Services\CdSystemConfigService::set('theme.fonts', [
    'primary' => 'Montserrat',
    'secondary' => 'Montserrat',
    'tertiary' => 'Lato'
]);
"
```

El sistema genera automaticamente el link de Google Fonts y las CSS custom properties via `get_google_fonts_url()` y `get_dynamic_css_variables()`.

**Nota:** Solo funcionan fonts de Google Fonts. Si el cliente necesita una font custom, se carga como @font-face en custom.css.

---

## Resumen: Checklist de branding

```
ASSETS
[ ] logo.png en cd-project/assets/
[ ] logo-alternative.png
[ ] logo-2.png
[ ] favicon.ico + favicon.svg
[ ] apple-touch-icon.png
[ ] og-image.png
[ ] php artisan db:seed --class=AssetsSeeder --force
[ ] Verificar URLs de Cloudinary en DB

COLORES
[ ] Definir 6 colores HEX (minimo primary + secondary)
[ ] php artisan bewpro:skin --primary=# --secondary=# [opciones]
[ ] Verificar que el skin se aplica (refrescar browser)

TIPOGRAFIA
[ ] Elegir 3 Google Fonts
[ ] Configurar en core JSON o DB
[ ] Verificar que cargan (inspeccionar elementos en browser)

VALIDACION
[ ] Header: logo correcto, colores de nav
[ ] Footer: logo alternativo, colores consistentes
[ ] Welcome: hero con colores de marca
[ ] Mobile: responsive con branding correcto
[ ] OG preview: compartir URL y verificar og-image
```