manuales-factorpesca/references/estilo.md

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

<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)

<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)

<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

<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).