Necesito crear un prototipo de una nueva página de "Reportes de
Conciliación" para el Dashboard de Yuno.

Contexto:
- Es una nueva sección dentro del menú lateral, debajo de "Transactions"
- La página tiene una tabla con filtros por fecha, estado y merchant
- Cada fila muestra: ID de transacción, monto, estado de conciliación, fecha
- Los estados posibles son: Matched, Unmatched, Pending
- Incluye un botón "Export CSV" en la esquina superior derecha

Revisa el Design System en ~/proyectos/dashboard-design-system para usar
los componentes oficiales de Yuno (tablas, filtros, botones, badges de estado).

Revisa cómo están estructuradas las otras páginas del Dashboard para
mantener la misma estructura y patrones.

Usa el skill de frontend design para que se vea profesional.
Cuando termines, toma un screenshot con Playwright para verificar el resultado.

Quiero agregar un panel de métricas resumidas (KPI cards) en la parte
superior de la página de Transacciones del Dashboard.

Las métricas que debe mostrar son:
- Total de transacciones (hoy)
- Volumen total procesado (en USD)
- Tasa de aprobación (%)
- Transacciones fallidas

Cada card debe tener:
- Un ícono representativo
- El valor principal en grande
- Un indicador de cambio vs ayer (flecha arriba/abajo con porcentaje)
- Usa colores: verde para mejora, rojo para caída

Usa los componentes del Design System de Yuno en
~/proyectos/dashboard-design-system.
Agrega animaciones sutiles con Magic UI para que los números se vean dinámicos.
Toma un screenshot al final para verificar.

Necesito prototipar un flujo de onboarding para nuevos merchants
en el Dashboard de Yuno. Es un wizard de 4 pasos:

Paso 1 — Información del negocio:
- Nombre de la empresa
- País de operación (dropdown)
- Industria (dropdown)
- Sitio web

Paso 2 — Configuración de pagos:
- Selección de métodos de pago (checkboxes con íconos)
- Moneda principal
- Volumen mensual estimado (slider o input)

Paso 3 — Integración:
- Elección entre API directa, SDK o plugin
- Muestra snippet de código según la opción elegida
- Botón "Copiar código"

Paso 4 — Confirmación:
- Resumen de todo lo configurado
- Botón "Activar cuenta"
- Animación de éxito al completar

El wizard debe tener:
- Barra de progreso en la parte superior
- Botones "Anterior" y "Siguiente"
- Validación visual en los campos requeridos
- Transiciones suaves entre pasos

Usa los componentes del Design System de Yuno y complementa con
shadcn/ui y Magic UI donde haga falta. Toma screenshots de cada paso.

Quiero prototipar una nueva versión del sidebar de navegación del Dashboard.

Cambios propuestos:
- Sidebar colapsable (modo ícono vs modo expandido)
- Agrupación de secciones: Payments, Analytics, Settings
- Indicadores visuales para notificaciones pendientes
- Sección de "Favoritos" que el merchant puede personalizar
- El merchant actual y su logo aparecen en la parte superior
- Modo oscuro

Toma como base la estructura actual del sidebar en el código del
Dashboard, pero aplica estos cambios. Usa el Design System de Yuno como
base y complementa con shadcn/ui. Agrega transiciones suaves con
Framer Motion o Magic UI.

Genera dos versiones: una en modo claro y una en modo oscuro.
Toma screenshots de ambas.

Crea una página de "Payment Links" para el Dashboard de Yuno. Es una
tabla donde el merchant puede crear, copiar y gestionar links de pago.
Incluye un botón "Crear nuevo link" que abre un modal con un formulario.

Usa el Design System de Yuno y toma un screenshot al terminar.

Necesito prototipar la adición de un selector de planes de cuotas en el
formulario de creación de payment links del SDK de Yuno.

Contexto:
- Agregar un dropdown bajo "Opciones avanzadas" en el formulario
- El dropdown muestra todas las plantillas activas de planes de cuotas
- Los planes en borrador/inactivos NO deben aparecer en el dropdown
- El merchant puede seleccionar un plan de cuotas (selección única)
- Esto aplica SOLO a cuotas del merchant, NO a cuotas del proveedor
- El plan seleccionado se asocia con el payment link generado

Revisa los repos del SDK en ~/proyectos/sdk-web y ~/proyectos/sdk-web-core
para entender la estructura actual del formulario y patrones de componentes.

Usa el skill de frontend design para un resultado pulido.
Toma un screenshot con Playwright para verificar.

Necesito prototipar el comportamiento de auto-avance para el formulario
de tarjeta del Web SDK.

Requisitos:
- Número de tarjeta: después del BIN lookup, auto-avanzar cuando se
  alcanza el largo esperado del PAN (Visa→16, Amex→15, Diners→14)
- Fecha de expiración: auto-avanzar cuando se ingresa MM/YY válido
- CVV: auto-avanzar cuando se ingresan los dígitos correctos (3 o 4 para Amex)
- Nombre del titular, email, dirección: NO auto-avanzar (campos de texto libre)
- Feedback visual: resaltado breve en el siguiente campo al recibir foco
- Pegar un valor válido también activa el auto-avance

Revisa la estructura del formulario de tarjeta en ~/proyectos/sdk-web-card
para entender cómo funcionan los inputs envueltos en iframe.

Usa el skill de frontend design para transiciones suaves.
Toma un screenshot mostrando el flujo entre campos.

Necesito prototipar una versión más compacta del formulario de tarjeta
del SDK que reduzca el espacio vertical, especialmente en mobile.

Requisitos:
- Número de tarjeta, expiración y CVV agrupados en un grupo compacto
  con altura reducida
- Campos de dirección también agrupados en un grupo compacto
- Todos los demás campos (nombre, email, país) usan altura de input
  reducida y espaciado vertical reducido
- Placeholders con tamaño de fuente más pequeño
- Manejo de errores inline: solo el campo afectado tiene borde rojo,
  mensaje de error debajo del grupo de campos
- El botón de Pagar y otros métodos de pago deben ser visibles
  sin hacer scroll en un viewport mobile estándar (375x812)

Revisa el formulario actual en ~/proyectos/sdk-web y los patrones de
componentes en ~/proyectos/sdk-web-core.

Muestra dos versiones: actual vs compacta lado a lado.
Usa el skill de frontend design. Toma screenshots de ambas versiones
en viewport mobile.