# Imágenes del Plugin - Smart Chat Button Pro

## 📁 Estructura de Archivos

```
assets/images/
├── logo.png          # Logo principal del plugin (requerido)
├── logo@2x.png       # Logo en alta resolución (opcional)
├── logo-dark.png     # Logo para modo oscuro (opcional)
├── icon-16.png       # Icono 16x16 para favicon (opcional)
├── icon-32.png       # Icono 32x32 para admin (opcional)
└── README.md         # Este archivo
```

## 🖼️ Especificaciones del Logo

### Logo Principal (logo.png)
- **Tamaño recomendado**: 64x64 píxeles
- **Formato**: PNG con transparencia
- **Uso**: Menú de WordPress, header del plugin, dashboard
- **Estilo**: Debe ser legible en fondos claros y oscuros

### Logo en Alta Resolución (logo@2x.png)
- **Tamaño**: 128x128 píxeles
- **Formato**: PNG con transparencia
- **Uso**: Pantallas de alta densidad (Retina, 4K)
- **Opcional**: Si no se proporciona, se usa logo.png

### Logo para Modo Oscuro (logo-dark.png)
- **Tamaño**: 64x64 píxeles
- **Formato**: PNG con transparencia
- **Uso**: Cuando el usuario tiene modo oscuro activado
- **Opcional**: Si no se proporciona, se usa logo.png

## 🎨 Guías de Diseño

### Colores Recomendados
- **Primario**: #25D366 (verde chat)
- **Secundario**: #128C7E (verde oscuro)
- **Acento**: #34B7F1 (azul claro)
- **Texto**: #2C3E50 (gris oscuro)

### Estilo Visual
- **Forma**: Cuadrado con bordes redondeados
- **Estilo**: Moderno, minimalista, profesional
- **Elementos**: Puede incluir icono de chat, burbuja de mensaje, o texto "SCB"
- **Transparencia**: Fondo transparente para versatilidad

## 📱 Responsive Design

El logo se adapta automáticamente a diferentes tamaños:

- **Menú WordPress**: 20x20px
- **Header del plugin**: 48x48px
- **Dashboard**: 32x32px
- **Notificaciones**: 24x24px
- **Widgets**: 20x20px

## 🔧 Implementación Técnica

### En el Código PHP
```php
// Logo principal
<img src="<?php echo esc_url( MCNB_URL . 'assets/images/logo.png' ); ?>" alt="Smart Chat Button Pro">

// Logo con alta resolución
<img src="<?php echo esc_url( MCNB_URL . 'assets/images/logo@2x.png' ); ?>" alt="Smart Chat Button Pro" srcset="<?php echo esc_url( MCNB_URL . 'assets/images/logo.png' ); ?> 1x, <?php echo esc_url( MCNB_URL . 'assets/images/logo@2x.png' ); ?> 2x">
```

### En CSS
```css
.mcnb-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
}
```

## ✅ Checklist de Implementación

- [ ] Subir logo.png a la carpeta assets/images/
- [ ] Verificar que el logo se ve correctamente en el menú de WordPress
- [ ] Verificar que el logo se ve correctamente en el header del plugin
- [ ] Probar en diferentes resoluciones de pantalla
- [ ] Probar en modo claro y oscuro
- [ ] Verificar que el logo es legible en todos los contextos

## 🚨 Notas Importantes

1. **Derechos de Autor**: Asegúrate de tener los derechos para usar el logo
2. **Optimización**: Comprime las imágenes para mejorar el rendimiento
3. **Accesibilidad**: Incluye siempre el atributo `alt` descriptivo
4. **Consistencia**: Usa el mismo logo en todos los contextos
5. **Backup**: Mantén una copia de seguridad de los archivos originales

## 📞 Soporte

Si tienes problemas con la implementación del logo:

- **Email**: madnesscode1@gmail.com
- **Documentación**: https://docs.smartchatbutton.com
- **Issues**: https://github.com/smartchatbutton/pro/issues

---

*Última actualización: [Fecha]*
*Versión: 1.0.0*