primer commit

references/calidad.md

@@ -0,0 +1,96 @@
+# Lista de comprobaciones pre-entrega
+
+Ejecutar este checklist completo antes de declarar el manual terminado. Si falla cualquier punto, corregir y volver a generar el PDF.
+
+## 1. Contenido
+
+- [ ] El título de la portada coincide exactamente con el nombre de la aplicación.
+- [ ] El índice lista todos los capítulos y secciones presentes en el cuerpo.
+- [ ] Cada capítulo tiene al menos un objetivo explícito en un callout `info`.
+- [ ] Cada proceso termina con un callout `tip` "Resultado final".
+- [ ] La sección "Solución de problemas" existe y cubre al menos los tres errores más comunes.
+- [ ] Los nombres de los botones, campos y menús son idénticos a los de la UI.
+- [ ] Las acciones irreversibles están acompañadas de un callout `warning` o `danger`.
+
+## 2. Capturas de pantalla
+
+- [ ] Cada paso crítico tiene al menos una captura.
+- [ ] Las capturas están en `artifacts/` con nombres `NN-slug.png`.
+- [ ] Ninguna captura contiene contraseñas, tokens, datos personales reales o identificadores confidenciales.
+- [ ] Los banners de cookies, tooltips de onboarding y notificaciones están cerrados.
+- [ ] Las anotaciones numeradas coinciden con el orden de los pasos en el texto.
+- [ ] Las capturas se ven nítidas en la página impresa (probar zoom 100% en el lector de PDF).
+
+## 3. Estilo y formato
+
+- [ ] Todos los callouts tienen modificador correcto (`info`, `warning`, `danger`, `tip`, `note`).
+- [ ] Ningún párrafo excede 4 líneas en pantalla.
+- [ ] No hay cursivas decorativas; las negritas se usan solo para destacar UI ("Haga clic en **Guardar**").
+- [ ] No hay colores fuera de la paleta autorizada (ver `estilo.md`).
+- [ ] No hay tipografías distintas a Inter y JetBrains Mono.
+- [ ] Los bloques de código usan `pre code` y no se parten a la mitad de página.
+
+## 4. Numeración y referencias
+
+- [ ] Los pasos siguen numeración global sin reiniciar.
+- [ ] Las figuras se enumeran automáticamente y el caption coincide con el contenido de la imagen.
+- [ ] Las referencias cruzadas (por ejemplo, "ver paso 4") son correctas.
+- [ ] El índice generado automáticamente coincide con los encabezados reales.
+
+## 5. Impresión y paginación
+
+- [ ] Cada capítulo (`h1`) empieza en página nueva.
+- [ ] Ningún heading queda al final de página sin contenido después.
+- [ ] Ningún `.step-block`, `.callout` o `figure` se parte a la mitad.
+- [ ] La cabecera muestra el nombre del capítulo actual.
+- [ ] El pie muestra "Página X de Y" coherente (X nunca excede Y, Y es el total real).
+- [ ] La portada y la página de aviso de propiedad no muestran cabecera ni pie.
+- [ ] El aviso de propiedad menciona explícitamente a "FactorPesca S.A. de C.V." como titular del documento.
+- [ ] La portada usa sangrado completo (el fondo navy llega al borde de la hoja).
+- [ ] Las imágenes no pierden color ni contraste al imprimir (`-webkit-print-color-adjust: exact`).
+
+## 6. PDF final
+
+- [ ] El PDF se abre sin errores en al menos dos visores (Chromium y un lector externo como Preview o Acrobat).
+- [ ] El tamaño del PDF es razonable (menos de 25 MB para manuales de hasta 60 páginas; reducir peso si supera).
+- [ ] Los marcadores de navegación del PDF están generados para cada capítulo.
+- [ ] El archivo de salida se llama `manual-{aplicacion}-v{X.Y.Z}.pdf` y se entrega en `dist/`.
+
+## 7. Procedimiento de revisión
+
+1. Generar el PDF.
+2. Recorrer el manual página a página. Marcar cualquier desviación.
+3. Corregir el HTML/CSS/JS fuente (nunca el PDF).
+4. Volver a generar.
+5. Repetir hasta que el checklist esté completo.
+6. Marcar el manual como `released` en el changelog del proyecto.
+
+## 8. Errores frecuentes
+
+- **PDF sin color de fondo**: falta `-webkit-print-color-adjust: exact`. Revisar `manual.css`.
+- **TOC vacío**: los headings no tienen `data-toc` o están dentro de contenedores excluidos. Revisar `manual.js`.
+- **Anotaciones mal posicionadas**: las coordenadas no están en porcentaje. Revisar `data-annotations`.
+- **Pasos partiéndose a la mitad**: falta `break-inside: avoid` o el contenido del paso es demasiado alto. Dividir el paso.
+- **Saltos de página inconsistentes**: la cabecera/pie no están en `@page`. Revisar `manual.css` sección `@page`.
+
+## 9. Limitaciones técnicas conocidas
+
+- **Números de página en el índice automático**: el script `manual.js` no
+  puede conocer el número de página final de cada sección en el momento de
+  renderizar el PDF, porque Chromium solo expone esos números después de
+  paginar. Por eso las entradas del TOC muestran `—` como número. Tres
+  opciones para resolverlo:
+
+  1. **Aceptar la limitación**: dejar el guion y añadir a mano los números
+     tras la primera generación, editando `templates/manual.html` y usando
+     `data-toc-label` con la numeración correcta.
+  2. **Hacer un build en dos pasadas**: generar el PDF una vez, leer los
+     números de página reales del PDF resultante y volver a renderizar con
+     los números ya conocidos. Requiere un parser de PDF.
+  3. **Quitar los números del TOC**: ocultar la columna derecha de cada
+     fila del índice con CSS y dejar solo el nombre del capítulo/sección
+     con sus líderes de puntos. Es la opción más limpia visualmente.
+
+- **Named pages en Chromium**: el uso de `@page cover` y `@page copyright` está
+  soportado pero requiere que la sección use exactamente la clase CSS
+  correspondiente (`cover`, `copyright-page`, etc.) sin selectores anidados.

references/capturas.md

@@ -0,0 +1,121 @@
+# Capturas de pantalla
+
+Cómo producir las capturas que acompañarán a los manuales. Esta guía presupone que tienes instalada la skill `playwright-skill` de lackeyjb.
+
+## Configuración del navegador
+
+- **Viewport**: 1440×900 px (escritorio estándar).
+- **Factor de escala**: 2 (DPR 2). Resultado: imagen a 2880×1800. Reduce al 50% en el CSS con `max-width: 100%` y `image-rendering: -webkit-optimize-contrast`.
+- **Localización**: `es-ES` (o la del usuario). Forzar la zona horaria de la operación si afecta a la UI.
+- **User agent**: dejar el de Chromium por defecto.
+- **Modo headless**: recomendado. Usar `headless: true` para ejecuciones desatendidas. Reservar headed para depuración puntual.
+
+Plantilla de configuración para `playwright-skill`:
+
+```bash
+export PW_HEADLESS=true
+export PW_ARTIFACT_DIR="$PWD/artifacts"
+node "$SKILL_DIR/run.js" "$TMP_DIR/capturar-flujo.js"
+```
+
+## Resolución y nombrado
+
+- Tamaño final recomendado: entre 1200 y 1600 px de ancho (después del downscale). Más grande no mejora la impresión y aumenta el peso del PDF.
+- Formato: PNG para capturas con texto nítido. JPEG (`quality: 80`) para pantallas con muchas fotos.
+- Nombres de archivo: `NN-slug-corto.png` donde `NN` es el número de paso. Ejemplo: `01-login.png`, `02-panel-principal.png`, `03-formulario-cliente.png`.
+- Guardar todas las capturas dentro de `artifacts/` en la raíz del manual. El build copia esa carpeta al directorio temporal de render.
+
+## Antes de capturar
+
+1. **Sesión limpia**: cierra banners de cookies, notificaciones push y tooltips de onboarding. Si la app tiene un banner de "tour", descártalo.
+2. **Datos consistentes**: usa siempre el mismo usuario de pruebas, mismo idioma y mismo conjunto de datos. Cualquier inconsistencia se notará en el manual.
+3. **Quita lo accesorio**: oculta elementos beta, flags, datos personales reales, mensajes transitorios. No falsees pantallas: si un paso intermedio no es representativo, no lo fotografíes.
+4. **Espera activa**: usa `await page.locator(...).waitFor({ state: 'visible' })` o `await page.getByRole(...).waitFor()` en lugar de `waitForTimeout`. La captura debe hacerse después de que la UI termine de actualizarse.
+
+## Encuadre
+
+- Captura la pantalla completa con `fullPage: true` solo si la página entera es el contenido relevante. Para vistas con scroll, prefiere captura del viewport (`fullPage: false`).
+- Recorta a la zona de interés con `page.locator(selector).screenshot({ path })` cuando solo importa un componente (por ejemplo, un modal).
+- Deja al menos 16pt de margen visual alrededor del elemento principal.
+- Incluye en la captura el contexto suficiente para que el lector se ubique: la barra de navegación, el breadcrumb o el encabezado de sección son válidos.
+- Evita capturas con scrollbars visibles a menos que sea indispensable.
+
+## Privacidad y seguridad
+
+- **Nunca** incluyas contraseñas, tokens, claves API, datos personales reales o números de identificación reales. Sustituye por placeholders tipográficos como `usuario@ejemplo.com`, `••••••••`, `1234567X` o cuentas de prueba claramente ficticias.
+- Antes de capturar, valida que la vista no contenga datos sensibles: usa cuentas de test y datos sintéticos.
+- Si necesitas capturar un error real, anonimiza la URL y los IDs antes de pegarla en el manual.
+- Revisa el fondo de la captura: pueden aparecer datos de otras pestañas sincronizadas, notificaciones del sistema o fechas de la máquina.
+
+## Anotaciones
+
+Las anotaciones se aplican en el HTML con la clase `.annotations` y el atributo `data-annotations`. Cada elemento del array es un marcador posicionado en porcentaje respecto a la imagen:
+
+```html
+<figure class="screenshot-frame">
+  <img src="artifacts/01-login.png" alt="Pantalla de inicio de sesión" />
+  <ol class="annotations" data-annotations='[
+    {"x": 62, "y": 58, "n": 1, "label": "Botón Iniciar sesión"},
+    {"x": 50, "y": 74, "n": 2, "label": "Campo contraseña"}
+  ]'></ol>
+  <figcaption>Inicio de sesión con credenciales de prueba.</figcaption>
+</figure>
+```
+
+Convenciones:
+
+- `x` y `y` son porcentajes sobre el ancho y alto de la imagen. 0/0 es la esquina superior izquierda, 100/100 la inferior derecha.
+- `n` es el número que se muestra en el círculo. Debe coincidir con el orden lógico del paso (1, 2, 3…).
+- `label` es texto accesible (lectores de pantalla) y se usa como tooltip al pasar el cursor.
+- En el manual impreso, los marcadores se muestran en blanco con borde primary, número primary.
+
+## Plantilla de script Playwright
+
+```javascript
+const { chromium } = require('playwright');
+const path = require('node:path');
+const fs = require('node:fs');
+
+const TARGET = process.env.TARGET_URL || 'http://localhost:3000';
+const ART = process.env.PW_ARTIFACT_DIR || path.join(process.cwd(), 'artifacts');
+fs.mkdirSync(ART, { recursive: true });
+
+(async () => {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    deviceScaleFactor: 2,
+    locale: 'es-ES',
+    timezoneId: 'Europe/Madrid',
+  });
+  const page = await context.newPage();
+
+  // Paso 1: login
+  await page.goto(`${TARGET}/login`);
+  await page.getByLabel('Email').waitFor();
+  await page.screenshot({ path: path.join(ART, '01-login.png'), fullPage: false });
+
+  // Paso 2: panel principal
+  await page.getByLabel('Email').fill('demo@factorpesca.com');
+  await page.getByLabel('Contraseña').fill('Demo-2025!');
+  await page.getByRole('button', { name: 'Iniciar sesión' }).click();
+  await page.getByRole('heading', { name: /panel/i }).waitFor();
+  await page.screenshot({ path: path.join(ART, '02-panel.png'), fullPage: false });
+
+  await browser.close();
+})();
+```
+
+Guarda el script como `scripts/capturar.js` y ejecútalo a través de la skill `playwright-skill` con `node "$SKILL_DIR/run.js" capturar.js`.
+
+## Verificación rápida
+
+Antes de pasar al redactor, ejecuta este checklist:
+
+- [ ] Las capturas se ven nítidas a tamaño real (sin pixelado al 100%).
+- [ ] El texto de la UI es legible.
+- [ ] No hay datos personales reales.
+- [ ] El número de capturas coincide con el número de pasos previstos.
+- [ ] Los nombres de archivo siguen el patrón `NN-slug.png`.
+- [ ] Cada captura muestra el estado final del paso anterior, no un estado intermedio de carga.
+- [ ] Los banners de cookies, tooltips de onboarding y notificaciones de "tour" están cerrados.

references/estilo.md

@@ -0,0 +1,156 @@
+# Estilo visual
+
+Identidad obligatoria para todos los manuales PDF generados por esta skill. Cualquier desviación rompe la consistencia de la marca FactorPesca.
+
+## Paleta de colores
+
+| Token | Hex | Uso principal |
+|---|---|---|
+| `--color-primary` | `#0B2545` | Portada, H1, H2, banda superior, línea fina decorativa |
+| `--color-primary-600` | `#13315C` | H3, texto sobre fondos claros cuando se necesita profundidad |
+| `--color-primary-100` | `#E6ECF2` | Fondo de callouts suaves, filas alternadas sutiles |
+| `--color-accent` | `#F4A300` | Círculos numeradores de pasos, marcadores de anotación, subtítulo de portada, foco |
+| `--color-accent-600` | `#D88C00` | Estados activos y hover del accent |
+| `--text-primary` | `#1A1A1A` | Cuerpo del documento |
+| `--text-secondary` | `#404040` | Subtítulos, descripciones cortas |
+| `--text-muted` | `#6B7280` | Metadatos, captions, fechas |
+| `--surface` | `#FFFFFF` | Fondo de página |
+| `--surface-alt` | `#F3F4F6` | Filas alternadas de tablas, zonas de respiro |
+| `--border` | `#E5E7EB` | Bordes de tablas, marcos de capturas |
+| `--success` | `#047857` | Callouts `tip` y resultados exitosos |
+| `--warning` | `#B45309` | Callouts `warning` y advertencias |
+| `--danger` | `#B91C1C` | Callouts `danger` y operaciones destructivas |
+| `--info` | `#1D4ED8` | Callouts `info` y aclaraciones |
+
+Reglas de uso:
+
+- El blanco de página es la única superficie de fondo permitida para el contenido.
+- El `--color-accent` se reserva para numeración, foco y elementos interactivos. **No** se usa como fondo de grandes áreas.
+- Los callouts siempre combinan barra lateral de 4pt coloreada + fondo `--color-primary-100` (versión suave) o blanco con borde coloreado (versión estricta).
+- Contraste mínimo: 4.5:1 para texto sobre fondo (cumple WCAG AA).
+
+## Tipografía
+
+Familias (cargar desde Google Fonts dentro de `manual.css`):
+
+- **Inter** 300 / 400 / 600 / 700 — títulos, cuerpo, UI.
+- **JetBrains Mono** 400 / 500 — código, rutas, comandos, datos identificadores.
+
+Escala en puntos (optimizada para página Letter 8.5×11"):
+
+| Estilo | Familia | Peso | Tamaño | Interlineado | Uso |
+|---|---|---|---|---|---|
+| Display (portada) | Inter | 700 | 36pt | 1.15 | Título de la portada |
+| H1 (capítulo) | Inter | 700 | 28pt | 1.20 | Inicio de cada capítulo |
+| H2 | Inter | 700 | 20pt | 1.25 | Secciones dentro de un capítulo |
+| H3 | Inter | 600 | 15pt | 1.30 | Sub-secciones |
+| H4 | Inter | 600 | 12pt | 1.30 | Etiquetas, mini-encabezados |
+| Body | Inter | 400 | 11pt | 1.55 | Párrafos del manual |
+| Body énfasis | Inter | 600 | 11pt | 1.55 | Texto destacado en línea |
+| Caption | Inter | 400 | 9pt | 1.40 | Subtítulos de figuras, pies de tabla |
+| Eyebrow | Inter | 600 | 9pt tracking 0.12em uppercase | 1.40 | Etiquetas small caps, banda superior |
+| Code | JetBrains Mono | 400 | 9.5pt | 1.50 | Bloques `pre code` y teclas |
+| Code énfasis | JetBrains Mono | 500 | 9.5pt | 1.50 | Palabras reservadas inline `code` |
+
+Reglas de uso:
+
+- Los números de paso se renderizan en Inter 700 13pt blanco sobre `--color-accent`.
+- Los nombres de botones o campos se escriben exactamente como aparecen en la UI, entre comillas tipográficas « », o en `code` si son identificadores técnicos.
+- No usar cursiva. Las cursivas solo se reservan para nombres científicos o títulos de obras externas.
+- No usar subrayado excepto en enlaces web (que en el PDF se muestran como `--color-info` sin subrayado en la versión final).
+
+## Componentes
+
+Todos los componentes se aplican con clases CSS. El HTML sólo necesita marcar la estructura semántica y la clase adecuada.
+
+### Callout
+
+```html
+<aside class="callout callout-warning">
+  <div class="callout-title">Advertencia</div>
+  <p>Esta acción cierra la temporada y no se puede deshacer.</p>
+</aside>
+```
+
+Modificadores: `callout-info`, `callout-warning`, `callout-danger`, `callout-tip`, `callout-note`.
+
+Anatomía: barra lateral 4pt coloreada + caja con fondo `--color-primary-100` + icono 18pt a la izquierda (Unicode o SVG inline) + título 12pt bold + cuerpo 11pt.
+
+### Bloque de paso (`.step-block`)
+
+```html
+<article class="step-block" data-step>
+  <div class="step-number" aria-hidden="true">1</div>
+  <div class="step-content">
+    <h3 class="step-title">Iniciar sesión en la plataforma</h3>
+    <p>Abra el navegador y vaya a <code>https://app.factorpesca.com</code>.</p>
+    <figure class="screenshot-frame">
+      <img src="artifacts/01-login.png" alt="Pantalla de inicio de sesión" />
+      <ol class="annotations" data-annotations='[{"x":62,"y":58,"n":1},{"x":50,"y":74,"n":2}]'></ol>
+    </figure>
+    <aside class="callout callout-info callout-result">
+      <div class="callout-title">Resultado esperado</div>
+      <p>Verá el panel principal con su nombre en la esquina superior derecha.</p>
+    </aside>
+  </div>
+</article>
+```
+
+El círculo del paso usa `--color-accent`. El JS inyecta el número automáticamente si se omite, pero se recomienda fijarlo en el HTML.
+
+### Captura con anotaciones (`.screenshot-frame`)
+
+- Imagen con `box-shadow: 0 2pt 8pt rgba(0,0,0,0.08)` y borde 1pt `--color-border`.
+- Caption automática con prefijo "Figura N." y descripción leída de `figcaption` o `alt`.
+- Anotaciones: círculos blancos 22pt con borde 2pt `--color-primary` y número `--color-primary` 11pt bold. Se posicionan con `top` / `left` en porcentajes sobre la imagen.
+- En impresión, las anotaciones conservan tamaño y color (requiere `-webkit-print-color-adjust: exact`).
+
+### Bloque de código (`.code-block`)
+
+```html
+<pre class="code-block"><code>npx skills add lackeyjb/playwright-skill --skill playwright-skill --yes</code></pre>
+```
+
+Fondo `#1E1E2E`, texto `#F8F8F2`, padding 14pt, radio 4pt, JetBrains Mono 9.5pt, números de línea automáticos.
+
+### Tabla de datos (`.data-table`)
+
+Header con fondo `--color-primary` y texto blanco Inter 600 10pt. Filas alternadas blanco / `--color-surface-alt`. Borde inferior 0.5pt `--color-border`. Padding 8pt vertical, 10pt horizontal.
+
+### Badge
+
+```html
+<span class="badge badge-version">NUEVO</span>
+```
+
+Fondo `--color-accent`, texto blanco, padding 2pt 8pt, radio 12pt, Inter 700 8pt uppercase.
+
+## Iconografía
+
+- Iconos en línea con Unicode cuando sea viable: ⚠ info, ⚠ warning, ⛔ danger, ✅ tip, ⓘ note.
+- Iconos decorativos en SVG inline con `currentColor` para heredar el color del contexto.
+- Los iconos no son funcionales: cada callout lleva además texto explícito.
+
+## Tono editorial
+
+- Voz: segunda persona del singular o plural según el caso ("Abra el menú", "Vayan al panel").
+- Tiempo verbal: presente indicativo para acciones ("Haga clic"), futuro para consecuencias ("Aparecerá un mensaje").
+- Direccionalidad: "arriba a la derecha", "en la columna central", nunca "donde indica la flecha".
+- Términos: usar los nombres exactos de la UI; si se traduce, mantener coherencia durante todo el manual.
+- Evitar: "simplemente", "fácilmente", "obviamente", "basta con", jerga innecesaria.
+- Preferir: verbos directos, frases cortas, una idea por oración.
+- Párrafos: máximo 4 líneas en pantalla. Si excede, dividir en pasos o lista.
+- Listas: usar listas numeradas para procedimientos secuenciales, con viñetas para enumeraciones sin orden.
+
+## Reglas de impresión
+
+- Tamaño Letter 8.5×11" obligatorio.
+- Margen 22mm en los cuatro lados. La portada se imprime sin márgenes (full bleed).
+- Cabecera: nombre del capítulo actual (eyebrow) en `Inter 600 9pt`, color `--color-primary-600`, línea inferior 0.5pt `--color-border`.
+- Pie: "FactorPesca · Manual de usuario" a la izquierda, "Página X de Y" a la derecha.
+- Salto de página:
+  - Cada `h1` de capítulo empieza en página nueva.
+  - `h2`, `h3`, `h4` no quedan huérfanos al final de página.
+  - `.step-block`, `.callout`, `.screenshot-frame`, `.code-block`, `figure`, `table` no se parten.
+- Color: `-webkit-print-color-adjust: exact;` y `print-color-adjust: exact;` en todos los elementos coloreados.
+- Imágenes: máximo 700px de ancho real (escala 2x retina queda a 1400px).

references/estructura.md

@@ -0,0 +1,154 @@
+# Estructura del documento
+
+Anatomía obligatoria de cualquier manual generado por esta skill. Omite o añade secciones solo si el usuario lo pide explícitamente.
+
+## Visión general
+
+```
+1. Portada
+2. Índice
+3. Resumen ejecutivo
+4. Requisitos previos
+5. Capítulo 1
+6. Capítulo 2
+...
+N. Solución de problemas
+N+1. Glosario (opcional)
+N+2. Aviso de propiedad y confidencialidad (obligatoria)
+```
+
+## 1. Portada
+
+Elementos obligatorios:
+
+- Logo de FactorPesca (placeholder hasta que se sustituya por el definitivo).
+- Eyebrow en accent color (por defecto «Manual de usuario»).
+- Título del manual: "Manual de [Aplicación]".
+- Subtítulo descriptivo de una línea.
+
+La portada es deliberadamente minimalista: solo logo, eyebrow, título y
+subtítulo. Sin versión, fecha de emisión, autor ni metadatos.
+
+Plantilla HTML: la primera página dentro de `templates/manual.html` con clase `cover`. Forzar `break-after: page` en `@media print`.
+
+## 2. Índice
+
+- Generado automáticamente por `manual.js` a partir de los `h1`, `h2`, `h3` del documento.
+- Numeración con líderes de puntos (CSS `leader`).
+- Mostrar solo `h1` y `h2` por defecto. Si un capítulo tiene muchas sub-secciones, incluir `h3` discretamente con sangrado.
+- Numeración: capítulos en romanos (I, II, III), secciones en arábigos (1.1, 1.2).
+
+## 3. Resumen ejecutivo
+
+- Una página con tres bloques:
+  1. **Objetivo**: para qué sirve el manual y qué aprenderá el lector.
+  2. **Audiencia**: a quién va dirigido (operadores, supervisores, administradores, etc.).
+  3. **Alcance**: qué procesos cubre y qué procesos quedan fuera.
+
+Si el manual es muy largo (>40 páginas), dividir el resumen en "objetivo" y "cómo leer este manual".
+
+## 4. Requisitos previos
+
+Lista de todo lo que el lector necesita antes de empezar:
+
+- **Software**: navegador, sistema operativo, plugins.
+- **Cuenta**: tipo de usuario y permisos necesarios.
+- **Datos**: archivos, credenciales o recursos de entrada.
+- **Conocimientos**: formación previa recomendada.
+
+Estructura como `.checklist` o `.data-table` con dos columnas ("Requisito", "Detalle").
+
+## 5. Capítulos (núcleo del manual)
+
+Un capítulo por proceso de usuario. Estructura interna:
+
+1. **Encabezado del capítulo** (`<h1 data-chapter>`)
+2. **Objetivo del capítulo** (caja `.callout-info` con título "Objetivo").
+3. **Pasos** (cada uno un `.step-block`).
+4. **Resultado del proceso** (caja `.callout-tip` con título "Resultado final").
+5. **Errores comunes** (caja `.callout-warning` con título "Errores comunes"), si aplica.
+
+Reglas:
+
+- Un capítulo describe un proceso completo. Si el proceso es muy largo, dividirlo en varios capítulos, pero numerarlos con un prefijo común (4.1, 4.2, 4.3).
+- El primer paso de cada capítulo debe incluir una captura del estado inicial (pantalla previa).
+- El último paso debe mostrar el estado final con un callout `tip` "Resultado final".
+- Evitar capítulo con más de 12 pasos. Si los hay, dividir.
+
+## 6. Solución de problemas
+
+Apartado obligatorio. Estructura:
+
+```html
+<section id="troubleshooting">
+  <h1>Solución de problemas</h1>
+  <p>Si encuentra algún error, busque el síntoma en esta sección antes de contactar al soporte.</p>
+
+  <article class="trouble">
+    <h3 class="trouble-symptom">No puedo iniciar sesión</h3>
+    <p><strong>Causa probable:</strong> la cuenta está bloqueada tras tres intentos fallidos.</p>
+    <p><strong>Solución:</strong> espere 15 minutos o solicite el desbloqueo al administrador.</p>
+  </article>
+  ...
+</section>
+```
+
+Cada problema: síntoma, causa, solución. Como máximo cinco problemas por bloque; si hay más, agrupar por categoría con `<h2>`.
+
+## 7. Glosario (opcional)
+
+Tabla de dos columnas: término, definición. Incluir solo si el manual usa jerga técnica o nombres propios.
+
+## 8. Aviso de propiedad y confidencialidad (obligatoria)
+
+Última página del manual. Su propósito es reforzar visualmente que el
+documento es **propiedad privada de FactorPesca S.A. de C.V.** y
+establecer las restricciones de uso, reproducción y divulgación.
+
+Elementos obligatorios:
+
+- Marca `©` grande en la parte superior.
+- Razón social completa: `FactorPesca S.A. de C.V.`
+- Subtítulo "Todos los derechos reservados."
+- Título centrado: "Aviso de propiedad y confidencialidad".
+- Cinco párrafos numerados en lenguaje formal que cubran:
+  1. Propiedad intelectual sobre todos los elementos del documento.
+  2. Prohibición de reproducción, distribución y transformación sin
+     autorización escrita.
+  3. Carácter privado y confidencial de la información, y obligación
+     de devolución o destrucción al término de la relación.
+  4. Reconocimiento de marcas registradas de terceros.
+  5. Ausencia de garantía y limitación de responsabilidad.
+- Caja de contacto (callout primario) con el correo del área legal:
+  `legal@factorpesca.com`.
+- Pie pequeño con la atribución de la skill y la tipografía usada.
+
+Sin cabecera ni pie de página (clase `no-chrome` y named page
+`copyright`). El borde superior de 6pt en color primary marca la
+transición desde el contenido del manual hacia el cierre legal.
+
+## Numeración y jerarquía
+
+- Capítulos: `I`, `II`, `III`...
+- Secciones: `1.1`, `1.2`, `2.1`...
+- Sub-secciones: `1.1.1`, `1.1.2`...
+- Pasos: numeración global con círculo de accent (`1`, `2`, `3`...). No reiniciar en cada capítulo.
+- Figuras: `Figura 1.`, `Figura 2.`... (auto-numeradas por `manual.js`).
+- Tablas: `Tabla 1.`, `Tabla 2.`... (auto-numeradas por `manual.js`).
+
+## Saltos de página
+
+- `h1` siempre en página nueva (`break-before: page`).
+- `h2` puede fluir, pero nunca quedar al final de la página (`break-after: avoid` en el heading + `break-before: avoid` en el primer párrafo).
+- Ningún `.step-block` puede partirse a la mitad (`break-inside: avoid`).
+- Una figura o tabla debe vivir entera en la misma página, salvo que sea muy alta: en ese caso, el caption se imprime en ambas páginas.
+
+## Encabezados y pies
+
+Configurados en `manual.css` con `@page` Paged Media. Cada página muestra:
+
+- Cabecera: nombre del capítulo actual (eyebrow small caps).
+- Pie izquierda: "FactorPesca · Manual de usuario de [Aplicación]".
+- Pie derecha: "Página X de Y".
+
+Las páginas marcadas con `.no-chrome` (portada, aviso de propiedad) ocultan cabecera y pie.