> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nupra.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Vista de Tarjetas

> Vista ejecutiva de campañas con tarjetas visuales y métricas clave

# Vista de Tarjetas

La **vista de tarjetas** proporciona una perspectiva ejecutiva de tus campañas con tarjetas visuales que muestran la información más importante a simple vista. Perfecta para revisos rápidos y presentación a stakeholders.

## Características Principales

### Diseño de Tarjetas

Cada campaña se representa como una **tarjeta individual** con:

#### Elementos Visuales

**Cabecera de Tarjeta**

* **Nombre de la campaña** como título principal
* **Badge de estado** con color codificado en la esquina superior derecha

**Cuerpo de Tarjeta**

* **Plataformas:** Iconos de las redes sociales configuradas
* **Rango de fechas:** Fecha de inicio y fin
* **Presupuesto:** Monto total (solo para campañas de ads)
* **Barra de progreso:** Visualización del presupuesto gastado vs. total

**Pie de Tarjeta**

* **Acciones rápidas:** Editar, Pausar, Eliminar
* **Ver detalle:** Clic en la tarjeta va al detalle completo

### Sistema de Colores

Las tarjetas usan colores para comunicar estado visualmente:

| Estado        | Color Borde | Color Fondo    | Badge        |
| ------------- | ----------- | -------------- | ------------ |
| **Draft**     | Gris        | Gris claro     | 🔵 Draft     |
| **Active**    | Verde       | Verde claro    | 🟢 Active    |
| **Paused**    | Amarillo    | Amarillo claro | 🟡 Paused    |
| **Completed** | Azul        | Azul claro     | 🔵 Completed |
| **Cancelled** | Rojo        | Rojo claro     | 🔴 Cancelled |

## Componentes de la Tarjeta

### Indicadores de Plataforma

**Iconos en la parte superior:**

* 📘 **Facebook:** Campaña activa en Facebook
* 📷 **Instagram:** Campaña activa en Instagram
* 🎵 **TikTok:** Campaña activa en TikTok
* 🔍 **Google:** Campaña activa en Google Ads

**Iconos aparecen** según las plataformas configuradas en la campaña.

### Barra de Progreso de Presupuesto

Solo para **campañas de publicidad (Ads)**:

```
████████░░░░░░░░  50% gastado
```

**Visualización:**

* **Barra verde:** Progreso saludable (\< 80%)
* **Barra amarilla:** Acercándose al límite (80-95%)
* **Barra roja:** Presupuesto agotado o excedido (> 95%)

**Información mostrada:**

* Monto gastado / Presupuesto total
* Porcentaje de presupuesto utilizado
* Días restantes de campaña

### Rango de Fechas

Formato: `DD MMM - DD MMM` (ej. `15 Ene - 30 Ene`)

**Características:**

* Fecha de inicio a la izquierda
* Fecha de fin a la derecha
* Icono de calendario pequeño
* Color gris para fechas futuras, azul para fechas pasadas

## Navegación y Acciones

### Ver Detalle de Campaña

**Haz clic en cualquier parte de la tarjeta** para ir al detalle de la campaña:

* Overview completo
* Métricas detalladas
* Contenido asociado
* Configuración completa

### Acciones Rápidas

**Hover sobre la tarjeta** muestra botones de acción:

* **✏️ Editar:** Modificar configuración de campaña
* **⏸️ Pausar/Reanudar:** Detener o reactivar campaña
* **🗑️ Eliminar:** Borrar campaña (requiere confirmación)
* **📊 Métricas:** Ver analytics detallados

## Organización y Ordenamiento

### Ordenamiento por Defecto

Las tarjetas se organizan por:

1. **Estado** (Active primero, luego Paused, Draft, Completed)
2. **Fecha de inicio** (más recientes primero)
3. **Nombre** (alfabéticamente)

### Filtros Disponibles

#### Filtro por Estado

* **All:** Muestra todas las campañas
* **Active:** Solo campañas activas
* **Paused:** Campañas pausadas
* **Draft:** Borradores sin activar
* **Completed:** Campañas finalizadas

#### Filtro por Tipo

* **Orgánicas:** Solo campañas de publicaciones orgánicas
* **Publicidad:** Solo campañas de anuncios pagados
* **Todas:** Muestra ambos tipos

#### Filtro por Plataforma

* Filtra campañas que incluyen una plataforma específica
* Selecciona una o múltiples plataformas
* Útil para revisar campañas por canal

#### Búsqueda

* Busca por **nombre de campaña**
* Filtra en tiempo real mientras escribes
* Resalta coincidencias en las tarjetas

## Diseño Responsivo

### Escritorio (Default)

* **Grid de 3 columnas** con tarjetas grandes
* Máximo detalle visible
* Ideal para análisis profundo

### Tablet

* **Grid de 2 columnas** con tarjetas medianas
* Balance entre detalle y espacio
* Funcionalidad completa

### Móvil

* **Columna única** con tarjetas apiladas
* Información condensada
* Scroll vertical para ver todas

## Casos de Uso

### Revisión Ejecutiva Rápida

1. Filtra por estado "Active"
2. Identifica campañas con progreso crítico (barra roja)
3. Haz clic para ver detalle y tomar acción

### Presentación a Stakeholders

1. Filtra por tipo "Publicidad"
2. Ordena por presupuesto descendente
3. Presenta tarjetas con métricas clave visibles

### Planificación de Nuevas Campañas

1. Filtra por estado "Completed"
2. Identifica periodos sin campañas activas
3. Planifica nuevas campañas en espacios vacíos

### Auditoría de Presupuesto

1. Filtra por campañas de ads
2. Ordena por porcentaje de presupuesto gastado
3. Identifica campañas que necesitan ajuste

## Ventajas y Desventajas

### ✅ Ventajas

* **Visualización rápida** de información clave
* **Ideal para presentaciones** y reportes ejecutivos
* **Fácil identificación** de campañas problemáticas
* **Diseño intuitivo** con colores e iconos
* **Perfecto para stakeholders** no técnicos

### ❌ Limitaciones

* **Menos detalle** que la vista de tabla
* **No muestra temporalidad** como la vista de calendario
* **Requiere más espacio vertical** que otras vistas
* **Difícil comparar** muchas campañas a la vez

## ¿Cuándo Usar Esta Vista?

### Situaciones Ideales

* **Presentaciones a gestión** o stakeholders
* **Revisión rápida del estado** de todas las campañas
* **Identificar campañas que necesitan atención**
* **Reportes visuales** con métricas clave
* **Revisión en dispositivos móviles** o tablets

### Situaciones No Ideales

* **Análisis detallado** de métricas (usa tabla)
* **Planificación de timeline** (usa calendario)
* **Comparación lado a lado** de múltiples campañas (usa tabla)

## Tips de Uso

✅ **Aprovecha los colores**

* Identifica rápidamente campañas con problemas por el color de la tarjeta

✅ **Usa filtros estratégicamente**

* Combina filtros de estado + plataforma para vistas específicas

✅ **Monitorea barras de progreso**

* Revisa periódicamente campañas con barra amarilla o roja

✅ **Haz clic para profundizar**

* La tarjeta es el resumen, el detalle está en la página de campaña

## Comparación de Vistas

| Vista          | Enfoque Principal   | Mejor Para                      |
| -------------- | ------------------- | ------------------------------- |
| **Tabla**      | Datos estructurados | Análisis detallado, comparación |
| **Calendario** | Temporalidad        | Planificación, timeline         |
| **Tarjetas**   | Visual ejecutivo    | Presentaciones, revisión rápida |

## Documentación Relacionada

* [Vista de Tabla](/campaigns/table-view)
* [Vista de Calendario](/campaigns/calendar-view)
* [Crear Campaña](/campaigns/create-campaign)
* [Detalle de Campaign](/campaigns/campaign-detail)
* [Campañas de Publicidad](/campaigns/ads-campaigns)