# 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 ``` 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

Iniciar sesión en la plataforma

Abra el navegador y vaya a https://app.factorpesca.com.

Pantalla de inicio de sesión
    ``` 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 
    npx skills add lackeyjb/playwright-skill --skill playwright-skill --yes
    ``` 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 NUEVO ``` 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).