primer commit
This commit is contained in:
absandoval
@@ -0,0 +1,876 @@
|
||||
/* =========================================================
|
||||
manuales-factorpesca / manual.css
|
||||
Hoja de estilos principal para todos los manuales PDF.
|
||||
Cubre pantalla (vista previa) e impresión (PDF final).
|
||||
Tamaño: Letter 8.5x11".
|
||||
========================================================= */
|
||||
|
||||
:root {
|
||||
/* Paleta de marca */
|
||||
--color-primary: #0B2545;
|
||||
--color-primary-600: #13315C;
|
||||
--color-primary-100: #E6ECF2;
|
||||
--color-accent: #F4A300;
|
||||
--color-accent-600: #D88C00;
|
||||
|
||||
/* Tipografía */
|
||||
--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
|
||||
|
||||
/* Texto y superficies */
|
||||
--text-primary: #1A1A1A;
|
||||
--text-secondary: #404040;
|
||||
--text-muted: #6B7280;
|
||||
--surface: #FFFFFF;
|
||||
--surface-alt: #F3F4F6;
|
||||
--border: #E5E7EB;
|
||||
|
||||
/* Semánticos */
|
||||
--success: #047857;
|
||||
--warning: #B45309;
|
||||
--danger: #B91C1C;
|
||||
--info: #1D4ED8;
|
||||
|
||||
/* Espaciado (8pt baseline) */
|
||||
--space-1: 4pt;
|
||||
--space-2: 8pt;
|
||||
--space-3: 12pt;
|
||||
--space-4: 16pt;
|
||||
--space-5: 24pt;
|
||||
--space-6: 32pt;
|
||||
--space-7: 48pt;
|
||||
--space-8: 64pt;
|
||||
|
||||
/* Escala tipográfica (en puntos) */
|
||||
--fs-cover-title: 36pt;
|
||||
--fs-cover-subtitle: 16pt;
|
||||
--fs-h1: 28pt;
|
||||
--fs-h2: 20pt;
|
||||
--fs-h3: 15pt;
|
||||
--fs-h4: 12pt;
|
||||
--fs-body: 11pt;
|
||||
--fs-emphasis: 11pt;
|
||||
--fs-caption: 9pt;
|
||||
--fs-eyebrow: 9pt;
|
||||
--fs-code: 9.5pt;
|
||||
--fs-step-num: 13pt;
|
||||
--fs-badge: 8pt;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--surface);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--fs-body);
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
p { margin: 0 0 var(--space-3); }
|
||||
|
||||
a {
|
||||
color: var(--info);
|
||||
text-decoration: none;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-code);
|
||||
background: var(--surface-alt);
|
||||
padding: 1pt 4pt;
|
||||
border-radius: 2pt;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
strong, b { font-weight: 600; }
|
||||
|
||||
img { max-width: 100%; height: auto; display: block; }
|
||||
|
||||
ul, ol { margin: 0 0 var(--space-3); padding-left: 22pt; }
|
||||
li { margin-bottom: var(--space-1); }
|
||||
|
||||
/* =========================================================
|
||||
PORTADA
|
||||
========================================================= */
|
||||
.cover {
|
||||
width: 8.5in;
|
||||
height: 11in;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-600) 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
page-break-after: always;
|
||||
break-after: page;
|
||||
}
|
||||
|
||||
.cover-inner {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0.85in 0.85in 0.7in 0.85in;
|
||||
gap: 2.2in;
|
||||
}
|
||||
|
||||
.cover-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cover-logo {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
font-size: 14pt;
|
||||
letter-spacing: 0.18em;
|
||||
color: #fff;
|
||||
border: 1.5pt solid #fff;
|
||||
padding: 8pt 12pt;
|
||||
border-radius: 2pt;
|
||||
}
|
||||
|
||||
.cover-title-block { margin-top: 0; }
|
||||
|
||||
.cover-eyebrow {
|
||||
font-size: 11pt;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-accent);
|
||||
margin: 0 0 var(--space-4);
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
font-size: var(--fs-cover-title);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 var(--space-4);
|
||||
letter-spacing: -0.01em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cover-subtitle {
|
||||
font-size: var(--fs-cover-subtitle);
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
max-width: 5.5in;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cover-meta {
|
||||
border-top: 1pt solid rgba(255, 255, 255, 0.25);
|
||||
padding-top: var(--space-4);
|
||||
}
|
||||
|
||||
.cover-meta dl {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2in 1fr;
|
||||
gap: var(--space-2) var(--space-4);
|
||||
margin: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.cover-meta dt {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.cover-meta dd {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
ÍNDICE
|
||||
========================================================= */
|
||||
.toc-page {
|
||||
page-break-before: always;
|
||||
break-before: page;
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
margin: 0 0 var(--space-5);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.toc-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toc-list li {
|
||||
margin: 0;
|
||||
border-bottom: 0.5pt dotted var(--border);
|
||||
padding: 6pt 0;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.toc-list .toc-text {
|
||||
flex: 0 0 auto;
|
||||
color: var(--text-primary);
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.toc-list .toc-text::after {
|
||||
content: leader('.') ' ';
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.toc-list .toc-dots {
|
||||
flex: 1;
|
||||
border-bottom: 0.5pt dotted var(--text-muted);
|
||||
transform: translateY(-3pt);
|
||||
margin: 0 6pt;
|
||||
min-width: 12pt;
|
||||
}
|
||||
|
||||
.toc-list .toc-page-num {
|
||||
flex: 0 0 auto;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.toc-list .toc-h2 { padding-left: 0; }
|
||||
.toc-list .toc-h3 { padding-left: 22pt; font-size: 10pt; color: var(--text-secondary); }
|
||||
|
||||
/* =========================================================
|
||||
ENCABEZADOS
|
||||
========================================================= */
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-sans);
|
||||
color: var(--color-primary);
|
||||
break-after: avoid;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: 700;
|
||||
line-height: 1.18;
|
||||
margin: 0 0 var(--space-4);
|
||||
letter-spacing: -0.01em;
|
||||
counter-reset: chapter-section;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin: var(--space-5) 0 var(--space-3);
|
||||
color: var(--color-primary-600);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--fs-h3);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin: var(--space-4) 0 var(--space-2);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--fs-h4);
|
||||
font-weight: 600;
|
||||
margin: var(--space-3) 0 var(--space-2);
|
||||
color: var(--color-primary-600);
|
||||
}
|
||||
|
||||
/* Numeración de capítulos y secciones (CSS counters) */
|
||||
[data-chapters] {
|
||||
counter-reset: chapter;
|
||||
}
|
||||
|
||||
[data-chapter] {
|
||||
counter-reset: section;
|
||||
page-break-before: always;
|
||||
break-before: page;
|
||||
}
|
||||
|
||||
[data-chapter] > h1 {
|
||||
counter-increment: chapter;
|
||||
counter-reset: section;
|
||||
}
|
||||
|
||||
[data-chapter] > h1::before {
|
||||
content: "Capítulo " counter(chapter, upper-roman) " · ";
|
||||
color: var(--color-accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[data-chapter] h2 {
|
||||
counter-increment: section;
|
||||
counter-reset: subsection;
|
||||
}
|
||||
|
||||
[data-chapter] h2::before {
|
||||
content: counter(chapter) "." counter(section) " ";
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Los h2 dentro de un step-block llevan el prefijo del step circle,
|
||||
no el contador de sección editorial. */
|
||||
[data-chapter] h2.step-title::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
[data-chapter] h3 {
|
||||
counter-increment: subsection;
|
||||
}
|
||||
|
||||
[data-chapter] h3::before {
|
||||
content: counter(chapter) "." counter(section) "." counter(subsection) " ";
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
font-size: 12pt;
|
||||
margin-right: 4pt;
|
||||
}
|
||||
|
||||
.summary-page,
|
||||
.prereq-page,
|
||||
.troubleshooting-page,
|
||||
.glossary-page {
|
||||
page-break-before: always;
|
||||
break-before: page;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
CALLOUTS
|
||||
========================================================= */
|
||||
.callout {
|
||||
background: var(--color-primary-100);
|
||||
border-left: 4pt solid var(--info);
|
||||
border-radius: 2pt;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin: var(--space-4) 0;
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
.callout-title {
|
||||
font-weight: 600;
|
||||
font-size: 11pt;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6pt;
|
||||
}
|
||||
|
||||
.callout p:last-child { margin-bottom: 0; }
|
||||
|
||||
.callout-info { border-left-color: var(--info); background: #EAF1FB; }
|
||||
.callout-info .callout-title::before { content: "ⓘ"; color: var(--info); }
|
||||
|
||||
.callout-warning { border-left-color: var(--warning); background: #FBF1E1; }
|
||||
.callout-warning .callout-title::before { content: "⚠"; color: var(--warning); }
|
||||
|
||||
.callout-danger { border-left-color: var(--danger); background: #FBE7E7; }
|
||||
.callout-danger .callout-title::before { content: "⛔"; color: var(--danger); }
|
||||
|
||||
.callout-tip { border-left-color: var(--success); background: #E5F4EE; }
|
||||
.callout-tip .callout-title::before { content: "✓"; color: var(--success); }
|
||||
|
||||
.callout-note { border-left-color: var(--text-muted); background: var(--surface-alt); }
|
||||
.callout-note .callout-title::before { content: "▸"; color: var(--text-muted); }
|
||||
|
||||
.callout-result,
|
||||
.callout-chapter-end {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
PASO NUMERADO
|
||||
========================================================= */
|
||||
.step-block {
|
||||
display: grid;
|
||||
grid-template-columns: 36pt 1fr;
|
||||
gap: var(--space-4);
|
||||
margin: var(--space-5) 0;
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
counter-increment: step;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 32pt;
|
||||
height: 32pt;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-step-num);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 2pt;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-block .step-number::before {
|
||||
content: counter(step);
|
||||
}
|
||||
|
||||
.step-content { min-width: 0; }
|
||||
|
||||
.step-title {
|
||||
font-size: var(--fs-h3);
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
margin: 0 0 var(--space-2);
|
||||
counter-increment: none;
|
||||
counter-reset: none;
|
||||
}
|
||||
|
||||
body { counter-reset: step; }
|
||||
|
||||
[data-step] {
|
||||
counter-increment: step;
|
||||
}
|
||||
|
||||
/* Cuando se quiere forzar un número (no automático), usar .step-number[data-static] */
|
||||
.step-number[data-static] {
|
||||
/* No aplicar counter, mostrar texto directo */
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
CAPTURAS CON ANOTACIONES
|
||||
========================================================= */
|
||||
.screenshot-frame {
|
||||
margin: var(--space-3) 0;
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.screenshot-frame img {
|
||||
border: 1pt solid var(--border);
|
||||
border-radius: 3pt;
|
||||
box-shadow: 0 1pt 4pt rgba(11, 37, 69, 0.08);
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.screenshot-frame {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.annotations {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
inset: 1pt;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation {
|
||||
position: absolute;
|
||||
width: 22pt;
|
||||
height: 22pt;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
border: 2pt solid var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
font-size: 10pt;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translate(-50%, -50%);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
box-shadow: 0 1pt 3pt rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.screenshot-frame figcaption {
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-2);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
counter-reset: figure;
|
||||
}
|
||||
|
||||
figure.screenshot-frame {
|
||||
counter-increment: figure;
|
||||
}
|
||||
|
||||
.screenshot-frame figcaption::before {
|
||||
content: "Figura " counter(figure) ". ";
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
BLOQUE DE CÓDIGO
|
||||
========================================================= */
|
||||
pre.code-block {
|
||||
background: #1E1E2E;
|
||||
color: #F8F8F2;
|
||||
border-radius: 4pt;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
overflow-x: auto;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-code);
|
||||
line-height: 1.5;
|
||||
margin: var(--space-3) 0;
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
pre.code-block code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
TABLAS
|
||||
========================================================= */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: var(--space-3) 0;
|
||||
font-size: 10.5pt;
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
text-align: left;
|
||||
padding: 8pt 10pt;
|
||||
border-bottom: 0.5pt solid var(--border);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-table thead th {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 10pt;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
.data-table tbody tr:nth-child(even) td {
|
||||
background: var(--surface-alt);
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
BADGE
|
||||
========================================================= */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2pt 8pt;
|
||||
border-radius: 12pt;
|
||||
font-size: var(--fs-badge);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.4;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
.badge-version {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
SOLUCIÓN DE PROBLEMAS
|
||||
========================================================= */
|
||||
.trouble {
|
||||
border: 0.5pt solid var(--border);
|
||||
border-left: 4pt solid var(--warning);
|
||||
border-radius: 2pt;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin: var(--space-3) 0;
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.trouble-symptom {
|
||||
font-size: 12pt;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
|
||||
.trouble p { margin: var(--space-1) 0; font-size: 10.5pt; }
|
||||
|
||||
/* =========================================================
|
||||
GLOSARIO
|
||||
========================================================= */
|
||||
.glossary-page .data-table td:first-child {
|
||||
font-weight: 600;
|
||||
color: var(--color-primary-600);
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
AVISO DE PROPIEDAD Y CONFIDENCIALIDAD
|
||||
Última página del manual. Diseño formal, sin cabecera ni pie.
|
||||
========================================================= */
|
||||
.copyright-page {
|
||||
page-break-before: always;
|
||||
break-before: page;
|
||||
padding: 0;
|
||||
background: var(--surface);
|
||||
border-top: 6pt solid var(--color-primary);
|
||||
}
|
||||
|
||||
.copyright-inner {
|
||||
max-width: 6in;
|
||||
margin: 0 auto;
|
||||
padding: 0.4in 0.85in 0.5in 0.85in;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.copyright-mark {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 300;
|
||||
font-size: 14pt;
|
||||
line-height: 0.9;
|
||||
color: var(--color-primary);
|
||||
text-align: center;
|
||||
margin: 0 0 4pt;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.copyright-company {
|
||||
text-align: center;
|
||||
font-size: 10.5pt;
|
||||
line-height: 1.4;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--space-4);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.copyright-company strong {
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.copyright-title {
|
||||
font-size: 10.5pt;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-primary);
|
||||
text-align: center;
|
||||
margin: 0 0 var(--space-3);
|
||||
padding-bottom: 6pt;
|
||||
border-bottom: 0.5pt solid var(--border);
|
||||
}
|
||||
|
||||
.copyright-inner p {
|
||||
font-size: 11pt;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
.copyright-inner strong {
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.copyright-contact {
|
||||
margin: var(--space-2) 0 var(--space-2);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: var(--color-primary-100);
|
||||
border-left: 4pt solid var(--color-primary);
|
||||
border-radius: 2pt;
|
||||
text-align: left;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
break-inside: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.copyright-contact-label {
|
||||
font-size: 8.5pt;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 4pt !important;
|
||||
line-height: 1.35 !important;
|
||||
}
|
||||
|
||||
.copyright-contact-line {
|
||||
text-align: center;
|
||||
margin: 0 !important;
|
||||
font-size: 10.5pt;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.copyright-contact-line code {
|
||||
font-size: 10.5pt;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
ESTILOS SOLO PANTALLA
|
||||
========================================================= */
|
||||
@media screen {
|
||||
body {
|
||||
background: #E5E7EB;
|
||||
padding: 24pt;
|
||||
}
|
||||
body > section,
|
||||
body > main {
|
||||
background: #fff;
|
||||
max-width: 8.5in;
|
||||
margin: 0 auto var(--space-5);
|
||||
padding: 0.85in;
|
||||
box-shadow: 0 4pt 24pt rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.cover {
|
||||
box-shadow: 0 4pt 24pt rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.summary-page,
|
||||
.prereq-page,
|
||||
.troubleshooting-page,
|
||||
.glossary-page,
|
||||
.copyright-page,
|
||||
.toc-page { padding: 0.85in; }
|
||||
[data-chapter] { padding: 0.85in; }
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
ESTILOS DE IMPRESIÓN
|
||||
========================================================= */
|
||||
@media print {
|
||||
html, body {
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body > section,
|
||||
body > main {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
/* Quitar sombras y bordes de pantalla en impresión */
|
||||
.screenshot-frame img {
|
||||
box-shadow: none;
|
||||
}
|
||||
/* Asegurar colores en impresión */
|
||||
* {
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
/* Anular pantalla de "vista previa" */
|
||||
.summary-page,
|
||||
.prereq-page,
|
||||
.troubleshooting-page,
|
||||
.glossary-page,
|
||||
.copyright-page,
|
||||
.toc-page,
|
||||
[data-chapter] { padding: 0; }
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
REGLAS @page Paged Media
|
||||
Chromium soporta margin boxes, que es lo que usaremos
|
||||
para inyectar cabecera y pie con counter(page).
|
||||
========================================================= */
|
||||
@page {
|
||||
size: 8.5in 11in;
|
||||
margin: 22mm 22mm 22mm 22mm;
|
||||
|
||||
@top-left {
|
||||
content: string(chapter-title);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 9pt;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-primary-600);
|
||||
vertical-align: bottom;
|
||||
padding-bottom: 4pt;
|
||||
border-bottom: 0.5pt solid var(--border);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@bottom-left {
|
||||
content: "FactorPesca · Manual de usuario";
|
||||
font-family: var(--font-sans);
|
||||
font-size: 8.5pt;
|
||||
color: var(--text-muted);
|
||||
vertical-align: top;
|
||||
padding-top: 6pt;
|
||||
}
|
||||
|
||||
@bottom-right {
|
||||
content: "Página " counter(page) " de " counter(pages);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 8.5pt;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
vertical-align: top;
|
||||
padding-top: 6pt;
|
||||
}
|
||||
}
|
||||
|
||||
@page :first {
|
||||
margin: 0;
|
||||
@top-left { content: none; border: none; }
|
||||
@bottom-left { content: none; }
|
||||
@bottom-right { content: none; }
|
||||
}
|
||||
|
||||
@page cover {
|
||||
margin: 0;
|
||||
@top-left { content: none; }
|
||||
@bottom-left { content: none; }
|
||||
@bottom-right { content: none; }
|
||||
}
|
||||
|
||||
@page copyright {
|
||||
margin: 22mm 22mm 22mm 22mm;
|
||||
@top-left { content: none; border: none; }
|
||||
@bottom-left { content: none; }
|
||||
@bottom-right { content: none; }
|
||||
}
|
||||
|
||||
.cover { page: cover; }
|
||||
.copyright-page { page: copyright; }
|
||||
@@ -0,0 +1,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title data-meta-title>Manual de usuario de la aplicación</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="manual.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- =========================================================
|
||||
PORTADA
|
||||
La portada tiene clase "cover" y se imprime sin márgenes.
|
||||
Sustituye los placeholders antes de generar el PDF.
|
||||
========================================================= -->
|
||||
<section class="cover no-chrome" data-cover>
|
||||
<div class="cover-inner">
|
||||
<div class="cover-brand">
|
||||
<div class="cover-logo" aria-label="Logo de Factor Pesca">Factor Pesca</div>
|
||||
</div>
|
||||
|
||||
<div class="cover-title-block">
|
||||
<p class="cover-eyebrow" data-meta-eyebrow>Manual de usuario</p>
|
||||
<h1 class="cover-title" data-meta-title-display>Manual de la aplicación</h1>
|
||||
<p class="cover-subtitle" data-meta-subtitle>Guía de procedimientos paso a paso para operadores.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =========================================================
|
||||
ÍNDICE
|
||||
Generado automáticamente por manual.js.
|
||||
========================================================= -->
|
||||
<section class="toc-page" id="toc">
|
||||
<h1 class="toc-title">Índice</h1>
|
||||
<ol class="toc-list" data-toc-output></ol>
|
||||
</section>
|
||||
|
||||
<!-- =========================================================
|
||||
RESUMEN EJECUTIVO
|
||||
========================================================= -->
|
||||
<section class="summary-page">
|
||||
<h1>Resumen ejecutivo</h1>
|
||||
|
||||
<article class="summary-block">
|
||||
<h2>Objetivo</h2>
|
||||
<p data-summary-objective>
|
||||
Este manual describe los procedimientos operativos de la aplicación,
|
||||
paso a paso, con capturas reales y anotaciones para que cualquier
|
||||
operador pueda completar las tareas más frecuentes sin ambigüedad.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="summary-block">
|
||||
<h2>Audiencia</h2>
|
||||
<p data-summary-audience>
|
||||
Operadores de captura, supervisores de turno y administradores del sistema.
|
||||
No se requieren conocimientos técnicos previos; sí se recomienda
|
||||
familiaridad con la gestión de datos pesqueros.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="summary-block">
|
||||
<h2>Alcance</h2>
|
||||
<p data-summary-scope>
|
||||
Cubre los procesos de alta de capturas, consulta de histórico y
|
||||
exportación de reportes. No cubre la configuración del servidor ni
|
||||
los procedimientos de copia de seguridad.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- =========================================================
|
||||
REQUISITOS PREVIOS
|
||||
========================================================= -->
|
||||
<section class="prereq-page">
|
||||
<h1>Requisitos previos</h1>
|
||||
<p>Asegúrese de cumplir con los siguientes requisitos antes de iniciar.</p>
|
||||
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Requisito</th>
|
||||
<th>Detalle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-prereq-body>
|
||||
<tr>
|
||||
<td>Navegador</td>
|
||||
<td>Chromium 120+, Firefox 121+ o Safari 17+.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resolución</td>
|
||||
<td>Mínimo 1280×800 px; recomendado 1440×900 px.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cuenta</td>
|
||||
<td>Usuario activo con rol de Operador o superior.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Conectividad</td>
|
||||
<td>Acceso a la red corporativa o VPN configurada.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- =========================================================
|
||||
CAPÍTULOS
|
||||
Cada capítulo es una <section data-chapter> con su h1.
|
||||
El número se asigna automáticamente por manual.js.
|
||||
========================================================= -->
|
||||
<main data-chapters>
|
||||
<!-- Plantilla de capítulo: duplicar este bloque por cada proceso -->
|
||||
<section data-chapter>
|
||||
<h1 data-chapter-title>Nombre del proceso</h1>
|
||||
|
||||
<aside class="callout callout-info">
|
||||
<div class="callout-title">Objetivo del capítulo</div>
|
||||
<p data-chapter-objective>
|
||||
En este capítulo aprenderá a realizar la tarea X desde la pantalla
|
||||
inicial hasta la confirmación final.
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<article class="step-block" data-step>
|
||||
<div class="step-number" aria-hidden="true"></div>
|
||||
<div class="step-content">
|
||||
<h2 class="step-title" data-step-title>Abrir la pantalla inicial</h2>
|
||||
<p data-step-text>
|
||||
Vaya al menú principal y seleccione la opción «X». Aparecerá la
|
||||
pantalla de inicio con el listado vacío.
|
||||
</p>
|
||||
<figure class="screenshot-frame">
|
||||
<img src="artifacts/01-inicio.png" alt="Pantalla inicial del proceso" />
|
||||
<ol class="annotations" data-annotations='[{"x":50,"y":24,"n":1,"label":"Menú principal"}]'></ol>
|
||||
<figcaption>Pantalla inicial con el menú principal.</figcaption>
|
||||
</figure>
|
||||
<aside class="callout callout-info callout-result">
|
||||
<div class="callout-title">Resultado esperado</div>
|
||||
<p>Verá la pantalla con el encabezado en color primario y el listado vacío debajo.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="step-block" data-step>
|
||||
<div class="step-number" aria-hidden="true"></div>
|
||||
<div class="step-content">
|
||||
<h2 class="step-title" data-step-title>Completar el formulario</h2>
|
||||
<p data-step-text>
|
||||
Rellene los campos obligatorios marcados con asterisco.
|
||||
El botón «Guardar» permanecerá deshabilitado hasta que todos los
|
||||
campos sean válidos.
|
||||
</p>
|
||||
<figure class="screenshot-frame">
|
||||
<img src="artifacts/02-formulario.png" alt="Formulario de alta" />
|
||||
<ol class="annotations" data-annotations='[{"x":24,"y":18,"n":1,"label":"Campo nombre"},{"x":24,"y":46,"n":2,"label":"Campo fecha"}]'></ol>
|
||||
<figcaption>Formulario con los campos obligatorios.</figcaption>
|
||||
</figure>
|
||||
<aside class="callout callout-warning">
|
||||
<div class="callout-title">Advertencia</div>
|
||||
<p>Si introduce una fecha futura, el sistema rechazará el guardado.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside class="callout callout-tip callout-chapter-end">
|
||||
<div class="callout-title">Resultado final</div>
|
||||
<p>El registro aparecerá al principio del listado y se enviará una notificación al supervisor.</p>
|
||||
</aside>
|
||||
</section>
|
||||
<!-- /Plantilla de capítulo -->
|
||||
</main>
|
||||
|
||||
<!-- =========================================================
|
||||
SOLUCIÓN DE PROBLEMAS
|
||||
========================================================= -->
|
||||
<section class="troubleshooting-page" id="troubleshooting">
|
||||
<h1>Solución de problemas</h1>
|
||||
<p>
|
||||
Si encuentra algún error durante los procedimientos descritos,
|
||||
busque el síntoma en esta sección antes de contactar al soporte.
|
||||
</p>
|
||||
|
||||
<article class="trouble">
|
||||
<h3 class="trouble-symptom">El botón «Guardar» permanece deshabilitado</h3>
|
||||
<p><strong>Causa probable:</strong> uno o más campos obligatorios están vacíos o tienen un formato no válido.</p>
|
||||
<p><strong>Solución:</strong> revise los campos marcados en rojo y verifique que las fechas tengan el formato <code>DD/MM/AAAA</code>.</p>
|
||||
</article>
|
||||
|
||||
<article class="trouble">
|
||||
<h3 class="trouble-symptom">La aplicación muestra un error 500 al guardar</h3>
|
||||
<p><strong>Causa probable:</strong> pérdida temporal de conectividad con el servicio de persistencia.</p>
|
||||
<p><strong>Solución:</strong> espere treinta segundos y vuelva a intentarlo. Si el error persiste, contacte con soporte adjuntando la hora exacta del incidente.</p>
|
||||
</article>
|
||||
|
||||
<article class="trouble">
|
||||
<h3 class="trouble-symptom">No recibo notificaciones por correo</h3>
|
||||
<p><strong>Causa probable:</strong> la dirección de notificación del usuario no está validada.</p>
|
||||
<p><strong>Solución:</strong> acceda a «Mi perfil» y verifique la dirección de correo. Recibirá un mensaje de confirmación en menos de un minuto.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- =========================================================
|
||||
GLOSARIO (opcional, eliminar si no aplica)
|
||||
========================================================= -->
|
||||
<section class="glossary-page">
|
||||
<h1>Glosario</h1>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr><th>Término</th><th>Definición</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Captura</td><td>Registro individual de pesca asociado a un lote y una fecha.</td></tr>
|
||||
<tr><td>Lote</td><td>Conjunto de capturas agrupadas bajo un mismo identificador.</td></tr>
|
||||
<tr><td>Operador</td><td>Usuario con permisos de lectura y escritura sobre capturas propias.</td></tr>
|
||||
<tr><td>Supervisor</td><td>Usuario con permisos de lectura y escritura sobre todas las capturas del área.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- =========================================================
|
||||
AVISO DE PROPIEDAD Y CONFIDENCIALIDAD
|
||||
Última página del manual. Sin cabecera ni pie.
|
||||
Refuerza que el documento es propiedad privada de la empresa.
|
||||
========================================================= -->
|
||||
<section class="copyright-page no-chrome" id="copyright">
|
||||
<div class="copyright-inner">
|
||||
<div class="copyright-mark" aria-hidden="true">©</div>
|
||||
<p class="copyright-company">
|
||||
<strong>Factor Pesca S.A. de C.V.</strong><br />
|
||||
Todos los derechos reservados.
|
||||
</p>
|
||||
|
||||
<h2 class="copyright-title">Aviso de propiedad y confidencialidad</h2>
|
||||
|
||||
<p>
|
||||
Este documento y la totalidad de su contenido —textos, gráficos,
|
||||
logotipos, iconos, imágenes, capturas de pantalla, marcas,
|
||||
diseño de composición y selección de los materiales— son
|
||||
<strong>propiedad exclusiva de Factor Pesca S.A. de C.V.</strong>
|
||||
y están protegidos por las leyes nacionales e internacionales
|
||||
en materia de propiedad intelectual, derechos de autor y
|
||||
secretos industriales.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Queda <strong>estrictamente prohibida</strong> la reproducción
|
||||
total o parcial, distribución, comunicación pública,
|
||||
transformación, traducción, adaptación, compilación,
|
||||
desensamblado o cualquier otra forma de explotación de este
|
||||
documento, por cualquier medio y para cualquier finalidad, sin
|
||||
el consentimiento previo, expreso y por escrito de Factor Pesca
|
||||
S.A. de C.V. El uso no autorizado será perseguido y
|
||||
sancionado conforme a la legislación civil, penal y mercantil
|
||||
aplicable.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="manual.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
/* =========================================================
|
||||
manuales-factorpesca / manual.js
|
||||
Lógica de presentación del manual:
|
||||
- Genera el índice automático a partir de h1, h2, h3.
|
||||
- Dibuja anotaciones numeradas sobre las capturas.
|
||||
- Captura el nombre del capítulo actual para la cabecera.
|
||||
- Numera figuras y pasos (complementa a los CSS counters).
|
||||
- Prepara el contador de página tras la carga de fuentes.
|
||||
|
||||
Este script NO añade interactividad: solo prepara el DOM
|
||||
para que Chromium imprima un PDF bien paginado.
|
||||
========================================================= */
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
function init() {
|
||||
if (document.fonts && document.fonts.ready) {
|
||||
document.fonts.ready.then(afterFonts);
|
||||
} else {
|
||||
afterFonts();
|
||||
}
|
||||
}
|
||||
|
||||
function afterFonts() {
|
||||
try {
|
||||
buildTOC();
|
||||
renderAnnotations();
|
||||
setupChapterString();
|
||||
ensureAnchors();
|
||||
ensureImagePaths();
|
||||
} catch (err) {
|
||||
console.error('[manual.js] Error preparando el manual:', err);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
1. Índice automático
|
||||
--------------------------------------------------------- */
|
||||
function buildTOC() {
|
||||
const out = document.querySelector('[data-toc-output]');
|
||||
if (!out) return;
|
||||
|
||||
const chapters = document.querySelectorAll('[data-chapter]');
|
||||
if (!chapters.length) {
|
||||
out.innerHTML = '<li class="toc-empty">Sin capítulos definidos.</li>';
|
||||
return;
|
||||
}
|
||||
|
||||
const frag = document.createDocumentFragment();
|
||||
let chapterIndex = 0;
|
||||
|
||||
chapters.forEach((chapter) => {
|
||||
chapterIndex += 1;
|
||||
const title = chapter.querySelector('[data-chapter-title]') || chapter.querySelector('h1');
|
||||
if (!title) return;
|
||||
|
||||
const li = document.createElement('li');
|
||||
li.className = 'toc-h1';
|
||||
li.appendChild(tocRow(romanize(chapterIndex) + '. ' + title.textContent.trim()));
|
||||
frag.appendChild(li);
|
||||
|
||||
const subsections = chapter.querySelectorAll('h2');
|
||||
subsections.forEach((sub) => {
|
||||
const row = document.createElement('li');
|
||||
row.className = 'toc-h2';
|
||||
row.appendChild(tocRow(' ' + (sub.dataset.tocLabel || sub.textContent.trim())));
|
||||
frag.appendChild(row);
|
||||
});
|
||||
|
||||
const subsub = chapter.querySelectorAll('h3');
|
||||
subsub.forEach((sub) => {
|
||||
const row = document.createElement('li');
|
||||
row.className = 'toc-h3';
|
||||
row.appendChild(tocRow(' ' + (sub.dataset.tocLabel || sub.textContent.trim())));
|
||||
frag.appendChild(row);
|
||||
});
|
||||
});
|
||||
|
||||
out.innerHTML = '';
|
||||
out.appendChild(frag);
|
||||
}
|
||||
|
||||
function tocRow(label) {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'toc-row';
|
||||
const text = document.createElement('span');
|
||||
text.className = 'toc-text';
|
||||
text.textContent = label;
|
||||
const dots = document.createElement('span');
|
||||
dots.className = 'toc-dots';
|
||||
const num = document.createElement('span');
|
||||
num.className = 'toc-page-num';
|
||||
num.textContent = '—';
|
||||
span.appendChild(text);
|
||||
span.appendChild(dots);
|
||||
span.appendChild(num);
|
||||
return span;
|
||||
}
|
||||
|
||||
function romanize(num) {
|
||||
const map = [
|
||||
['M', 1000], ['CM', 900], ['D', 500], ['CD', 400],
|
||||
['C', 100], ['XC', 90], ['L', 50], ['XL', 40],
|
||||
['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1],
|
||||
];
|
||||
let result = '';
|
||||
let n = num;
|
||||
for (const [letter, value] of map) {
|
||||
while (n >= value) {
|
||||
result += letter;
|
||||
n -= value;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
2. Anotaciones sobre capturas
|
||||
--------------------------------------------------------- */
|
||||
function renderAnnotations() {
|
||||
document.querySelectorAll('.annotations[data-annotations]').forEach((list) => {
|
||||
let data = [];
|
||||
try {
|
||||
data = JSON.parse(list.getAttribute('data-annotations') || '[]');
|
||||
} catch (err) {
|
||||
console.warn('[manual.js] data-annotations inválido:', err);
|
||||
return;
|
||||
}
|
||||
if (!Array.isArray(data) || data.length === 0) {
|
||||
list.remove();
|
||||
return;
|
||||
}
|
||||
const sorted = data.slice().sort((a, b) => (a.n || 0) - (b.n || 0));
|
||||
sorted.forEach((entry) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'annotation';
|
||||
li.textContent = String(entry.n);
|
||||
if (typeof entry.x === 'number' && typeof entry.y === 'number') {
|
||||
li.style.left = entry.x + '%';
|
||||
li.style.top = entry.y + '%';
|
||||
}
|
||||
if (entry.label) {
|
||||
li.setAttribute('aria-label', entry.label);
|
||||
li.setAttribute('title', entry.label);
|
||||
}
|
||||
list.appendChild(li);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
3. Cabecera dinámica con el nombre del capítulo actual
|
||||
--------------------------------------------------------- */
|
||||
function setupChapterString() {
|
||||
const chapters = document.querySelectorAll('[data-chapter]');
|
||||
chapters.forEach((chapter) => {
|
||||
const title = chapter.querySelector('[data-chapter-title]') || chapter.querySelector('h1');
|
||||
if (!title) return;
|
||||
title.setAttribute('data-string', title.textContent.trim());
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
4. Anclas automáticas para headings
|
||||
--------------------------------------------------------- */
|
||||
function ensureAnchors() {
|
||||
const headings = document.querySelectorAll('[data-chapter] h1, [data-chapter] h2, [data-chapter] h3, [data-chapter] h4');
|
||||
headings.forEach((h) => {
|
||||
if (!h.id) {
|
||||
const slug = (h.textContent || '')
|
||||
.toLowerCase()
|
||||
.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/(^-|-$)/g, '');
|
||||
h.id = slug || 'h-' + Math.random().toString(36).slice(2, 8);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
5. Resolver rutas de imágenes a absolutas
|
||||
--------------------------------------------------------- */
|
||||
function ensureImagePaths() {
|
||||
const base = window.location.href.replace(/[^/]*$/, '');
|
||||
document.querySelectorAll('img').forEach((img) => {
|
||||
const src = img.getAttribute('src');
|
||||
if (!src || src.startsWith('http') || src.startsWith('data:') || src.startsWith('file:')) return;
|
||||
const absolute = new URL(src, base).href;
|
||||
img.src = absolute;
|
||||
});
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user