g360-cli 1.15.8 → 1.17.0

package/README.md

@@ -97,7 +97,7 @@ CLI tool para el ecosistema G360 que permite inicializar proyectos con estructur
 
 ## Versión
 
-**Current: v1.15.8** — [Ver en npm](https://www.npmjs.com/package/g360-cli)
+**Current: v1.17.0** — [Ver en npm](https://www.npmjs.com/package/g360-cli)
 
 ---
 
@@ -1151,7 +1151,7 @@ g360-cli/
 |---------|-------------|
 | `npm run build` | Build portable con pkg (g360.exe) |
 | `npm run build:portable` | Especificar target node18-win-x64 |
- | `npm test` | Ejecutar tests con Vitest (53 tests, 9 suites) |
+| `npm test` | Ejecutar tests con Vitest (57 tests, 9 suites) |
 | `npm run prepublishOnly` | Validación antes de publicar en npm |
 
 ---
@@ -1159,7 +1159,7 @@ g360-cli/
 ## Testing
 
 ```bash
-npm test            # Vitest — 53 tests, 9 suites
+npm test            # Vitest — 57 tests, 9 suites
 npm run test:watch  # Modo watch
 npm run test:ui     # UI interactiva
 npm run test:coverage
@@ -1337,7 +1337,87 @@ g360 lint --project ./mi-proyecto
 
 ---
 
-## Integración con OpenCode
+### `g360 pptx`
+
+Genera manuales y presentaciones en PowerPoint (.pptx) desde una app G360. Detecta automáticamente el framework (Flet, SvelteKit, Lit, React, Vue), los módulos UI, las capacidades (PWA, Supabase, Excel, búsqueda) y el tema de marca. El archivo se genera **dentro del propio repo de la app**, independiente para cada proyecto.
+
+```bash
+g360 pptx [ruta] [opciones]
+```
+
+**Opciones:**
+
+| Opción | Descripción | Valor por defecto |
+|--------|-------------|-------------------|
+| `--mode <tipo>` | Modo de generacion (`manual`, `demo`, `onboarding`) | `manual` |
+| `--theme <nombre>` | Tema de marca (`g360`, `cipsa`, `corporate`) | auto-detectado desde `skill.json` |
+| `--out <archivo>` | Ruta del archivo de salida | `{repo}/{app-name}-manual.pptx` |
+| `--dry-run` | Solo muestra outline sin generar | `false` |
+
+**Modos:**
+
+| Modo | Proposito | Formato |
+|------|-----------|---------|
+| `manual` | Documentacion de usuario | 16:9 (compartir/imprimir) |
+| `demo` | Presentaciones comerciales | 16:9 (proyector/screens) |
+| `onboarding` | Guia de inicio rapido | 16:9 |
+
+**Detección automática por framework:**
+
+| Framework | Módulos UI | Capacidad |
+|-----------|-----------|-----------|
+| Flet | `src/ui/*.py` + `src/ui/modals/` | desde `src/app.py` (auto-refresh, search, export) |
+| SvelteKit | `src/routes/**/+page.svelte` (incluye subrutas dinámicas) | desde `package.json` |
+| Lit / React / Vue | `src/components/*.js\|ts` | desde `package.json` (supabase, PWA, exceljs, charts, tailwind) |
+
+**Ejemplos:**
+
+```bash
+# Generar manual dentro del repo de la app (theme auto-detectado)
+g360 pptx ../g360-ventas-pulse
+
+# Manual para app CIPSA (auto-detectado desde skill.json)
+g360 pptx ../mi-app --mode manual
+
+# Solo preview del outline
+g360 pptx . --dry-run
+
+# Presentacion 16:9 con tema corporate
+g360 pptx . --mode demo --theme corporate --out demo.pptx
+```
+
+**Estructura generada (16:9 widescreen 13.33x7.5in):**
+
+| # | Slide | Contenido |
+|---|-------|-----------|
+| 1 | Portada | Nombre + descripcion + tagline + version + logo |
+| 2 | ¿Que es? | Descripcion + tarjetas usuario/tecnico + capacidades |
+| 3 | Modulos | Tabla de modulos + capturas laterales |
+| 4 | Flujo de trabajo | Pasos numerados + capturas |
+| 5-N | Features | Una por modulo UI detectado |
+| N+1 | Flujos | Modals y workflows (PWA, busqueda en web) |
+| N+2 | Arquitectura | Diagrama por capas |
+| N+3 | Buenas practicas | Checklist de uso |
+| N+4 | Limites conocidos | Solo si el proyecto define `limits` |
+| N+5 | Resumen | Sintesis final |
+
+**Screenshots:**
+
+Colocar imagenes en `assets/screenshots/` para inclusion automatica con encaje proporcional (nunca distorsiona):
+- `dashboard.png` — vista principal
+- `kpi-card.png`, `modal-export.png` — componentes relevantes
+
+Si no hay screenshots, se generan placeholders-guia ("CAPTURA PENDIENTE") que indican que capturar y donde guardarlo.
+
+**Temas disponibles** (design tokens unificados en `design-tokens.js`):
+
+- **`g360`**: Esmeralda `#10B981` sobre slate (default)
+- **`cipsa`**: Verde corporativo `#008F5D`, logo CIPSA
+- **`corporate`**: Azul marino `#1E40AF`, neutral para apps sin marca
+
+---
+
+## Integracion con OpenCode
 
 g360-cli incluye integración con **OpenCode** para desarrollo asistido por IA. Esta integración permite que los agentes de IA tengan acceso a los recursos de g360-cli durante el desarrollo.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "g360-cli",
-  "version": "1.15.8",
+  "version": "1.17.0",
   "description": "CLI tool for bootstrapping G360 projects with standardized structure, assets, identity, and ERP data processing",
   "type": "module",
   "main": "src/cli.js",
@@ -54,6 +54,7 @@
     "fs-extra": "^11.3.4",
     "inquirer": "^13.4.2",
     "ora": "^9.4.0",
+    "pptxgenjs": "^4.0.1",
     "winston": "^3.19.0"
   },
   "devDependencies": {

package/src/assets/pptx/design-tokens.js

@@ -0,0 +1,124 @@
+/**
+ * Design tokens del sistema de presentaciones G360.
+ * Fuente unica de verdad: todas las paletas, tipografia y espaciados
+ * se definen aqui y son consumidos por themes/ y layouts/.
+ *
+ * Principios:
+ *  - Formato 16:9 widescreen (13.333 x 7.5 in), tipo deck corporativo.
+ *  - Un acento principal + un oscuro para titulos + tintes suaves para superficies.
+ *  - Ambar reservado para advertencias/limites; rojo solo para errores.
+ *  - Texto principal casi-negro, secundario gris slate.
+ */
+
+/** Paletas de marca disponibles */
+export const PALETTES = {
+  /** G360 — esmeralda tech sobre slate neutro */
+  g360: {
+    accent: '10B981',
+    accentDark: '047857',
+    accentSoft: 'E7F6F0',
+    onAccent: 'FFFFFF',
+    text: '0F172A',
+    textMuted: '64748B',
+    bg: 'FFFFFF',
+    surface: 'F3F5F9',
+    border: 'E3E8F0',
+    warning: 'B45309',
+    warningSoft: 'FDF3E3',
+    info: '3B82F6',
+    violet: '8B5CF6',
+    success: '059669',
+    danger: 'DC2626',
+    coverTitle: '064E3B',
+  },
+
+  /** CIPSA — verde corporativo (alineado al manual de ventas-pulse) */
+  cipsa: {
+    accent: '008F5D',
+    accentDark: '0B6B47',
+    accentSoft: 'E3F0EB',
+    onAccent: 'FFFFFF',
+    text: '1F2937',
+    textMuted: '64748B',
+    bg: 'FFFFFF',
+    surface: 'F8FAF9',
+    border: 'C8E6D8',
+    warning: 'B45309',
+    warningSoft: 'FBF1E4',
+    info: '0369A1',
+    violet: '6D28D9',
+    success: '008F5D',
+    danger: 'DC2626',
+    coverTitle: '0B6B47',
+  },
+
+  /** Corporate — azul marino neutral para apps sin marca definida */
+  corporate: {
+    accent: '1E40AF',
+    accentDark: '172554',
+    accentSoft: 'E7ECF9',
+    onAccent: 'FFFFFF',
+    text: '0F172A',
+    textMuted: '64748B',
+    bg: 'FFFFFF',
+    surface: 'F4F6FB',
+    border: 'D6DEF0',
+    warning: 'B45309',
+    warningSoft: 'FDF3E3',
+    info: '0E7490',
+    violet: '6D28D9',
+    success: '047857',
+    danger: 'DC2626',
+    coverTitle: '172554',
+  },
+};
+
+/** Tipografia: pila de fuentes y escala de puntos */
+export const TYPO = {
+  font: 'Inter',
+  fallback: 'Arial',
+  sizes: {
+    coverTitle: 44,
+    coverSubtitle: 16,
+    coverMeta: 12,
+    sectionTitle: 21,
+    cardTitle: 12,
+    cardBody: 9.5,
+    body: 11.5,
+    bodySmall: 10,
+    caption: 9.5,
+    footer: 8,
+    kpiValue: 28,
+    kpiLabel: 11,
+    stepNumber: 12,
+    stepTitle: 11.5,
+    stepBody: 10.5,
+  },
+};
+
+/** Espaciados y metricas del lienzo 16:9 */
+export const SPACING = {
+  page: { width: 13.333, height: 7.5 },
+  marginX: 0.6,
+  get contentWidth() {
+    return this.page.width - this.marginX * 2;
+  },
+  sectionTitleY: 0.3,
+  sectionRuleY: 0.85,
+  contentTopY: 1.1,
+  footerY: 7.12,
+  cardGap: 0.2,
+  radius: 0.06,
+};
+
+/** Layout por defecto registrado en pptxgenjs */
+export const DEFAULT_LAYOUT = 'LAYOUT_16x9_G360';
+
+/**
+ * Resuelve una paleta por nombre con fallback seguro.
+ * @param {string} name — 'g360' | 'cipsa' | 'corporate'
+ * @returns {object} paleta
+ */
+export function resolvePalette(name) {
+  return PALETTES[name] || PALETTES.g360;
+}

package/src/assets/pptx/layouts/base.js

@@ -0,0 +1,441 @@
+/**
+ * Layouts reutilizables para slides G360 (formato 16:9 widescreen).
+ * Componentes portados y alineados al manual de ventas-pulse:
+ * portada con banda, encabezado de seccion con regla, tarjetas suaves,
+ * marco de captura tipo telefono con encaje proporcional, flujo numerado,
+ * limites con barra ambar, checklist con checks y KPIs.
+ *
+ * Cada layout recibe (slide, data, theme) y retorna el slide modificado.
+ */
+import fs from 'fs';
+import { getImageSize } from '../scripts/image-size.js';
+
+function baseTextOpts(theme) {
+  return { fontFace: theme.typo?.font || 'Inter' };
+}
+
+/**
+ * Bloque de texto multi-parrafo.
+ * paragraphs: [{ text, size, bold, color, align, spaceAfter }]
+ */
+export function textBlock(slide, { x, y, w, h = 0.5, paragraphs }, theme) {
+  const opts = baseTextOpts(theme);
+  const runs = paragraphs.map((p, i) => ({
+    text: p.text,
+    options: {
+      fontSize: p.size ?? theme.typo.sizes.body,
+      bold: p.bold ?? false,
+      color: p.color ?? theme.colors.text,
+      align: p.align ?? 'left',
+      paraSpaceAfter: p.spaceAfter ?? 6,
+      breakLine: true,
+      ...opts,
+    },
+  }));
+  slide.addText(runs, { x, y, w, h, ...opts });
+  return slide;
+}
+
+/**
+ * Encabezado de seccion + footer con paginado (estilo ventas-pulse).
+ */
+export function addSectionHeader(slide, title, theme, pageNum = null, total = null) {
+  const { colors, typo, spacing } = theme;
+  slide.addText(title, {
+    x: spacing.marginX, y: spacing.sectionTitleY,
+    w: spacing.contentWidth, h: 0.5,
+    fontSize: typo.sizes.sectionTitle, bold: true,
+    color: colors.accentDark, ...baseTextOpts(theme),
+  });
+  slide.addShape('rect', {
+    x: spacing.marginX, y: spacing.sectionRuleY,
+    w: spacing.contentWidth, h: 0.035,
+    fill: { color: colors.accent }, line: { type: 'none' },
+  });
+  if (pageNum !== null) addFooter(slide, theme, pageNum, total);
+  return slide;
+}
+
+/**
+ * Footer "powered by G360 · n/total".
+ */
+export function addFooter(slide, theme, slideNum, totalSlides) {
+  const { colors, typo, spacing } = theme;
+  slide.addText(`powered by G360 · ${slideNum}/${totalSlides}`, {
+    x: spacing.page.width - 3.2, y: spacing.footerY,
+    w: 3.0, h: 0.28,
+    fontSize: typo.sizes.footer, color: colors.textMuted,
+    align: 'right', ...baseTextOpts(theme),
+  });
+  return slide;
+}
+
+/**
+ * Tarjeta suave con titulo y cuerpo (componente tarjeta de ventas-pulse).
+ */
+export function card(slide, { x, y, w, h, title, body = [], titleColor = null }, theme) {
+  const { colors, typo } = theme;
+  slide.addShape('roundRect', {
+    x, y, w, h, rectRadius: theme.spacing.radius,
+    fill: { color: colors.accentSoft },
+    line: { color: colors.accent, width: 1 },
+  });
+  const runs = [
+    {
+      text: title,
+      options: {
+        fontSize: typo.sizes.cardTitle, bold: true,
+        color: titleColor ?? colors.accentDark,
+        paraSpaceAfter: 3, breakLine: true,
+      },
+    },
+    ...body.map((line) => ({
+      text: line,
+      options: {
+        fontSize: typo.sizes.cardBody,
+        color: colors.text,
+        paraSpaceAfter: 2, breakLine: true,
+      },
+    })),
+  ];
+  slide.addText(runs, {
+    x: x + 0.15, y: y + 0.08, w: w - 0.3, h: h - 0.16,
+    valign: 'top', ...baseTextOpts(theme),
+  });
+  return slide;
+}
+
+/**
+ * Marco de captura estilo telefono. Coloca la imagen con encaje
+ * proporcional (contain, nunca distorsiona); si no existe el archivo,
+ * dibuja un placeholder punteado con la instruccion de captura.
+ */
+export function phoneShot(slide, { x, y, w, h, imagePath, label }, theme) {
+  const { colors, typo } = theme;
+  // Marco exterior
+  slide.addShape('roundRect', {
+    x: x - 0.07, y: y - 0.07, w: w + 0.14, h: h + 0.14,
+    rectRadius: theme.spacing.radius,
+    fill: { color: colors.text },
+    line: { color: colors.accentDark, width: 1.75 },
+  });
+  const exists = imagePath && fs.existsSync(imagePath);
+  if (exists) {
+    const dim = getImageSize(imagePath);
+    let dw = w, dh = h;
+    if (dim && dim.width && dim.height) {
+      const ir = dim.width / dim.height;
+      const fr = w / h;
+      if (ir > fr) { dh = w / ir; } else { dw = h * ir; }
+    }
+    slide.addImage({
+      path: imagePath,
+      x: x + (w - dw) / 2,
+      y: y + (h - dh) / 2,
+      w: dw, h: dh,
+    });
+  } else {
+    slide.addShape('roundRect', {
+      x, y, w, h, rectRadius: theme.spacing.radius,
+      fill: { color: colors.surface },
+      line: { color: colors.accent, width: 1, dashType: 'dash' },
+    });
+    slide.addText(
+      [
+        { text: 'CAPTURA PENDIENTE', options: { fontSize: typo.sizes.cardBody, bold: true, color: colors.textMuted, paraSpaceAfter: 4, breakLine: true } },
+        { text: label || 'Screenshot de la app', options: { fontSize: typo.sizes.cardBody, color: colors.text, paraSpaceAfter: 4, breakLine: true } },
+        ...(imagePath
+          ? [{ text: `Guardar como: ${imagePath.split(/[\\/]/).slice(-2).join('/')}`, options: { fontSize: 8, color: colors.textMuted, breakLine: true } }]
+          : []),
+      ],
+      { x: x + 0.12, y, w: w - 0.24, h, align: 'center', valign: 'middle', ...baseTextOpts(theme) },
+    );
+  }
+  return slide;
+}
+
+/**
+ * Slide de feature: descripcion + bullets.
+ */
+export function featureSlide(slide, data, theme) {
+  const { colors, typo, spacing } = theme;
+  slide.addText(data.title || 'Funcionalidad', {
+    x: spacing.marginX, y: 1.05, w: spacing.contentWidth, h: 0.6,
+    fontSize: 15, bold: true, color: colors.text, ...baseTextOpts(theme),
+  });
+  if (data.description) {
+    slide.addText(data.description, {
+      x: spacing.marginX, y: 1.65, w: spacing.contentWidth, h: 1.1,
+      fontSize: typo.sizes.body, color: colors.text, valign: 'top', ...baseTextOpts(theme),
+    });
+  }
+  if (Array.isArray(data.bullets) && data.bullets.length > 0) {
+    const runs = data.bullets.map((b) => ({
+      text: b,
+      options: {
+        bullet: { code: '2022', indent: 12 },
+        fontSize: typo.sizes.bodySmall, color: colors.text,
+        paraSpaceAfter: 5, breakLine: true,
+      },
+    }));
+    slide.addText(runs, {
+      x: spacing.marginX, y: 2.8, w: spacing.contentWidth, h: 3.5,
+      valign: 'top', ...baseTextOpts(theme),
+    });
+  }
+  return slide;
+}
+
+/**
+ * Flujo de trabajo: pasos con circulo numerado + titulo y descripcion en linea.
+ */
+export function workflowSlide(slide, data, theme) {
+  const { colors, typo, spacing } = theme;
+  const steps = data.steps || [];
+  const usableH = spacing.footerY - spacing.contentTopY - 0.15;
+  const rowH = Math.min(1.0, steps.length > 0 ? usableH / steps.length : 1.0);
+  let y = spacing.contentTopY;
+  steps.forEach((step, i) => {
+    slide.addShape('ellipse', {
+      x: spacing.marginX, y: y + 0.03, w: 0.44, h: 0.44,
+      fill: { color: colors.accent }, line: { type: 'none' },
+    });
+    slide.addText(String(i + 1), {
+      x: spacing.marginX, y: y + 0.03, w: 0.44, h: 0.44,
+      fontSize: typo.sizes.stepNumber, bold: true, color: colors.onAccent,
+      align: 'center', valign: 'middle', ...baseTextOpts(theme),
+    });
+    slide.addText(
+      [
+        { text: `${step.title || ''}  `, options: { fontSize: typo.sizes.stepTitle, bold: true, color: colors.accentDark, breakLine: false } },
+        { text: step.desc || '', options: { fontSize: typo.sizes.stepBody, color: colors.text, breakLine: true } },
+      ],
+      { x: spacing.marginX + 0.65, y, w: data.textWidth ?? spacing.contentWidth - 0.65, h: rowH, valign: 'middle', ...baseTextOpts(theme) },
+    );
+    y += rowH;
+  });
+  return slide;
+}
+
+/**
+ * Limites conocidos: items con barra ambar (advertencias).
+ * items: [{ title, desc }]
+ */
+export function limitsSlide(slide, data, theme) {
+  const { colors, typo, spacing } = theme;
+  const items = data.items || [];
+  const cols = 2;
+  const colW = (spacing.contentWidth - spacing.cardGap) / cols;
+  const rowH = 1.75;
+  items.forEach((item, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    const x = spacing.marginX + col * (colW + spacing.cardGap);
+    const y = spacing.contentTopY + row * rowH;
+    slide.addShape('rect', {
+      x, y: y + 0.05, w: 0.07, h: rowH - 0.25,
+      fill: { color: colors.warning }, line: { type: 'none' },
+    });
+    slide.addText(
+      [
+        { text: item.title, options: { fontSize: 11.5, bold: true, color: colors.warning, paraSpaceAfter: 3, breakLine: true } },
+        { text: item.desc, options: { fontSize: typo.sizes.bodySmall, color: colors.text, breakLine: true } },
+      ],
+      { x: x + 0.25, y, w: colW - 0.25, h: rowH - 0.1, valign: 'top', ...baseTextOpts(theme) },
+    );
+  });
+  return slide;
+}
+
+/**
+ * Checklist con checks verdes (buenas practicas / resumen).
+ */
+export function checklistSlide(slide, data, theme) {
+  const { colors, typo, spacing } = theme;
+  const items = data.items || [];
+  const startY = data.startY ?? spacing.contentTopY;
+  const rowH = data.rowH ?? 0.56;
+  items.forEach((item, i) => {
+    const y = startY + i * rowH;
+    const checked = item.checked !== false;
+    const runs = [
+      {
+        text: checked ? '✓  ' : '○  ',
+        options: { fontSize: typo.sizes.body + 0.5, bold: true, color: checked ? colors.accent : colors.textMuted, breakLine: false },
+      },
+      {
+        text: typeof item === 'string' ? item : item.text || '',
+        options: { fontSize: typo.sizes.body + 0.5, color: colors.text, breakLine: true },
+      },
+    ];
+    slide.addText(runs, {
+      x: 1.0, y, w: spacing.contentWidth - 0.4, h: rowH, valign: 'middle', ...baseTextOpts(theme),
+    });
+  });
+  return slide;
+}
+
+/**
+ * Tabla de modulos: filas alternadas con nombre, ruta y descripcion.
+ * rows: [{ name, route, desc }]
+ */
+export function modulesTable(slide, { rows, y = null, w = null }, theme) {
+  const { colors, typo, spacing } = theme;
+  const width = w ?? spacing.contentWidth - 4.35; // deja sitio a capturas laterales
+  let yy = y ?? spacing.contentTopY;
+  const rowH = 0.98;
+  rows.forEach((row, i) => {
+    slide.addShape('roundRect', {
+      x: spacing.marginX, y: yy, w: width, h: rowH, rectRadius: theme.spacing.radius,
+      fill: { color: i % 2 === 0 ? colors.accentSoft : colors.bg },
+      line: { color: colors.accent, width: 0.75 },
+    });
+    slide.addText(row.name, {
+      x: spacing.marginX + 0.2, y: yy + 0.1, w: 1.55, h: 0.4,
+      fontSize: 12.5, bold: true, color: colors.accentDark, ...baseTextOpts(theme),
+    });
+    if (row.route) {
+      slide.addText(row.route, {
+        x: spacing.marginX + 1.75, y: yy + 0.13, w: 1.8, h: 0.4,
+        fontSize: typo.sizes.cardBody, color: colors.textMuted, ...baseTextOpts(theme),
+      });
+    }
+    slide.addText(row.desc, {
+      x: spacing.marginX + 3.6, y: yy + 0.09, w: width - 3.8, h: rowH - 0.13,
+      fontSize: typo.sizes.cardBody, color: colors.text, valign: 'top', ...baseTextOpts(theme),
+    });
+    yy += rowH + 0.14;
+  });
+  return yy;
+}
+
+/**
+ * KPI cards (dashboard).
+ * kpis: [{ label, value, sub, color }]
+ */
+export function kpiSlide(slide, data, theme) {
+  const { colors, typo, spacing } = theme;
+  const kpis = data.kpis || [];
+  const cols = Math.min(kpis.length, 4) || 1;
+  const colW = (spacing.contentWidth - spacing.cardGap * (cols - 1)) / cols;
+  kpis.forEach((kpi, i) => {
+    const x = spacing.marginX + i * (colW + spacing.cardGap);
+    const color = kpi.color || colors.accent;
+    slide.addShape('roundRect', {
+      x, y: 1.2, w: colW, h: 2.5, rectRadius: theme.spacing.radius,
+      fill: { color: colors.surface }, line: { color, width: 1 },
+    });
+    slide.addText(kpi.value || '—', {
+      x, y: 1.35, w: colW, h: 0.9,
+      fontSize: typo.sizes.kpiValue, bold: true, color,
+      align: 'center', fontFace: 'JetBrains Mono, Consolas, monospace',
+    });
+    slide.addText(kpi.label || '', {
+      x, y: 2.3, w: colW, h: 0.35,
+      fontSize: typo.sizes.kpiLabel, color: colors.textMuted, align: 'center', ...baseTextOpts(theme),
+    });
+    if (kpi.sub) {
+      slide.addText(kpi.sub, {
+        x, y: 2.65, w: colW, h: 0.3,
+        fontSize: 10, color: colors.textMuted, align: 'center', ...baseTextOpts(theme),
+      });
+    }
+  });
+  return slide;
+}
+
+/**
+ * Arquitectura: capas apiladas con color por rol.
+ * layers: [{ name, desc, color }]
+ */
+export function architectureSlide(slide, data, theme) {
+  const { colors, typo, spacing } = theme;
+  const layers = data.layers || [];
+  const layerH = 1.15;
+  let y = spacing.contentTopY + 0.1;
+  layers.forEach((layer, i) => {
+    const color = layer.color || colors.accent;
+    slide.addShape('roundRect', {
+      x: spacing.marginX, y, w: spacing.contentWidth, h: layerH,
+      rectRadius: theme.spacing.radius,
+      fill: { color: colors.surface }, line: { color, width: 1.5 },
+    });
+    slide.addText(layer.name, {
+      x: spacing.marginX + 0.25, y: y + 0.1, w: 2.5, h: layerH - 0.2,
+      fontSize: 15, bold: true, color, valign: 'middle', ...baseTextOpts(theme),
+    });
+    slide.addText(layer.desc, {
+      x: spacing.marginX + 3.0, y: y + 0.1, w: spacing.contentWidth - 3.2, h: layerH - 0.2,
+      fontSize: typo.sizes.bodySmall, color: colors.text, valign: 'middle', ...baseTextOpts(theme),
+    });
+    if (i < layers.length - 1) {
+      slide.addText('▼', {
+        x: spacing.page.width / 2 - 0.2, y: y + layerH + 0.01, w: 0.4, h: 0.24,
+        fontSize: 10, color: colors.textMuted, align: 'center', ...baseTextOpts(theme),
+      });
+    }
+    y += layerH + 0.32;
+  });
+  return slide;
+}
+
+/**
+ * Portada: titulo grande centrado, banda de acento, subtitulo y meta.
+ */
+export function coverSlide(slide, data, theme) {
+  const { colors, typo, spacing } = theme;
+  const W = spacing.page.width;
+  slide.addText(data.appName || 'Mi App G360', {
+    x: 1.0, y: 1.5, w: W - 2.0, h: 1.3,
+    fontSize: typo.sizes.coverTitle, bold: true, color: colors.coverTitle,
+    align: 'center', valign: 'middle', ...baseTextOpts(theme),
+  });
+  slide.addShape('rect', {
+    x: 0, y: 3.15, w: W, h: 0.055,
+    fill: { color: colors.accent }, line: { type: 'none' },
+  });
+  const sub = slide.addText(
+    [
+      { text: data.description || 'Documentacion de uso y funcionalidades', options: { fontSize: typo.sizes.coverSubtitle, color: colors.text, paraSpaceAfter: 3, breakLine: true } },
+      { text: data.tagline || '', options: { fontSize: typo.sizes.coverMeta, color: colors.textMuted, breakLine: true } },
+    ],
+    { x: 1.5, y: 3.5, w: W - 3.0, h: 1.2, align: 'center', ...baseTextOpts(theme) },
+  );
+  const meta = [
+    data.version ? `Manual de uso · v${data.version}` : 'Manual de uso',
+    'powered by G360',
+  ].filter(Boolean).join('   ·   ');
+  slide.addText(meta, {
+    x: 1.0, y: 5.4, w: W - 2.0, h: 0.9,
+    fontSize: 13, bold: false, color: colors.textMuted,
+    align: 'center', ...baseTextOpts(theme),
+  });
+  const logo = typeof theme.logo === 'function' ? theme.logo() : null;
+  if (logo) {
+    slide.addImage({ path: logo.path, x: W / 2 - logo.w / 2, y: 6.35, w: logo.w, h: logo.h });
+  }
+  return slide;
+}
+
+// ===== Compat: nombres anteriores usados por templates =====
+export { card as tarjeta, phoneShot as screenshotFrame };
+
+/** screenshotSlide de compat: titulo + descripcion + marco */
+export function screenshotSlide(slide, data, theme) {
+  const { colors, typo, spacing } = theme;
+  slide.addText(data.title || 'Captura de Pantalla', {
+    x: spacing.marginX, y: 1.05, w: spacing.contentWidth, h: 0.6,
+    fontSize: 15, bold: true, color: colors.text, ...baseTextOpts(theme),
+  });
+  if (data.description) {
+    slide.addText(data.description, {
+      x: spacing.marginX, y: 1.65, w: spacing.contentWidth, h: 0.75,
+      fontSize: typo.sizes.bodySmall, color: colors.textMuted, valign: 'top', ...baseTextOpts(theme),
+    });
+  }
+  return phoneShot(slide, {
+    x: spacing.marginX + 1.2, y: 2.4, w: spacing.contentWidth - 2.4, h: 4.3,
+    imagePath: data.screenshotPath,
+    label: data.title || 'Screenshot de la app',
+  }, theme);
+}