@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-pdfviewer.mjs

@@ -1,11 +1,337 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, booleanAttribute, model, output, Injector, PLATFORM_ID, signal, viewChild, viewChildren, computed, effect, untracked, afterNextRender, DestroyRef, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, input, booleanAttribute, model, output, Injector, ElementRef, PLATFORM_ID, signal, viewChild, viewChildren, computed, effect, untracked, afterNextRender, DestroyRef, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbDialog } from '@caribeng/ui/dialog';
 import { CbIconRegistry, CbIcon } from '@caribeng/ui/icon';
-import { panelLeft, printer, zoomOut, zoomIn } from '@caribeng/ui/icons';
+import { signature, penLine, stickyNote, highlighter, panelLeft, printer, zoomOut, zoomIn } from '@caribeng/ui/icons';
+import { CbSignaturePad } from '@caribeng/ui/signature-pad';
 import { CbSpinner } from '@caribeng/ui/spinner';
 
+const CB_PDF_COLORS = {
+    yellow: { light: '#fde047', dark: '#a16207' },
+    green: { light: '#86efac', dark: '#15803d' },
+    blue: { light: '#93c5fd', dark: '#1d4ed8' },
+    red: { light: '#fca5a5', dark: '#b91c1c' },
+};
+/** Punto PDF → píxeles CSS dentro de la página dibujada. */
+function pdfToView(geom, view, x, y) {
+    const f = view.factor;
+    const u = (x - geom.x0) * geom.userUnit * f;
+    const v = (geom.height - (y - geom.y0) * geom.userUnit) * f;
+    const w = geom.width * f;
+    const h = geom.height * f;
+    switch (normalize(view.rotation)) {
+        case 90:
+            return [h - v, u];
+        case 180:
+            return [w - u, h - v];
+        case 270:
+            return [v, w - u];
+        default:
+            return [u, v];
+    }
+}
+/** Píxeles CSS dentro de la página dibujada → punto PDF. */
+function viewToPdf(geom, view, px, py) {
+    const f = view.factor;
+    const w = geom.width * f;
+    const h = geom.height * f;
+    let u;
+    let v;
+    switch (normalize(view.rotation)) {
+        case 90:
+            [u, v] = [py, h - px];
+            break;
+        case 180:
+            [u, v] = [w - px, h - py];
+            break;
+        case 270:
+            [u, v] = [w - py, px];
+            break;
+        default:
+            [u, v] = [px, py];
+    }
+    return [geom.x0 + u / (geom.userUnit * f), geom.y0 + (geom.height - v / f) / geom.userUnit];
+}
+/** Rectángulo PDF → caja CSS (`left`, `top`, `width`, `height`) en la página dibujada. */
+function rectToView(geom, view, rect) {
+    const [ax, ay] = pdfToView(geom, view, rect[0], rect[1]);
+    const [bx, by] = pdfToView(geom, view, rect[2], rect[3]);
+    return { left: Math.min(ax, bx), top: Math.min(ay, by), width: Math.abs(bx - ax), height: Math.abs(by - ay) };
+}
+/** Caja CSS en la página dibujada → rectángulo PDF normalizado (x1 < x2, y1 < y2). */
+function viewToRect(geom, view, left, top, width, height) {
+    const [ax, ay] = viewToPdf(geom, view, left, top);
+    const [bx, by] = viewToPdf(geom, view, left + width, top + height);
+    return [round(Math.min(ax, bx)), round(Math.min(ay, by)), round(Math.max(ax, bx)), round(Math.max(ay, by))];
+}
+/** Desplaza un rectángulo `dx`, `dy` puntos sin salirse de la página. */
+function moveRect(geom, rect, dx, dy) {
+    const w = rect[2] - rect[0];
+    const h = rect[3] - rect[1];
+    const maxX = geom.x0 + geom.width / geom.userUnit - w;
+    const maxY = geom.y0 + geom.height / geom.userUnit - h;
+    const x = clamp$1(rect[0] + dx, geom.x0, Math.max(geom.x0, maxX));
+    const y = clamp$1(rect[1] + dy, geom.y0, Math.max(geom.y0, maxY));
+    return [round(x), round(y), round(x + w), round(y + h)];
+}
+/** Escala un rectángulo desde su esquina superior izquierda (en el PDF, x1 e y2 se quedan). */
+function scaleRect(rect, factor, minWidth = 24) {
+    const w = rect[2] - rect[0];
+    const h = rect[3] - rect[1];
+    const k = Math.max(factor, minWidth / Math.max(1, w));
+    return [rect[0], round(rect[3] - h * k), round(rect[0] + w * k), rect[3]];
+}
+/**
+ * Une los rectángulos de una selección de texto (`getClientRects()`, ya relativos a la página) en
+ * uno por línea: los que se solapan en vertical y se tocan en horizontal.
+ */
+function mergeLineRects(rects) {
+    const sorted = rects.filter((r) => r.width > 0.5 && r.height > 0.5).sort((a, b) => a.top - b.top || a.left - b.left);
+    const lines = [];
+    for (const r of sorted) {
+        const right = r.left + r.width;
+        const bottom = r.top + r.height;
+        const line = lines.find((l) => {
+            const overlap = Math.min(l.bottom, bottom) - Math.max(l.top, r.top);
+            return overlap > Math.min(l.bottom - l.top, r.height) / 2 && r.left <= l.right + r.height && right >= l.left - r.height;
+        });
+        if (line) {
+            line.left = Math.min(line.left, r.left);
+            line.top = Math.min(line.top, r.top);
+            line.right = Math.max(line.right, right);
+            line.bottom = Math.max(line.bottom, bottom);
+        }
+        else {
+            lines.push({ left: r.left, top: r.top, right, bottom });
+        }
+    }
+    return lines.map((l) => ({ left: l.left, top: l.top, width: l.right - l.left, height: l.bottom - l.top }));
+}
+/** Rectángulo que contiene a todos. */
+function boundsOf(rects) {
+    return [
+        Math.min(...rects.map((r) => r[0])),
+        Math.min(...rects.map((r) => r[1])),
+        Math.max(...rects.map((r) => r[2])),
+        Math.max(...rects.map((r) => r[3])),
+    ];
+}
+/** Caja de un dibujo, con medio grosor de margen. */
+function inkBounds(ink) {
+    const xs = [];
+    const ys = [];
+    for (const path of ink.paths) {
+        for (let i = 0; i + 1 < path.length; i += 2) {
+            xs.push(path[i]);
+            ys.push(path[i + 1]);
+        }
+    }
+    const m = ink.thickness / 2 + 1;
+    return [round(Math.min(...xs) - m), round(Math.min(...ys) - m), round(Math.max(...xs) + m), round(Math.max(...ys) + m)];
+}
+/** Quita puntos casi alineados de un trazo (Ramer–Douglas–Peucker), con tolerancia en las mismas unidades. */
+function simplifyPath(points, tolerance) {
+    if (points.length <= 4)
+        return [...points];
+    const n = points.length / 2;
+    const keep = new Uint8Array(n);
+    keep[0] = keep[n - 1] = 1;
+    const stack = [[0, n - 1]];
+    while (stack.length) {
+        const [a, b] = stack.pop();
+        const [ax, ay, bx, by] = [points[a * 2], points[a * 2 + 1], points[b * 2], points[b * 2 + 1]];
+        const len = Math.hypot(bx - ax, by - ay) || 1;
+        let max = 0;
+        let at = -1;
+        for (let i = a + 1; i < b; i++) {
+            const d = Math.abs((by - ay) * points[i * 2] - (bx - ax) * points[i * 2 + 1] + bx * ay - by * ax) / len;
+            if (d > max)
+                [max, at] = [d, i];
+        }
+        if (at !== -1 && max > tolerance) {
+            keep[at] = 1;
+            stack.push([a, at], [at, b]);
+        }
+    }
+    const out = [];
+    for (let i = 0; i < n; i++)
+        if (keep[i])
+            out.push(points[i * 2], points[i * 2 + 1]);
+    return out;
+}
+/** Prefijo que pdf.js reconoce como anotación nueva al guardar o imprimir. */
+const PDFJS_EDITOR_PREFIX = 'pdfjs_internal_editor_';
+/** Tipos de anotación nueva de pdf.js (`AnnotationEditorType`). */
+const EDITOR_TYPE = { freeText: 3, highlight: 9, stamp: 13, ink: 15 };
+/**
+ * La anotación en el formato que pdf.js escribe en el PDF al guardar (`saveDocument`) o imprimir.
+ * La firma necesita su imagen como `ImageBitmap` (`bitmap`): pdf.js la transfiere al worker, así
+ * que hay que crear una nueva cada vez.
+ */
+function toPdfJsAnnotation(annotation, pageRotation, bitmap) {
+    const base = {
+        pageIndex: annotation.page - 1,
+        rotation: normalize(pageRotation),
+        user: annotation.author || undefined,
+        date: annotation.date ? new Date(annotation.date) : new Date(),
+        structTreeParentId: null,
+    };
+    switch (annotation.type) {
+        case 'highlight': {
+            if (!annotation.rects.length)
+                return null;
+            const rect = boundsOf(annotation.rects);
+            return {
+                ...base,
+                annotationType: EDITOR_TYPE.highlight,
+                color: hexToRgb(CB_PDF_COLORS[annotation.color].light),
+                opacity: 1,
+                rect,
+                quadPoints: annotation.rects.flatMap(([x1, y1, x2, y2]) => [x1, y2, x2, y2, x1, y1, x2, y1]),
+                outlines: annotation.rects.map(([x1, y1, x2, y2]) => [x1, y1, x2, y1, x2, y2, x1, y2]),
+                popup: annotation.comment ? { contents: annotation.comment, rect: [rect[2], rect[3] - 60, rect[2] + 160, rect[3]] } : undefined,
+            };
+        }
+        case 'note':
+            return {
+                ...base,
+                annotationType: EDITOR_TYPE.freeText,
+                color: hexToRgb(CB_PDF_COLORS[annotation.color].dark),
+                fontSize: annotation.fontSize ?? 12,
+                value: annotation.text,
+                rect: [...annotation.rect],
+            };
+        case 'ink': {
+            const paths = annotation.paths.filter((p) => p.length >= 2);
+            if (!paths.length)
+                return null;
+            return {
+                ...base,
+                annotationType: EDITOR_TYPE.ink,
+                color: hexToRgb(CB_PDF_COLORS[annotation.color].dark),
+                thickness: annotation.thickness,
+                opacity: 1,
+                rect: [...inkBounds({ paths, thickness: annotation.thickness })],
+                // pdf.js escribe cada trazo como segmentos: NaN×4 indica "línea recta hasta x, y".
+                paths: {
+                    lines: paths.map((p) => {
+                        const line = [Number.NaN, Number.NaN, Number.NaN, Number.NaN, p[0], p[1]];
+                        for (let i = 2; i + 1 < p.length; i += 2)
+                            line.push(Number.NaN, Number.NaN, Number.NaN, Number.NaN, p[i], p[i + 1]);
+                        return line;
+                    }),
+                    points: paths.map((p) => [...p]),
+                },
+            };
+        }
+        case 'signature':
+            if (!bitmap)
+                return null;
+            return {
+                ...base,
+                annotationType: EDITOR_TYPE.stamp,
+                bitmapId: `cb_sig_${annotation.id}`,
+                bitmap,
+                isSvg: false,
+                rect: [...annotation.rect],
+            };
+    }
+}
+/**
+ * Recorta el margen transparente de una firma (el área de `cb-signature-pad` suele estar casi
+ * vacía) y da su tamaño en píxeles. Sin canvas, la devuelve tal cual.
+ */
+async function trimSignature(dataUrl, doc) {
+    const img = await loadImage(dataUrl, doc);
+    const fallback = { url: dataUrl, width: img?.naturalWidth || 300, height: img?.naturalHeight || 100 };
+    if (!img?.naturalWidth)
+        return fallback;
+    const canvas = doc.createElement('canvas');
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    let ctx = null;
+    try {
+        ctx = canvas.getContext('2d', { willReadFrequently: true });
+    }
+    catch {
+        ctx = null;
+    }
+    if (!ctx)
+        return fallback;
+    ctx.drawImage(img, 0, 0);
+    const { data, width, height } = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    let [minX, minY, maxX, maxY] = [width, height, -1, -1];
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            if (data[(y * width + x) * 4 + 3] > 16) {
+                if (x < minX)
+                    minX = x;
+                if (x > maxX)
+                    maxX = x;
+                if (y < minY)
+                    minY = y;
+                if (y > maxY)
+                    maxY = y;
+            }
+        }
+    }
+    if (maxX < 0)
+        return fallback;
+    const pad = 4;
+    const x = Math.max(0, minX - pad);
+    const y = Math.max(0, minY - pad);
+    const w = Math.min(width, maxX + pad + 1) - x;
+    const h = Math.min(height, maxY + pad + 1) - y;
+    const out = doc.createElement('canvas');
+    out.width = w;
+    out.height = h;
+    out.getContext('2d')?.drawImage(canvas, x, y, w, h, 0, 0, w, h);
+    return { url: out.toDataURL('image/png'), width: w, height: h };
+}
+/** La imagen de una firma como `ImageBitmap`, para que pdf.js la escriba en el PDF. */
+async function imageToBitmap(dataUrl) {
+    if (typeof createImageBitmap !== 'function')
+        return undefined;
+    try {
+        const blob = await (await fetch(dataUrl)).blob();
+        return await createImageBitmap(blob);
+    }
+    catch {
+        return undefined;
+    }
+}
+function loadImage(src, doc) {
+    return new Promise((resolve) => {
+        const img = doc.createElement('img');
+        const timer = setTimeout(() => resolve(null), 3000);
+        img.onload = () => {
+            clearTimeout(timer);
+            resolve(img);
+        };
+        img.onerror = () => {
+            clearTimeout(timer);
+            resolve(null);
+        };
+        img.src = src;
+    });
+}
+/** `#rrggbb` → `[r, g, b]` (0–255), como los colores de pdf.js. */
+function hexToRgb(hex) {
+    const m = /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(hex);
+    return m ? [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)] : [0, 0, 0];
+}
+function normalize(rotation) {
+    return ((Math.round(rotation / 90) * 90) % 360 + 360) % 360;
+}
+function clamp$1(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
+
 const CB_PDF_VIEWER_OPTIONS = new InjectionToken('CB_PDF_VIEWER_OPTIONS');
 /**
  * Configura el visor de PDF (worker, recursos y carga de pdf.js).
@@ -79,8 +405,11 @@ const PRINT_DPI = 150;
  * Imprime el documento: rasteriza cada página a {@link PRINT_DPI} ppp en un
  * `<iframe>` oculto y abre el diálogo de impresión del navegador (así se
  * imprime el PDF y no la página de la aplicación).
+ *
+ * `printStorage` es una copia de los campos y anotaciones nuevas (`annotationStorage.print`): se
+ * toma una vez para todas las páginas, porque al copiarla pdf.js transfiere las imágenes al worker.
  */
-async function printPdfDocument(pdf, document, onProgress, rotation = 0) {
+async function printPdfDocument(pdf, document, onProgress, rotation = 0, printStorage = pdf.annotationStorage.print) {
     const urls = [];
     const frame = document.createElement('iframe');
     frame.setAttribute('aria-hidden', 'true');
@@ -96,7 +425,8 @@ async function printPdfDocument(pdf, document, onProgress, rotation = 0) {
             const canvas = document.createElement('canvas');
             canvas.width = Math.floor(viewport.width);
             canvas.height = Math.floor(viewport.height);
-            await page.render({ canvas, viewport, intent: 'print' }).promise;
+            // AnnotationMode.ENABLE_STORAGE (3): los campos se imprimen con lo escrito y con las anotaciones nuevas.
+            await page.render({ canvas, viewport, intent: 'print', annotationMode: 3, printAnnotationStorage: printStorage }).promise;
             const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
             if (blob)
                 urls.push(URL.createObjectURL(blob));
@@ -245,11 +575,18 @@ const PAGE_GAP = 16;
 /** Píxeles máximos de un canvas (evita agotar la memoria en zoom alto). */
 const MAX_CANVAS_PIXELS = 2 ** 24;
 const THUMB_WIDTH = 112;
+let nextAnnotationId = 0;
+/** Esquemas que se abren desde los enlaces del documento. */
+const SAFE_URL = /^(https?:|mailto:|tel:)/i;
 const PDF_ICONS = {
     'zoom-in': zoomIn,
     'zoom-out': zoomOut,
     printer,
     'panel-left': panelLeft,
+    highlighter,
+    'sticky-note': stickyNote,
+    'pen-line': penLine,
+    signature,
 };
 /**
  * Visor de PDF sobre [pdf.js](https://mozilla.github.io/pdf.js/) (`pdfjs-dist`,
@@ -257,7 +594,9 @@ const PDF_ICONS = {
  *
  * Renderiza las páginas a medida que se ven, con texto seleccionable y
  * legible por lectores de pantalla, búsqueda (ignora tildes y mayúsculas),
- * miniaturas, zoom, giro, descarga, impresión y documentos con contraseña.
+ * miniaturas, índice (marcadores), enlaces internos y externos, formularios
+ * rellenables (se descargan e imprimen con lo escrito), zoom, giro, descarga,
+ * impresión y documentos con contraseña.
  *
  * @example
  * ```html
@@ -299,16 +638,49 @@ class CbPdfViewer {
         this.showRotate = input(true, { ...(ngDevMode ? { debugName: "showRotate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.downloadable = input(true, { ...(ngDevMode ? { debugName: "downloadable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.printable = input(true, { ...(ngDevMode ? { debugName: "printable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Pestaña Índice en el panel lateral (si el documento tiene marcadores). */
+        this.showOutline = input(true, { ...(ngDevMode ? { debugName: "showOutline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Campos de formulario rellenables (si no, se pintan como imagen). */
+        this.forms = input(true, { ...(ngDevMode ? { debugName: "forms" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Enlaces externos del documento: se abren en otra pestaña. `false` los desactiva. */
+        this.externalLinks = input(true, { ...(ngDevMode ? { debugName: "externalLinks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Vista del panel lateral. */
+        this.sidebarView = model('thumbnails', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidebarView" }] : /* istanbul ignore next */ []));
         /** Nombre accesible del visor (por defecto, "Visor de PDF"). */
         this.ariaLabel = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Herramientas para resaltar, poner notas, dibujar y firmar (y la pestaña Anotaciones). */
+        this.annotatable = input(false, { ...(ngDevMode ? { debugName: "annotatable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Anotaciones del usuario, en puntos PDF. Se ven siempre; con `annotatable` se crean, mueven y
+         * borran. Al descargar o imprimir se escriben en el PDF como anotaciones estándar.
+         */
+        this.annotations = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "annotations" }] : /* istanbul ignore next */ []));
+        /** Herramienta activa (`none`, `highlight`, `note`, `ink`). Escape vuelve a `none`. */
+        this.tool = model('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tool" }] : /* istanbul ignore next */ []));
+        /** Color de las anotaciones nuevas. */
+        this.annotationColor = model('yellow', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "annotationColor" }] : /* istanbul ignore next */ []));
+        /** Autor de las anotaciones nuevas (se guarda en el PDF). */
+        this.author = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "author" }] : /* istanbul ignore next */ []));
         /** Documento abierto. */
         this.loaded = output();
         /** No se pudo abrir el documento. */
         this.loadError = output();
+        /** El usuario cambió un campo del formulario (los valores, con `getFormData()`). */
+        this.formChange = output();
+        /** El usuario creó una anotación. */
+        this.annotationAdd = output();
+        /** El usuario borró una anotación. */
+        this.annotationRemove = output();
         this.engine = inject(CbPdfEngine);
         this.document = inject(DOCUMENT);
         this.injector = inject(Injector);
+        this.host = inject(ElementRef);
         this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
         this.uid = `cb-pdf-${++nextUid}`;
         this.state = signal('idle', /* @ts-ignore */
@@ -334,6 +706,35 @@ class CbPdfViewer {
         this.searching = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searching" }] : /* istanbul ignore next */ []));
         this.zoomLevels = ZOOM_LEVELS;
+        /** Índice del documento (vacío si no tiene). */
+        this.outline = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "outline" }] : /* istanbul ignore next */ []));
+        /** Algún campo del formulario cambió desde que se abrió. */
+        this.formModified = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formModified" }] : /* istanbul ignore next */ []));
+        this.collapsed = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        /** Enlaces del documento (lo que la capa de anotaciones de pdf.js necesita). */
+        this.linkService = {
+            externalLinkEnabled: true,
+            eventBus: null,
+            addLinkAttributes: (link, url, newWindow) => {
+                if (!this.externalLinks() || !SAFE_URL.test(url)) {
+                    link.removeAttribute('href');
+                    return;
+                }
+                link.href = url;
+                link.title = url;
+                link.rel = 'noopener noreferrer nofollow';
+                if (newWindow !== false)
+                    link.target = '_blank';
+            },
+            getDestinationHash: () => '#',
+            getAnchorUrl: (hash) => `#${hash}`,
+            goToDestination: (dest) => void this.goToDestination(dest),
+            executeNamedAction: (action) => this.namedAction(action),
+            executeSetOCGState: () => undefined,
+        };
         this.viewport = viewChild('viewport', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
         this.pageEls = viewChildren('pageEl', /* @ts-ignore */
@@ -344,6 +745,8 @@ class CbPdfViewer {
         ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
         this.passwordInput = viewChild('passwordInput', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "passwordInput" }] : /* istanbul ignore next */ []));
+        this.cardText = viewChild('cardText', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cardText" }] : /* istanbul ignore next */ []));
         /** Factor de zoom efectivo (1 = 100 %). */
         this.scale = computed(() => {
             const zoom = this.zoom();
@@ -393,6 +796,79 @@ class CbPdfViewer {
             return this.searching() ? this.t().searching : this.t().noResults;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchStatus" }] : /* istanbul ignore next */ []));
+        // --- Anotaciones -------------------------------------------------------------
+        this.colors = CB_PDF_COLORS;
+        this.colorNames = Object.keys(CB_PDF_COLORS);
+        this.selectedId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+        /** Anotación con el editor (texto de la nota o comentario del resaltado) abierto. */
+        this.editingId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editingId" }] : /* istanbul ignore next */ []));
+        /** Anotación mientras se arrastra o cambia de tamaño (se confirma al soltar). */
+        this.dragPreview = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragPreview" }] : /* istanbul ignore next */ []));
+        /** Trazo que se está dibujando, en píxeles de la página. */
+        this.stroke = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stroke" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.announceFlip = false;
+        this.signing = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "signing" }] : /* istanbul ignore next */ []));
+        this.signatureValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "signatureValue" }] : /* istanbul ignore next */ []));
+        this.pendingFocus = null;
+        this.shownAnnotations = computed(() => {
+            const preview = this.dragPreview();
+            const list = this.annotations();
+            return preview ? list.map((a) => (a.id === preview.id ? preview : a)) : list;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shownAnnotations" }] : /* istanbul ignore next */ []));
+        /** Anotaciones de cada página, ya colocadas con el zoom y el giro actuales. */
+        this.marks = computed(() => {
+            const sizes = this.sizes();
+            const pages = sizes.map(() => []);
+            for (const a of this.shownAnnotations()) {
+                const size = sizes[a.page - 1];
+                if (!size)
+                    continue;
+                pages[a.page - 1].push(this.toMark(a, size));
+            }
+            return pages;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []));
+        this.editingMark = computed(() => {
+            const id = this.editingId();
+            if (!id)
+                return null;
+            for (const page of this.marks())
+                for (const m of page)
+                    if (m.a.id === id)
+                        return m;
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editingMark" }] : /* istanbul ignore next */ []));
+        this.sortedAnnotations = computed(() => [...this.annotations()].sort((a, b) => a.page - b.page || this.topOf(b) - this.topOf(a)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortedAnnotations" }] : /* istanbul ignore next */ []));
+        this.sidebarTabs = computed(() => {
+            const tabs = ['thumbnails'];
+            if (this.outline().length && this.showOutline())
+                tabs.push('outline');
+            if (this.annotatable())
+                tabs.push('annotations');
+            return tabs;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidebarTabs" }] : /* istanbul ignore next */ []));
+        this.activeView = computed(() => (this.sidebarTabs().includes(this.sidebarView()) ? this.sidebarView() : 'thumbnails'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []));
+        this.toolHint = computed(() => {
+            if (!this.annotatable())
+                return '';
+            const tool = this.tool();
+            const t = this.t();
+            return tool === 'highlight' ? t.pdfHighlightHint : tool === 'note' ? t.pdfNoteHint : tool === 'ink' ? t.pdfDrawHint : '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toolHint" }] : /* istanbul ignore next */ []));
         this.loadToken = 0;
         this.searchToken = 0;
         this.pages = new Map();
@@ -533,12 +1009,79 @@ class CbPdfViewer {
         if (total)
             this.selectMatch((this.matchIndex() - 1 + total) % total);
     }
-    /** Descarga el documento original. */
+    /** Lleva a un destino del documento (nombre o destino explícito), con su posición en la página. */
+    async goToDestination(dest) {
+        const pdf = this.pdf;
+        if (!pdf || !dest)
+            return;
+        const explicit = typeof dest === 'string' ? await pdf.getDestination(dest).catch(() => null) : dest;
+        if (!Array.isArray(explicit) || pdf !== this.pdf)
+            return;
+        const ref = explicit[0];
+        let page;
+        try {
+            page = typeof ref === 'object' && ref ? (await pdf.getPageIndex(ref)) + 1 : Number.isInteger(ref) ? ref + 1 : NaN;
+        }
+        catch {
+            return;
+        }
+        if (!Number.isFinite(page) || page < 1 || page > this.numPages())
+            return;
+        // XYZ y FitH/FitBH dan la altura (en puntos, desde abajo) a la que se ve el destino.
+        const kind = explicit[1]?.name;
+        const top = kind === 'XYZ' ? explicit[3] : kind === 'FitH' || kind === 'FitBH' ? explicit[2] : null;
+        this.goToPage(page);
+        if (typeof top === 'number')
+            afterNextRender(() => this.scrollToPoint(page, top), { injector: this.injector });
+    }
+    /** Valores actuales del formulario, por nombre de campo. */
+    async getFormData() {
+        const pdf = this.pdf;
+        if (!pdf)
+            return {};
+        const fields = (await Promise.resolve(pdf.getFieldObjects?.()).catch(() => null));
+        const storage = pdf.annotationStorage;
+        const data = {};
+        if (!fields || !storage)
+            return data;
+        for (const [name, widgets] of fields) {
+            for (const widget of widgets) {
+                if (!widget.id)
+                    continue;
+                const stored = storage.getValue(widget.id, { value: widget.value }).value;
+                if (widget.type === 'checkbox' || widget.type === 'radiobutton') {
+                    const checked = stored === true || (typeof stored === 'string' && stored !== 'Off' && stored !== '');
+                    if (widget.type === 'checkbox')
+                        data[name] = checked;
+                    else if (checked)
+                        data[name] = widget.exportValues ?? String(stored);
+                    else
+                        data[name] ??= null;
+                }
+                else {
+                    data[name] = Array.isArray(stored) ? stored.map(String) : stored == null ? null : String(stored);
+                }
+            }
+        }
+        return data;
+    }
+    /** El PDF con lo escrito en el formulario y las anotaciones (o el original si no hay cambios). */
+    async save() {
+        const pdf = this.pdf;
+        if (!pdf)
+            return null;
+        const changed = this.formModified() || this.annotations().length > 0;
+        const bytes = changed ? await this.withAnnotations(() => pdf.saveDocument()) : await pdf.getData();
+        return new Blob([bytes], { type: 'application/pdf' });
+    }
+    /** Descarga el documento (con los datos del formulario y las anotaciones, si los hay). */
     async download() {
         if (!this.pdf)
             return;
         const src = this.src();
-        const blob = src instanceof Blob ? src : new Blob([(await this.pdf.getData())], { type: 'application/pdf' });
+        const blob = src instanceof Blob && !this.formModified() && !this.annotations().length ? src : await this.save();
+        if (!blob)
+            return;
         const url = URL.createObjectURL(blob);
         const a = this.document.createElement('a');
         a.href = url;
@@ -555,7 +1098,10 @@ class CbPdfViewer {
             return;
         this.printProgress.set({ done: 0, total: this.numPages() });
         try {
-            await printPdfDocument(this.pdf, this.document, (done, total) => this.printProgress.set({ done, total }), this.rotation());
+            const pdf = this.pdf;
+            // La copia para imprimir se toma con las anotaciones escritas; después se quitan.
+            const storage = await this.withAnnotations(async () => pdf.annotationStorage.print);
+            await printPdfDocument(pdf, this.document, (done, total) => this.printProgress.set({ done, total }), this.rotation(), storage);
         }
         finally {
             this.printProgress.set(null);
@@ -604,6 +1150,14 @@ class CbPdfViewer {
                 return;
             }
             this.pdf = pdf;
+            this.formModified.set(false);
+            // pdf.js tipa estos ganchos como `null`, pero los llama si se les asigna una función.
+            const storage = pdf.annotationStorage;
+            if (storage) {
+                storage.onSetModified = () => this.formModified.set(true);
+                storage.onResetModified = () => this.formModified.set(false);
+            }
+            void this.loadOutline(pdf, token);
             // Mide el área antes del primer render para que "ajustar al ancho" no renderice dos veces.
             this.observeResize();
             const first = sizeOf(await this.getPage(1));
@@ -632,6 +1186,14 @@ class CbPdfViewer {
             this.loadError.emit(error);
         }
     }
+    async loadOutline(pdf, token) {
+        const raw = await Promise.resolve(pdf.getOutline?.()).catch(() => null);
+        if (token !== this.loadToken)
+            return;
+        const map = (items) => (items ?? []).map((i) => ({ title: i.title, dest: i.dest, url: i.url, bold: !!i.bold, italic: !!i.italic, items: map(i.items) }));
+        this.outline.set(map(raw));
+        this.collapsed.set(new Set());
+    }
     submitPassword(event, value) {
         event.preventDefault();
         if (!this.passwordCallback)
@@ -681,6 +1243,12 @@ class CbPdfViewer {
         this.searching.set(false);
         this.numPages.set(0);
         this.sizes.set([]);
+        this.outline.set([]);
+        this.formModified.set(false);
+        this.selectedId.set(null);
+        this.editingId.set(null);
+        this.stroke.set(null);
+        this.dragPreview.set(null);
     }
     getPage(n) {
         let page = this.pages.get(n);
@@ -770,12 +1338,15 @@ class CbPdfViewer {
             canvas.width = Math.floor(viewport.width * ratio);
             canvas.height = Math.floor(viewport.height * ratio);
             canvas.setAttribute('aria-hidden', 'true');
-            const task = page.render({ canvas, viewport, transform: ratio === 1 ? undefined : [ratio, 0, 0, ratio, 0, 0] });
+            // Con formularios HTML, el canvas no dibuja los campos (AnnotationMode.ENABLE_FORMS).
+            const annotationMode = this.forms() ? (this.pdfjs?.AnnotationMode?.ENABLE_FORMS ?? 2) : (this.pdfjs?.AnnotationMode?.ENABLE ?? 1);
+            const task = page.render({ canvas, viewport, annotationMode, transform: ratio === 1 ? undefined : [ratio, 0, 0, ratio, 0, 0] });
             renderTask = task;
             await task.promise;
             if (cancelled)
                 return;
             el.querySelector('.cb-pdf__canvas')?.replaceChildren(canvas);
+            void this.renderAnnotations(page, viewport, el, () => cancelled);
             const textEl = el.querySelector('.cb-pdf__text');
             if (!textEl || !this.pdfjs?.TextLayer)
                 return;
@@ -805,6 +1376,54 @@ class CbPdfViewer {
         const el = this.pageEl(n);
         el?.querySelector('.cb-pdf__canvas')?.replaceChildren();
         el?.querySelector('.cb-pdf__text')?.replaceChildren();
+        el?.querySelector('.cb-pdf__annotations')?.replaceChildren();
+    }
+    /** Enlaces y campos de formulario de la página (capa de anotaciones de pdf.js). */
+    async renderAnnotations(page, viewport, el, cancelled) {
+        const div = el.querySelector('.cb-pdf__annotations');
+        const Layer = this.pdfjs?.AnnotationLayer;
+        const pdf = this.pdf;
+        if (!div || !Layer || !pdf)
+            return;
+        try {
+            const annotations = await page.getAnnotations({ intent: 'display' });
+            if (cancelled() || !annotations.length)
+                return;
+            const fieldObjects = this.forms() ? await pdf.getFieldObjects().catch(() => null) : null;
+            if (cancelled())
+                return;
+            div.replaceChildren();
+            const layerViewport = viewport.clone({ dontFlip: true });
+            const layer = new Layer({
+                div,
+                page,
+                viewport: layerViewport,
+                linkService: this.linkService,
+                annotationStorage: pdf.annotationStorage,
+                accessibilityManager: null,
+                annotationCanvasMap: null,
+                annotationEditorUIManager: null,
+                structTreeLayer: null,
+                commentManager: null,
+            });
+            await layer.render({
+                viewport: layerViewport,
+                div,
+                annotations,
+                page,
+                linkService: this.linkService,
+                annotationStorage: pdf.annotationStorage,
+                renderForms: this.forms(),
+                enableScripting: false,
+                hasJSActions: false,
+                fieldObjects,
+            });
+            if (cancelled())
+                div.replaceChildren();
+        }
+        catch {
+            // Anotaciones dañadas: la página se ve igual, sin enlaces ni campos.
+        }
     }
     observeThumbs() {
         const root = this.document.getElementById(`${this.uid}-thumbs`);
@@ -949,6 +1568,16 @@ class CbPdfViewer {
         this.visiblePage = n;
         root.scrollTop = el.offsetTop - PAGE_GAP;
     }
+    /** Desplaza hasta la altura `top` (puntos PDF, desde abajo) de la página `n`. */
+    scrollToPoint(n, top) {
+        const root = this.viewport()?.nativeElement;
+        const el = this.pageEl(n);
+        const size = this.sizes()[n - 1];
+        if (!root || !el || !size || (size.rotate + this.rotation()) % 360 !== 0)
+            return;
+        const factor = this.scale() * CSS_UNITS;
+        root.scrollTop = el.offsetTop + Math.max(0, (size.height - top) * factor) - PAGE_GAP;
+    }
     readAnchor() {
         const root = this.viewport()?.nativeElement;
         const el = this.pageEl(this.visiblePage);
@@ -976,7 +1605,571 @@ class CbPdfViewer {
     pageEl(n) {
         return this.pageEls()[n - 1]?.nativeElement;
     }
+    // --- Anotaciones -------------------------------------------------------------
+    toggleTool(tool) {
+        this.tool.set(this.tool() === tool ? 'none' : tool);
+    }
+    /** Con texto seleccionado lo resalta al momento; si no, activa la herramienta. */
+    onHighlightTool() {
+        if (this.tool() !== 'highlight' && this.highlightSelection())
+            return;
+        this.toggleTool('highlight');
+    }
+    /** Con el teclado (sin puntero) la nota se pone directamente en la página que se ve. */
+    onNoteTool(event) {
+        if (event.detail === 0 && this.tool() !== 'note') {
+            const page = this.page();
+            const spot = this.visibleSpot(page);
+            if (spot)
+                this.addNote(page, spot.x - 80, spot.y - 20);
+            return;
+        }
+        this.toggleTool('note');
+    }
+    openSignature() {
+        this.tool.set('none');
+        this.signatureValue.set('');
+        this.signing.set(true);
+    }
+    async insertSignature() {
+        const value = this.signatureValue();
+        if (!value)
+            return;
+        const page = this.page();
+        const size = this.sizes()[page - 1];
+        const spot = this.visibleSpot(page);
+        this.signing.set(false);
+        if (!size || !spot)
+            return;
+        const { url, width, height } = await trimSignature(value, this.document);
+        const view = this.viewOf(size);
+        const pageWidth = this.pageBoxes()[page - 1]?.width ?? 400;
+        // 180 pt de ancho como máximo (algo menos que media página A4), con la proporción de la firma.
+        const w = Math.min(pageWidth * 0.45, 180 * view.factor);
+        const h = (w * height) / Math.max(1, width);
+        const rect = viewToRect(this.geomOf(size), view, spot.x - w / 2, spot.y - h / 2, w, h);
+        const id = this.addAnnotation({ ...this.newBase(page), type: 'signature', rect, image: url });
+        this.pendingFocus = id;
+    }
+    /** El foco vuelve tras cerrar el diálogo: entonces se lleva a la firma recién puesta. */
+    onSignatureHide() {
+        const id = this.pendingFocus;
+        this.pendingFocus = null;
+        if (id)
+            setTimeout(() => this.focusMark(id));
+    }
+    /** Resalta el texto seleccionado en el documento (una anotación por página). */
+    highlightSelection() {
+        const selection = this.document.getSelection();
+        if (!selection || selection.isCollapsed || !selection.rangeCount)
+            return false;
+        let created = 0;
+        for (const [index, ref] of this.pageEls().entries()) {
+            const pageEl = ref.nativeElement;
+            const textEl = pageEl.querySelector('.cb-pdf__text');
+            const size = this.sizes()[index];
+            if (!textEl || !size)
+                continue;
+            const boxes = [];
+            let text = '';
+            for (let k = 0; k < selection.rangeCount; k++) {
+                const range = selection.getRangeAt(k);
+                if (!range.intersectsNode(textEl))
+                    continue;
+                const part = range.cloneRange();
+                if (!textEl.contains(part.startContainer))
+                    part.setStart(textEl, 0);
+                if (!textEl.contains(part.endContainer))
+                    part.setEnd(textEl, textEl.childNodes.length);
+                const origin = pageEl.getBoundingClientRect();
+                for (const r of Array.from(part.getClientRects())) {
+                    boxes.push({ left: r.left - origin.left, top: r.top - origin.top, width: r.width, height: r.height });
+                }
+                text += part.toString();
+            }
+            const lines = mergeLineRects(withoutTallRects(boxes));
+            if (!lines.length)
+                continue;
+            const geom = this.geomOf(size);
+            const view = this.viewOf(size);
+            const rects = lines.map((l) => viewToRect(geom, view, l.left, l.top, l.width, l.height));
+            this.addAnnotation({ ...this.newBase(index + 1), type: 'highlight', rects, color: this.annotationColor(), text: text.replace(/\s+/g, ' ').trim() });
+            created++;
+        }
+        if (created)
+            selection.removeAllRanges();
+        return created > 0;
+    }
+    onPagesPointerUp() {
+        // La selección termina de fijarse después del pointerup.
+        if (this.annotatable() && this.tool() === 'highlight')
+            setTimeout(() => this.highlightSelection());
+    }
+    onMarksPointerDown(event, page) {
+        if (!this.annotatable() || event.button !== 0)
+            return;
+        const layer = event.currentTarget;
+        const origin = layer.getBoundingClientRect();
+        const tool = this.tool();
+        if (tool === 'note') {
+            event.preventDefault();
+            this.addNote(page, event.clientX - origin.left, event.clientY - origin.top);
+        }
+        else if (tool === 'ink') {
+            event.preventDefault();
+            layer.setPointerCapture?.(event.pointerId);
+            this.stroke.set({ page, points: [event.clientX - origin.left, event.clientY - origin.top] });
+            const move = (e) => {
+                const s = this.stroke();
+                if (s)
+                    this.stroke.set({ page, points: [...s.points, e.clientX - origin.left, e.clientY - origin.top] });
+            };
+            const end = () => {
+                layer.removeEventListener('pointermove', move);
+                layer.removeEventListener('pointerup', end);
+                layer.removeEventListener('pointercancel', end);
+                this.finishStroke();
+            };
+            layer.addEventListener('pointermove', move);
+            layer.addEventListener('pointerup', end);
+            layer.addEventListener('pointercancel', end);
+        }
+        else if (tool === 'none') {
+            this.closeEditor(false);
+            this.selectedId.set(null);
+        }
+    }
+    finishStroke() {
+        const s = this.stroke();
+        this.stroke.set(null);
+        const size = s && this.sizes()[s.page - 1];
+        if (!s || !size)
+            return;
+        const points = s.points.length === 2 ? [...s.points, s.points[0] + 0.5, s.points[1] + 0.5] : s.points;
+        const geom = this.geomOf(size);
+        const view = this.viewOf(size);
+        const pdf = [];
+        for (let i = 0; i + 1 < points.length; i += 2)
+            pdf.push(...viewToPdf(geom, view, points[i], points[i + 1]));
+        const path = simplifyPath(pdf, 0.4).map((v) => Math.round(v * 100) / 100);
+        this.addAnnotation({ ...this.newBase(s.page), type: 'ink', paths: [path], color: this.annotationColor(), thickness: 2 }, false);
+    }
+    addNote(page, x, y) {
+        const size = this.sizes()[page - 1];
+        if (!size)
+            return;
+        const view = this.viewOf(size);
+        const box = this.pageBoxes()[page - 1];
+        const w = 160 * view.factor;
+        const h = 12 * 1.5 * view.factor;
+        const left = clamp(x, 0, Math.max(0, (box?.width ?? w) - w));
+        const top = clamp(y, 0, Math.max(0, (box?.height ?? h) - h));
+        const rect = viewToRect(this.geomOf(size), view, left, top, w, h);
+        const id = this.addAnnotation({ ...this.newBase(page), type: 'note', rect, text: '', color: this.annotationColor() }, false);
+        this.tool.set('none');
+        this.openEditor(id);
+    }
+    /** Añade una anotación, la anuncia y la selecciona. Devuelve su `id`. */
+    addAnnotation(annotation, focus = true) {
+        this.annotations.update((list) => [...list, annotation]);
+        this.annotationAdd.emit(annotation);
+        this.announce(cbFormat(this.t().pdfAnnotationAdded, this.nounOf(annotation), annotation.page));
+        this.selectedId.set(annotation.id);
+        if (focus)
+            afterNextRender(() => this.focusMark(annotation.id), { injector: this.injector });
+        return annotation.id;
+    }
+    /** Borra una anotación y deja el foco en la siguiente de la página (o en el documento). */
+    removeAnnotation(annotation) {
+        const list = this.annotations();
+        const index = list.findIndex((a) => a.id === annotation.id);
+        if (index === -1)
+            return;
+        const samePage = list.filter((a) => a.page === annotation.page && a.id !== annotation.id);
+        const hadFocus = this.host.nativeElement.contains(this.document.activeElement);
+        this.annotations.set(list.filter((a) => a.id !== annotation.id));
+        if (this.editingId() === annotation.id)
+            this.editingId.set(null);
+        if (this.selectedId() === annotation.id)
+            this.selectedId.set(null);
+        this.annotationRemove.emit(annotation);
+        this.announce(this.t().pdfAnnotationRemoved);
+        if (!hadFocus || this.activeView() === 'annotations' && this.sidebar())
+            return;
+        const next = samePage[0]?.id;
+        afterNextRender(() => (next ? this.focusMark(next) : this.viewport()?.nativeElement.focus()), { injector: this.injector });
+    }
+    replaceAnnotation(annotation) {
+        this.annotations.update((list) => list.map((a) => (a.id === annotation.id ? annotation : a)));
+    }
+    select(id) {
+        if (this.editingId() && this.editingId() !== id)
+            this.closeEditor(false);
+        this.selectedId.set(id);
+    }
+    /** Lleva a la anotación (desde la lista del panel) y le da el foco. */
+    revealAnnotation(annotation) {
+        this.goToPage(annotation.page);
+        this.selectedId.set(annotation.id);
+        afterNextRender(() => this.focusMark(annotation.id, true), { injector: this.injector });
+    }
+    focusMark(id, scroll = false) {
+        const el = this.host.nativeElement.querySelector(`.cb-pdf__mark[data-id="${id}"]`);
+        if (!el)
+            return;
+        el.focus({ preventScroll: !scroll });
+        if (scroll)
+            el.scrollIntoView?.({ block: 'center', inline: 'nearest' });
+    }
+    openEditor(id) {
+        const annotation = this.annotations().find((a) => a.id === id);
+        if (!annotation || (annotation.type !== 'note' && annotation.type !== 'highlight'))
+            return;
+        this.selectedId.set(id);
+        this.editingId.set(id);
+        afterNextRender(() => {
+            const textarea = this.cardText()?.nativeElement;
+            if (!textarea)
+                return;
+            textarea.value = annotation.type === 'note' ? annotation.text : (annotation.comment ?? '');
+            textarea.focus();
+        }, { injector: this.injector });
+    }
+    onCardInput(value) {
+        const annotation = this.annotations().find((a) => a.id === this.editingId());
+        if (annotation?.type === 'note')
+            this.replaceAnnotation({ ...annotation, text: value });
+        else if (annotation?.type === 'highlight')
+            this.replaceAnnotation({ ...annotation, comment: value || undefined });
+    }
+    onCardKeydown(event) {
+        event.stopPropagation();
+        if (event.key === 'Escape' || (event.key === 'Enter' && (event.ctrlKey || event.metaKey))) {
+            event.preventDefault();
+            this.closeEditor(true);
+        }
+    }
+    /** Cierra el editor: una nota vacía se borra y una con texto ajusta su caja a lo escrito. */
+    closeEditor(refocus) {
+        const id = this.editingId();
+        if (!id)
+            return;
+        this.editingId.set(null);
+        const annotation = this.annotations().find((a) => a.id === id);
+        if (annotation?.type === 'note') {
+            if (!annotation.text.trim()) {
+                this.annotations.update((list) => list.filter((a) => a.id !== id));
+                this.selectedId.set(null);
+                if (refocus)
+                    this.viewport()?.nativeElement.focus();
+                return;
+            }
+            this.measureNote(annotation);
+        }
+        if (refocus)
+            afterNextRender(() => this.focusMark(id), { injector: this.injector });
+    }
+    /** La caja de la nota en el PDF es la que ocupa su texto en pantalla. */
+    measureNote(note) {
+        const el = this.host.nativeElement.querySelector(`.cb-pdf__mark[data-id="${note.id}"]`);
+        const size = this.sizes()[note.page - 1];
+        if (!el || !size || !el.offsetWidth)
+            return;
+        const rect = viewToRect(this.geomOf(size), this.viewOf(size), el.offsetLeft, el.offsetTop, el.offsetWidth, el.offsetHeight);
+        if (rect.some((v, i) => Math.abs(v - note.rect[i]) > 0.5))
+            this.replaceAnnotation({ ...note, rect });
+    }
+    onMarkPointerDown(event, annotation) {
+        event.stopPropagation();
+        const el = event.currentTarget;
+        if (!this.annotatable() || event.button !== 0)
+            return;
+        if (annotation.type === 'highlight') {
+            this.select(annotation.id);
+            return;
+        }
+        // Sin el default no empieza una selección de texto al arrastrar; el foco se da a mano.
+        event.preventDefault();
+        el.focus({ preventScroll: true });
+        this.trackPointer(event, el, (dx, dy) => this.translated(annotation, dx, dy), () => {
+            if (annotation.type === 'note' && this.editingId() !== annotation.id)
+                this.openEditor(annotation.id);
+        });
+    }
+    onResizePointerDown(event, annotation) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (annotation.type !== 'signature')
+            return;
+        const size = this.sizes()[annotation.page - 1];
+        if (!size)
+            return;
+        const width = rectToView(this.geomOf(size), this.viewOf(size), annotation.rect).width;
+        this.trackPointer(event, event.currentTarget, (dx) => ({ ...annotation, rect: scaleRect(annotation.rect, (width + dx) / Math.max(1, width)) }));
+    }
+    /** Arrastre con vista previa: se confirma al soltar; sin moverse es un clic (`onClick`). */
+    trackPointer(event, el, update, onClick) {
+        el.setPointerCapture?.(event.pointerId);
+        const [x, y] = [event.clientX, event.clientY];
+        let moved = false;
+        const move = (e) => {
+            const [dx, dy] = [e.clientX - x, e.clientY - y];
+            if (!moved && Math.hypot(dx, dy) < 3)
+                return;
+            moved = true;
+            this.dragPreview.set(update(dx, dy));
+        };
+        const end = () => {
+            el.removeEventListener('pointermove', move);
+            el.removeEventListener('pointerup', end);
+            el.removeEventListener('pointercancel', end);
+            const preview = this.dragPreview();
+            this.dragPreview.set(null);
+            if (moved && preview)
+                this.replaceAnnotation(preview);
+            else
+                onClick?.();
+        };
+        el.addEventListener('pointermove', move);
+        el.addEventListener('pointerup', end);
+        el.addEventListener('pointercancel', end);
+    }
+    onMarkKeydown(event, rendered) {
+        if (!this.annotatable() || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        // La de la plantilla puede ser de antes del último repintado (tecla mantenida): se usa la actual.
+        const annotation = this.annotations().find((a) => a.id === rendered.id) ?? rendered;
+        const step = event.shiftKey ? 20 : 4;
+        const arrows = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            this.removeAnnotation(annotation);
+        }
+        else if (event.key === 'Enter' || event.key === ' ') {
+            if (annotation.type !== 'note' && annotation.type !== 'highlight')
+                return;
+            this.openEditor(annotation.id);
+        }
+        else if (arrows[event.key] && annotation.type !== 'highlight') {
+            const moved = this.translated(annotation, ...arrows[event.key]);
+            this.replaceAnnotation(moved);
+            this.announcePosition(moved);
+        }
+        else if ((event.key === '+' || event.key === '=' || event.key === '-') && (annotation.type === 'signature' || annotation.type === 'note')) {
+            const grow = event.key !== '-';
+            if (annotation.type === 'signature') {
+                const rect = scaleRect(annotation.rect, grow ? 1.1 : 1 / 1.1);
+                const pageWidth = (this.sizes()[annotation.page - 1]?.width ?? 1) / (this.sizes()[annotation.page - 1]?.userUnit ?? 1);
+                this.replaceAnnotation({ ...annotation, rect });
+                this.announce(cbFormat(this.t().pdfSignatureResized, Math.round(((rect[2] - rect[0]) / pageWidth) * 100)));
+            }
+            else {
+                const fontSize = clamp((annotation.fontSize ?? 12) + (grow ? 1 : -1), 6, 48);
+                this.replaceAnnotation({ ...annotation, fontSize });
+                this.announce(cbFormat(this.t().pdfNoteResized, fontSize));
+                afterNextRender(() => this.measureNote({ ...annotation, fontSize }), { injector: this.injector });
+            }
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /** Desplaza `dx`, `dy` píxeles de pantalla (con el giro, en el sentido en que se ven). */
+    translated(annotation, dx, dy) {
+        const size = this.sizes()[annotation.page - 1];
+        if (!size || annotation.type === 'highlight')
+            return annotation;
+        const geom = this.geomOf(size);
+        const view = this.viewOf(size);
+        const [ax, ay] = viewToPdf(geom, view, 0, 0);
+        const [bx, by] = viewToPdf(geom, view, dx, dy);
+        const [px, py] = [bx - ax, by - ay];
+        if (annotation.type === 'ink') {
+            return { ...annotation, paths: annotation.paths.map((p) => p.map((v, i) => Math.round((v + (i % 2 ? py : px)) * 100) / 100)) };
+        }
+        return { ...annotation, rect: moveRect(geom, annotation.rect, px, py) };
+    }
+    announcePosition(annotation) {
+        const box = this.marks()[annotation.page - 1]?.find((m) => m.a.id === annotation.id)?.box;
+        const page = this.pageBoxes()[annotation.page - 1];
+        if (!box || !page)
+            return;
+        this.announce(cbFormat(this.t().pdfAnnotationMoved, Math.round((box.left / page.width) * 100), Math.round((box.top / page.height) * 100)));
+    }
+    announce(text) {
+        // Un espacio duro alterno hace que se repita aunque el texto sea el mismo.
+        this.announceFlip = !this.announceFlip;
+        this.announcement.set(this.announceFlip ? text : `${text} `);
+    }
+    /** Centro de la parte visible de la página `n`, en píxeles de la página. */
+    visibleSpot(n) {
+        const root = this.viewport()?.nativeElement;
+        const el = this.pageEl(n);
+        if (!root || !el)
+            return null;
+        const top = Math.max(0, root.scrollTop - el.offsetTop);
+        const bottom = Math.min(el.offsetHeight, root.scrollTop + root.clientHeight - el.offsetTop);
+        const y = bottom > top ? (top + bottom) / 2 : el.offsetHeight / 3;
+        return { x: (el.offsetWidth || this.pageBoxes()[n - 1]?.width || 0) / 2, y };
+    }
+    toMark(a, size) {
+        const geom = this.geomOf(size);
+        const view = this.viewOf(size);
+        const color = CB_PDF_COLORS[a.type === 'signature' ? 'blue' : a.color];
+        const base = { a, light: color.light, dark: color.dark, label: this.labelOf(a) };
+        switch (a.type) {
+            case 'highlight': {
+                const boxes = a.rects.map((r) => rectToView(geom, view, r));
+                const box = unionBox(boxes);
+                return { ...base, box, rects: boxes.map((b) => ({ ...b, left: b.left - box.left, top: b.top - box.top })) };
+            }
+            case 'note':
+                return { ...base, box: rectToView(geom, view, a.rect), fontPx: (a.fontSize ?? 12) * view.factor * geom.userUnit };
+            case 'ink': {
+                const pad = (a.thickness / 2 + 1) * view.factor;
+                const points = a.paths.map((p) => {
+                    const out = [];
+                    for (let i = 0; i + 1 < p.length; i += 2)
+                        out.push(pdfToView(geom, view, p[i], p[i + 1]));
+                    return out;
+                });
+                const flat = points.flat();
+                const left = Math.min(...flat.map((p) => p[0])) - pad;
+                const top = Math.min(...flat.map((p) => p[1])) - pad;
+                const width = Math.max(...flat.map((p) => p[0])) + pad - left;
+                const height = Math.max(...flat.map((p) => p[1])) + pad - top;
+                const d = points.map((p) => p.map(([x, y], i) => `${i ? 'L' : 'M'}${round2(x - left)} ${round2(y - top)}`).join(' ')).join(' ');
+                return { ...base, box: { left, top, width, height }, d, strokePx: a.thickness * view.factor };
+            }
+            case 'signature':
+                return { ...base, box: rectToView(geom, view, a.rect) };
+        }
+    }
+    labelOf(a) {
+        const t = this.t();
+        switch (a.type) {
+            case 'highlight': {
+                const label = cbFormat(t.pdfHighlightOf, truncate(a.text, 80));
+                return a.comment ? `${label}. ${t.pdfComment}: ${truncate(a.comment, 120)}` : label;
+            }
+            case 'note':
+                return cbFormat(t.pdfNoteOf, a.text.trim() ? truncate(a.text, 120) : t.pdfEmptyNote);
+            case 'ink':
+                return t.pdfInkOf;
+            case 'signature':
+                return t.pdfSignatureOf;
+        }
+    }
+    nounOf(a) {
+        const t = this.t();
+        return a.type === 'highlight' ? t.pdfHighlightNoun : a.type === 'note' ? t.pdfNote : a.type === 'ink' ? t.pdfInkOf : t.pdfSignatureOf;
+    }
+    swatchOf(a) {
+        if (a.type === 'signature')
+            return CB_PDF_COLORS.blue.dark;
+        return a.type === 'highlight' ? CB_PDF_COLORS[a.color].light : CB_PDF_COLORS[a.color].dark;
+    }
+    colorLabel(color) {
+        const t = this.t();
+        return { yellow: t.pdfColorYellow, green: t.pdfColorGreen, blue: t.pdfColorBlue, red: t.pdfColorRed }[color];
+    }
+    /** Posición del editor: bajo la anotación, sin salirse de la página. */
+    cardLeft(m, pageWidth) {
+        return clamp(m.box.left, 0, Math.max(0, pageWidth - 260));
+    }
+    noteHeight(m) {
+        if (m.a.type !== 'note')
+            return m.box.height;
+        const lines = Math.max(1, m.a.text.split('\n').length);
+        return Math.max(m.box.height, lines * (m.fontPx ?? 16) * 1.25 + 8);
+    }
+    newBase(page) {
+        const author = this.author();
+        return { id: `cb-annot-${Date.now().toString(36)}-${++nextAnnotationId}`, page, ...(author ? { author } : {}), date: new Date().toISOString() };
+    }
+    geomOf(size) {
+        return { x0: size.x0, y0: size.y0, width: size.width, height: size.height, userUnit: size.userUnit };
+    }
+    viewOf(size) {
+        return { factor: this.scale() * CSS_UNITS, rotation: (size.rotate + this.rotation()) % 360 };
+    }
+    /** Altura (para ordenar de arriba abajo en el panel). */
+    topOf(a) {
+        if (a.type === 'highlight')
+            return Math.max(...a.rects.map((r) => r[3]));
+        if (a.type === 'ink')
+            return Math.max(...a.paths.flatMap((p) => p.filter((_, i) => i % 2)));
+        return a.rect[3];
+    }
+    /**
+     * Escribe las anotaciones en el `annotationStorage` de pdf.js mientras dura `run` (guardar o
+     * tomar la copia para imprimir) y las quita después, sin marcar el formulario como cambiado.
+     */
+    async withAnnotations(run) {
+        const pdf = this.pdf;
+        const list = this.annotations();
+        if (!pdf || !list.length)
+            return run();
+        const storage = pdf.annotationStorage;
+        const hook = storage.onSetModified;
+        storage.onSetModified = null;
+        const keys = [];
+        try {
+            for (const a of list) {
+                const size = this.sizes()[a.page - 1];
+                if (!size)
+                    continue;
+                const bitmap = a.type === 'signature' ? await imageToBitmap(a.image) : undefined;
+                const value = toPdfJsAnnotation(a, size.rotate, bitmap);
+                if (!value)
+                    continue;
+                const key = `${PDFJS_EDITOR_PREFIX}${a.id}`;
+                storage.setValue(key, value);
+                keys.push(key);
+            }
+            return await run();
+        }
+        finally {
+            for (const key of keys)
+                storage.remove(key);
+            storage.onSetModified = hook;
+        }
+    }
     // --- Barra y teclado -------------------------------------------------------------
+    isCollapsed(path) {
+        return this.collapsed().has(path);
+    }
+    toggleOutline(path) {
+        this.collapsed.update((set) => {
+            const next = new Set(set);
+            if (next.has(path))
+                next.delete(path);
+            else
+                next.add(path);
+            return next;
+        });
+    }
+    openOutlineItem(item) {
+        if (item.dest)
+            void this.goToDestination(item.dest);
+        else if (item.url && this.externalLinks() && SAFE_URL.test(item.url))
+            globalThis.open?.(item.url, '_blank', 'noopener,noreferrer');
+    }
+    /** Acciones con nombre de los enlaces (NextPage, PrevPage, FirstPage, LastPage). */
+    namedAction(action) {
+        if (action === 'NextPage')
+            this.nextPage();
+        else if (action === 'PrevPage')
+            this.previousPage();
+        else if (action === 'FirstPage')
+            this.goToPage(1);
+        else if (action === 'LastPage')
+            this.goToPage(this.numPages());
+    }
+    onFormInput() {
+        this.formChange.emit();
+    }
     onPageInput(event) {
         const input = event.target;
         const value = Number.parseInt(input.value, 10);
@@ -995,6 +2188,11 @@ class CbPdfViewer {
         this.thumbEls()[next - 1]?.nativeElement.focus();
     }
     onHostKeydown(event) {
+        if (event.key === 'Escape' && this.tool() !== 'none') {
+            this.tool.set('none');
+            event.preventDefault();
+            return;
+        }
         if (this.state() !== 'ready' || !(event.ctrlKey || event.metaKey) || event.altKey)
             return;
         const key = event.key.toLowerCase();
@@ -1045,7 +2243,7 @@ class CbPdfViewer {
         return (size.rotate + this.rotation()) % 180 === 0 ? [size.width, size.height] : [size.height, size.width];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPdfViewer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPdfViewer, isStandalone: true, selector: "cb-pdf-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, withCredentials: { classPropertyName: "withCredentials", publicName: "withCredentials", isSignal: true, isRequired: false, transformFunction: null }, httpHeaders: { classPropertyName: "httpHeaders", publicName: "httpHeaders", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, showRotate: { classPropertyName: "showRotate", publicName: "showRotate", isSignal: true, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: true, isRequired: false, transformFunction: null }, printable: { classPropertyName: "printable", publicName: "printable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", zoom: "zoomChange", rotation: "rotationChange", sidebar: "sidebarChange", loaded: "loaded", loadError: "loadError" }, host: { attributes: { "role": "region" }, listeners: { "keydown": "onHostKeydown($event)" }, properties: { "attr.aria-label": "ariaLabel() || t().pdfViewer" }, classAttribute: "cb-pdf-viewer" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "pageEls", predicate: ["pageEl"], descendants: true, isSignal: true }, { propertyName: "thumbEls", predicate: ["thumbEl"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbPdfViewer, isStandalone: true, selector: "cb-pdf-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, withCredentials: { classPropertyName: "withCredentials", publicName: "withCredentials", isSignal: true, isRequired: false, transformFunction: null }, httpHeaders: { classPropertyName: "httpHeaders", publicName: "httpHeaders", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, showRotate: { classPropertyName: "showRotate", publicName: "showRotate", isSignal: true, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: true, isRequired: false, transformFunction: null }, printable: { classPropertyName: "printable", publicName: "printable", isSignal: true, isRequired: false, transformFunction: null }, showOutline: { classPropertyName: "showOutline", publicName: "showOutline", isSignal: true, isRequired: false, transformFunction: null }, forms: { classPropertyName: "forms", publicName: "forms", isSignal: true, isRequired: false, transformFunction: null }, externalLinks: { classPropertyName: "externalLinks", publicName: "externalLinks", isSignal: true, isRequired: false, transformFunction: null }, sidebarView: { classPropertyName: "sidebarView", publicName: "sidebarView", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, annotatable: { classPropertyName: "annotatable", publicName: "annotatable", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, tool: { classPropertyName: "tool", publicName: "tool", isSignal: true, isRequired: false, transformFunction: null }, annotationColor: { classPropertyName: "annotationColor", publicName: "annotationColor", isSignal: true, isRequired: false, transformFunction: null }, author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", zoom: "zoomChange", rotation: "rotationChange", sidebar: "sidebarChange", sidebarView: "sidebarViewChange", annotations: "annotationsChange", tool: "toolChange", annotationColor: "annotationColorChange", loaded: "loaded", loadError: "loadError", formChange: "formChange", annotationAdd: "annotationAdd", annotationRemove: "annotationRemove" }, host: { attributes: { "role": "region" }, listeners: { "keydown": "onHostKeydown($event)" }, properties: { "attr.aria-label": "ariaLabel() || t().pdfViewer" }, classAttribute: "cb-pdf-viewer" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "pageEls", predicate: ["pageEl"], descendants: true, isSignal: true }, { propertyName: "thumbEls", predicate: ["thumbEl"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true, isSignal: true }, { propertyName: "cardText", first: true, predicate: ["cardText"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (showToolbar()) {
       <div class="cb-pdf__toolbar">
         @if (showThumbnails()) {
@@ -1128,6 +2326,70 @@ class CbPdfViewer {
           }
         </div>
 
+        @if (annotatable()) {
+          <div class="cb-pdf__group" role="group" [attr.aria-label]="t().pdfAnnotate">
+            <!-- mousedown sin default: pulsar la herramienta no quita la selección de texto. -->
+            <button
+              type="button"
+              class="cb-pdf__tool"
+              [attr.aria-label]="t().pdfHighlight"
+              [attr.aria-pressed]="tool() === 'highlight'"
+              [attr.title]="t().pdfHighlight"
+              [disabled]="state() !== 'ready'"
+              (mousedown)="$event.preventDefault()"
+              (click)="onHighlightTool()"
+            >
+              <cb-icon name="highlighter" [size]="18" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="cb-pdf__tool"
+              [attr.aria-label]="t().pdfNote"
+              [attr.aria-pressed]="tool() === 'note'"
+              [attr.title]="t().pdfNote"
+              [disabled]="state() !== 'ready'"
+              (click)="onNoteTool($event)"
+            >
+              <cb-icon name="sticky-note" [size]="18" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="cb-pdf__tool"
+              [attr.aria-label]="t().pdfDraw"
+              [attr.aria-pressed]="tool() === 'ink'"
+              [attr.title]="t().pdfDraw"
+              [disabled]="state() !== 'ready'"
+              (click)="toggleTool('ink')"
+            >
+              <cb-icon name="pen-line" [size]="18" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="cb-pdf__tool"
+              aria-haspopup="dialog"
+              [attr.aria-label]="t().pdfSign"
+              [attr.title]="t().pdfSign"
+              [disabled]="state() !== 'ready'"
+              (click)="openSignature()"
+            >
+              <cb-icon name="signature" [size]="18" aria-hidden="true" />
+            </button>
+            <span class="cb-pdf__color">
+              <span class="cb-pdf__swatch" aria-hidden="true" [style.background]="colors[annotationColor()].light" [style.border-color]="colors[annotationColor()].dark"></span>
+              <select
+                class="cb-pdf__field cb-pdf__color-select"
+                [attr.aria-label]="t().pdfColor"
+                [disabled]="state() !== 'ready'"
+                (change)="annotationColor.set($any($event.target).value)"
+              >
+                @for (c of colorNames; track c) {
+                  <option [value]="c" [selected]="annotationColor() === c">{{ colorLabel(c) }}</option>
+                }
+              </select>
+            </span>
+          </div>
+        }
+
         <span class="cb-pdf__spacer"></span>
 
         @if (showSearch()) {
@@ -1158,7 +2420,14 @@ class CbPdfViewer {
         @if (downloadable() || printable()) {
           <div class="cb-pdf__group">
             @if (downloadable()) {
-              <button type="button" class="cb-pdf__tool" [attr.aria-label]="t().download" [disabled]="state() !== 'ready'" (click)="download()">
+              <button
+                type="button"
+                class="cb-pdf__tool"
+                [attr.aria-label]="annotations().length ? t().pdfDownloadAnnotated : formModified() ? t().pdfDownloadFilled : t().download"
+                [attr.title]="annotations().length ? t().pdfDownloadAnnotated : formModified() ? t().pdfDownloadFilled : null"
+                [disabled]="state() !== 'ready'"
+                (click)="download()"
+              >
                 <cb-icon name="download" [size]="18" aria-hidden="true" />
               </button>
             }
@@ -1180,7 +2449,51 @@ class CbPdfViewer {
 
     <div class="cb-pdf__body">
       @if (state() === 'ready' && sidebar() && showThumbnails()) {
-        <nav class="cb-pdf__sidebar" [id]="uid + '-thumbs'" [attr.aria-label]="t().thumbnails">
+        <div
+          class="cb-pdf__sidebar"
+          [class.cb-pdf__sidebar--tabs]="sidebarTabs().length > 1"
+          [class.cb-pdf__sidebar--outline]="activeView() !== 'thumbnails' || sidebarTabs().length > 2"
+          [id]="uid + '-thumbs'"
+        >
+          @if (sidebarTabs().length > 1) {
+            <div class="cb-pdf__views" role="group" [attr.aria-label]="t().pdfSidebarView">
+              @for (view of sidebarTabs(); track view) {
+                <button type="button" class="cb-pdf__view" [attr.aria-pressed]="activeView() === view" (click)="sidebarView.set(view)">
+                  {{ view === 'outline' ? t().pdfOutline : view === 'annotations' ? t().pdfAnnotations : t().thumbnails }}
+                </button>
+              }
+            </div>
+          }
+          @if (activeView() === 'outline') {
+            <nav class="cb-pdf__outline" [attr.aria-label]="t().pdfOutline">
+              <ng-container *ngTemplateOutlet="outlineList; context: { $implicit: outline(), path: '' }" />
+            </nav>
+          } @else if (activeView() === 'annotations') {
+            <section class="cb-pdf__notes-panel" [attr.aria-label]="t().pdfAnnotations">
+              @if (!sortedAnnotations().length) {
+                <p class="cb-pdf__notes-empty">{{ t().pdfNoAnnotations }}</p>
+              } @else {
+                <ul class="cb-pdf__notes-list">
+                  @for (a of sortedAnnotations(); track a.id) {
+                    <li class="cb-pdf__notes-item">
+                      <button type="button" class="cb-pdf__notes-link" (click)="revealAnnotation(a)">
+                        <span class="cb-pdf__notes-swatch" aria-hidden="true" [style.background]="swatchOf(a)"></span>
+                        <span class="cb-pdf__notes-text">
+                          <!-- La coma oculta separa la página del texto en el nombre del botón. -->
+                          <span class="cb-pdf__notes-page">{{ format(t().pageOf, a.page, numPages()) }}<span class="cb-pdf__sr">, </span></span>
+                          <span class="cb-pdf__notes-label">{{ labelOf(a) }}</span>
+                        </span>
+                      </button>
+                      <button type="button" class="cb-pdf__notes-remove" [attr.aria-label]="t().pdfDeleteAnnotation + ': ' + labelOf(a)" (click)="removeAnnotation(a)">
+                        <cb-icon name="trash" [size]="14" aria-hidden="true" />
+                      </button>
+                    </li>
+                  }
+                </ul>
+              }
+            </section>
+          } @else {
+          <nav class="cb-pdf__thumbs" [attr.aria-label]="t().thumbnails">
           @for (thumb of thumbBoxes(); track $index; let i = $index) {
             <button
               #thumbEl
@@ -1197,7 +2510,9 @@ class CbPdfViewer {
               <span class="cb-pdf__thumb-label" aria-hidden="true">{{ i + 1 }}</span>
             </button>
           }
-        </nav>
+          </nav>
+          }
+        </div>
       }
 
       <div
@@ -1243,7 +2558,10 @@ class CbPdfViewer {
             </form>
           }
           @case ('ready') {
-            <div class="cb-pdf__pages">
+            @if (toolHint(); as hint) {
+              <div class="cb-pdf__hint">{{ hint }}</div>
+            }
+            <div class="cb-pdf__pages" (pointerup)="onPagesPointerUp()">
               @for (box of pageBoxes(); track $index; let i = $index) {
                 <div
                   #pageEl
@@ -1258,6 +2576,97 @@ class CbPdfViewer {
                 >
                   <div class="cb-pdf__canvas"></div>
                   <div class="cb-pdf__text"></div>
+                  <div class="cb-pdf__annotations" (input)="onFormInput()" (change)="onFormInput()"></div>
+                  @if (annotatable() || marks()[i]?.length) {
+                    <div
+                      class="cb-pdf__marks"
+                      [class.cb-pdf__marks--capture]="annotatable() && (tool() === 'ink' || tool() === 'note')"
+                      [class.cb-pdf__marks--ink]="tool() === 'ink'"
+                      [class.cb-pdf__marks--pass]="tool() === 'highlight'"
+                      (pointerdown)="onMarksPointerDown($event, i + 1)"
+                    >
+                      @for (m of marks()[i]; track m.a.id) {
+                        <div
+                          class="cb-pdf__mark"
+                          [class]="'cb-pdf__mark cb-pdf__mark--' + m.a.type"
+                          [class.cb-is-selected]="selectedId() === m.a.id"
+                          [attr.data-id]="m.a.id"
+                          [attr.tabindex]="annotatable() ? 0 : null"
+                          [attr.role]="annotatable() ? 'button' : 'img'"
+                          [attr.aria-label]="m.label"
+                          [attr.aria-describedby]="annotatable() ? uid + '-mark-hint' : null"
+                          [attr.aria-expanded]="annotatable() && (m.a.type === 'note' || m.a.type === 'highlight') ? editingId() === m.a.id : null"
+                          [style.left.px]="m.box.left"
+                          [style.top.px]="m.box.top"
+                          [style.width.px]="m.a.type === 'note' ? null : m.box.width"
+                          [style.height.px]="m.a.type === 'note' ? null : m.box.height"
+                          [style.--cb-pdf-mark-light]="m.light"
+                          [style.--cb-pdf-mark-dark]="m.dark"
+                          (pointerdown)="onMarkPointerDown($event, m.a)"
+                          (keydown)="onMarkKeydown($event, m.a)"
+                          (focus)="select(m.a.id)"
+                        >
+                          @switch (m.a.type) {
+                            @case ('highlight') {
+                              @for (r of m.rects; track $index) {
+                                <span class="cb-pdf__hl-rect" [style.left.px]="r.left" [style.top.px]="r.top" [style.width.px]="r.width" [style.height.px]="r.height"></span>
+                              }
+                              @if (m.a.comment) {
+                                <span class="cb-pdf__hl-badge" aria-hidden="true"></span>
+                              }
+                            }
+                            @case ('note') {
+                              <span class="cb-pdf__note-text" [style.font-size.px]="m.fontPx" [style.min-width.px]="m.box.width">{{ m.a.text || ' ' }}</span>
+                            }
+                            @case ('ink') {
+                              <svg class="cb-pdf__ink" [attr.viewBox]="'0 0 ' + m.box.width + ' ' + m.box.height" aria-hidden="true">
+                                <path [attr.d]="m.d" [attr.stroke-width]="m.strokePx" />
+                              </svg>
+                            }
+                            @case ('signature') {
+                              <img class="cb-pdf__sig" [src]="m.a.image" alt="" draggable="false" />
+                              @if (annotatable() && selectedId() === m.a.id) {
+                                <span class="cb-pdf__resize" aria-hidden="true" (pointerdown)="onResizePointerDown($event, m.a)"></span>
+                              }
+                            }
+                          }
+                        </div>
+                      }
+                      @if (stroke(); as s) {
+                        @if (s.page === i + 1) {
+                          <svg class="cb-pdf__stroke" aria-hidden="true" [style.--cb-pdf-mark-dark]="colors[annotationColor()].dark">
+                            <polyline [attr.points]="s.points.join(' ')" [attr.stroke-width]="2 * box.scaleFactor" />
+                          </svg>
+                        }
+                      }
+                      @if (editingMark(); as e) {
+                        @if (e.a.page === i + 1) {
+                          <div
+                            class="cb-pdf__card"
+                            role="group"
+                            [attr.aria-label]="e.label"
+                            [style.left.px]="cardLeft(e, box.width)"
+                            [style.top.px]="e.box.top + (e.a.type === 'note' ? noteHeight(e) : e.box.height) + 6"
+                            (pointerdown)="$event.stopPropagation()"
+                            (keydown)="onCardKeydown($event)"
+                          >
+                            <label class="cb-pdf__card-label" [for]="uid + '-card'">{{ e.a.type === 'note' ? t().pdfNoteText : t().pdfComment }}</label>
+                            <textarea
+                              #cardText
+                              class="cb-pdf__field cb-pdf__card-text"
+                              rows="3"
+                              [id]="uid + '-card'"
+                              (input)="onCardInput($any($event.target).value)"
+                            ></textarea>
+                            <div class="cb-pdf__card-actions">
+                              <button type="button" class="cb-pdf__card-btn" (click)="removeAnnotation(e.a)">{{ t().pdfDeleteAnnotation }}</button>
+                              <button type="button" class="cb-pdf__card-btn cb-pdf__card-btn--primary" (click)="closeEditor(true)">{{ t().pdfDone }}</button>
+                            </div>
+                          </div>
+                        }
+                      }
+                    </div>
+                  }
                 </div>
               }
             </div>
@@ -1266,14 +2675,60 @@ class CbPdfViewer {
       </div>
     </div>
 
+    @if (annotatable()) {
+      <span class="cb-pdf__sr" [id]="uid + '-mark-hint'">{{ t().pdfAnnotationHint }}</span>
+      <span class="cb-pdf__sr" aria-live="polite">{{ announcement() }}</span>
+      <cb-dialog [(visible)]="signing" [header]="t().pdfSignTitle" width="34rem" (onHide)="onSignatureHide()">
+        <cb-signature-pad [(value)]="signatureValue" background="transparent" [ariaLabel]="t().pdfSignTitle" />
+        <div cb-dialog-footer class="cb-pdf__sign-actions">
+          <button type="button" class="cb-pdf__card-btn" (click)="signing.set(false)">{{ t().pdfCancel }}</button>
+          <button type="button" class="cb-pdf__card-btn cb-pdf__card-btn--primary" [disabled]="!signatureValue()" (click)="insertSignature()">
+            {{ t().pdfInsertSignature }}
+          </button>
+        </div>
+      </cb-dialog>
+    }
+
+    <ng-template #outlineList let-items let-path="path">
+      <ul class="cb-pdf__outline-list" [attr.role]="path ? 'group' : null">
+        @for (item of items; track $index; let i = $index) {
+          <li class="cb-pdf__outline-item">
+            @if (item.items.length) {
+              <button
+                type="button"
+                class="cb-pdf__outline-toggle"
+                [attr.aria-expanded]="!isCollapsed(path + i)"
+                [attr.aria-label]="format(isCollapsed(path + i) ? t().pdfExpandItem : t().pdfCollapseItem, item.title)"
+                (click)="toggleOutline(path + i)"
+              >
+                <cb-icon [name]="isCollapsed(path + i) ? 'chevron-right' : 'chevron-down'" [size]="14" aria-hidden="true" />
+              </button>
+            }
+            <button
+              type="button"
+              class="cb-pdf__outline-link"
+              [class.cb-pdf__outline-link--bold]="item.bold"
+              [class.cb-pdf__outline-link--italic]="item.italic"
+              (click)="openOutlineItem(item)"
+            >
+              {{ item.title }}
+            </button>
+            @if (item.items.length && !isCollapsed(path + i)) {
+              <ng-container *ngTemplateOutlet="outlineList; context: { $implicit: item.items, path: path + i + '.' }" />
+            }
+          </li>
+        }
+      </ul>
+    </ng-template>
+
     @if (printProgress(); as p) {
       <div class="cb-pdf__toast" role="status">{{ format(t().preparingPrint, p.done, p.total) }}</div>
     }
-  `, isInline: true, styles: [":host{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:var(--cb-pdf-viewer-height, 40rem);min-height:16rem;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);container-type:inline-size}.cb-pdf__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width, 1px) solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-pdf__group{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-pdf__spacer{flex:1}.cb-pdf__tool{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-pdf__tool:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-pdf__tool[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-primary-600)}.cb-pdf__tool:disabled{opacity:var(--cb-opacity-disabled, .5);cursor:default}.cb-pdf__tool:focus-visible,.cb-pdf__field:focus-visible,.cb-pdf__thumb:focus-visible,.cb-pdf__submit:focus-visible,.cb-pdf__viewport:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-pdf__field{height:2.25rem;padding:0 var(--cb-space-2);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit}.cb-pdf__field:disabled{opacity:var(--cb-opacity-disabled, .5)}.cb-pdf__page-input{width:3.25rem;text-align:center}.cb-pdf__total{min-width:2.5rem;color:var(--cb-color-text-muted);white-space:nowrap}.cb-pdf__zoom{width:9.5rem}.cb-pdf__search{position:relative}.cb-pdf__search-icon{position:absolute;left:.625rem;color:var(--cb-color-text-muted);pointer-events:none}.cb-pdf__search-input{width:14rem;padding-left:2rem}.cb-pdf__status{min-width:4.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-align:center;white-space:nowrap}@container (max-width: 40rem){.cb-pdf__zoom,.cb-pdf__status{display:none}.cb-pdf__search-input{width:9rem}}.cb-pdf__body{display:flex;flex:1;min-height:0}.cb-pdf__sidebar{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-3);flex:none;width:10rem;padding:var(--cb-space-3) 0;overflow-y:auto;border-right:var(--cb-border-width, 1px) solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-pdf__thumb{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-1);padding:var(--cb-space-1);border:2px solid transparent;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs);cursor:pointer}.cb-pdf__thumb:hover{background:var(--cb-color-surface-hover)}.cb-pdf__thumb.cb-is-active{border-color:var(--cb-color-primary-500);color:var(--cb-color-text-strong);font-weight:var(--cb-font-weight-semibold)}.cb-pdf__thumb-canvas{display:block;background:#fff;box-shadow:0 1px 3px #0f172a33}:host ::ng-deep .cb-pdf__thumb-canvas canvas{display:block;width:100%;height:100%}.cb-pdf__viewport{position:relative;flex:1;min-width:0;overflow:auto;background:var(--cb-color-surface-subtle)}.cb-pdf__pages{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;width:max-content;min-width:100%;box-sizing:border-box}.cb-pdf__page{--user-unit: 1;--total-scale-factor: calc(var(--scale-factor) * var(--user-unit));--scale-round-x: 1px;--scale-round-y: 1px;position:relative;flex:none;background:#fff;box-shadow:0 1px 3px #0f172a2e,0 4px 12px #0f172a14;direction:ltr}.cb-pdf__canvas,:host ::ng-deep .cb-pdf__canvas canvas{position:absolute;inset:0;width:100%;height:100%}.cb-pdf__text{position:absolute;inset:0;overflow:clip;opacity:1;line-height:1;text-align:initial;letter-spacing:normal;word-spacing:normal;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:0;--min-font-size: 1;--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv: calc(1 / var(--min-font-size))}.cb-pdf__text[data-main-rotation=\"90\"]{transform:rotate(90deg) translateY(-100%)}.cb-pdf__text[data-main-rotation=\"180\"]{transform:rotate(180deg) translate(-100%,-100%)}.cb-pdf__text[data-main-rotation=\"270\"]{transform:rotate(270deg) translate(-100%)}:host ::ng-deep .cb-pdf__text :is(span,br){position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%;-webkit-user-select:text;user-select:text}:host ::ng-deep .cb-pdf__text>:not(.markedContent),:host ::ng-deep .cb-pdf__text .markedContent span:not(.markedContent){--font-height: 0;--scale-x: 1;--rotate: 0deg;z-index:1;font-size:calc(var(--text-scale-factor) * var(--font-height));transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}:host ::ng-deep .cb-pdf__text .markedContent{display:contents}:host ::ng-deep .cb-pdf__text span[role=img]{-webkit-user-select:none;user-select:none;cursor:default}:host ::ng-deep .cb-pdf__text ::selection{background:color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent);color:transparent}:host ::ng-deep .cb-pdf__text .cb-pdf__hl{position:relative;margin:-1px;padding:1px;border-radius:3px;background:#facc1573;font-size:inherit;transform:none}:host ::ng-deep .cb-pdf__text .cb-pdf__hl.cb-is-selected{background:#f973168c;outline:2px solid rgb(234 88 12)}@media(forced-colors:active){:host ::ng-deep .cb-pdf__text .cb-pdf__hl{background:transparent;outline:1px solid Highlight}:host ::ng-deep .cb-pdf__text .cb-pdf__hl.cb-is-selected{outline:3px solid Highlight}}.cb-pdf__message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cb-space-3);height:100%;padding:var(--cb-space-6);color:var(--cb-color-text-muted);text-align:center}.cb-pdf__message--error{color:var(--cb-color-danger)}.cb-pdf__password{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2);max-width:24rem;margin:var(--cb-space-6) auto;padding:var(--cb-space-6);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);text-align:center}.cb-pdf__password-text{margin:0}.cb-pdf__password-label{align-self:flex-start;font-weight:var(--cb-font-weight-medium)}.cb-pdf__password-row{display:flex;gap:var(--cb-space-2);width:100%}.cb-pdf__password-row .cb-pdf__field{flex:1;min-width:0}.cb-pdf__password-error{margin:0;color:var(--cb-color-danger)}.cb-pdf__submit{height:2.25rem;padding:0 var(--cb-space-4);border:none;border-radius:var(--cb-radius-md);background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font:inherit;font-weight:var(--cb-font-weight-semibold);cursor:pointer}.cb-pdf__submit:hover{background:var(--cb-color-primary-600)}.cb-pdf__toast{position:absolute;left:50%;bottom:var(--cb-space-4);transform:translate(-50%);padding:var(--cb-space-2) var(--cb-space-4);border-radius:var(--cb-radius-full);background:var(--cb-color-surface-950);color:#fff;box-shadow:var(--cb-shadow-md)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbSpinner, selector: "cb-spinner", inputs: ["size", "strokeWidth", "severity", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:var(--cb-pdf-viewer-height, 40rem);min-height:16rem;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);container-type:inline-size}.cb-pdf__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width, 1px) solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-pdf__group{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-pdf__spacer{flex:1}.cb-pdf__tool{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-pdf__tool:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-pdf__tool[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-primary-text)}.cb-pdf__tool:disabled{opacity:var(--cb-opacity-disabled, .5);cursor:default}.cb-pdf__tool:focus-visible,.cb-pdf__field:focus-visible,.cb-pdf__thumb:focus-visible,.cb-pdf__submit:focus-visible,.cb-pdf__viewport:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-pdf__field{height:2.25rem;padding:0 var(--cb-space-2);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit}.cb-pdf__field:disabled{opacity:var(--cb-opacity-disabled, .5)}.cb-pdf__page-input{width:3.25rem;text-align:center}.cb-pdf__total{min-width:2.5rem;color:var(--cb-color-text-muted);white-space:nowrap}.cb-pdf__zoom{width:9.5rem}.cb-pdf__search{position:relative}.cb-pdf__search-icon{position:absolute;left:.625rem;color:var(--cb-color-text-muted);pointer-events:none}.cb-pdf__search-input{width:14rem;padding-left:2rem}.cb-pdf__status{min-width:4.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-align:center;white-space:nowrap}@container (max-width: 40rem){.cb-pdf__zoom,.cb-pdf__status{display:none}.cb-pdf__search-input{width:9rem}}.cb-pdf__body{display:flex;flex:1;min-height:0}.cb-pdf__sidebar{display:flex;flex-direction:column;gap:var(--cb-space-3);flex:none;width:10rem;padding:var(--cb-space-3) 0;overflow-y:auto;border-right:var(--cb-border-width, 1px) solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-pdf__sidebar--tabs{width:12rem}.cb-pdf__sidebar--outline{width:16rem}.cb-pdf__thumbs{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-3)}.cb-pdf__views{display:flex;gap:2px;margin:0 var(--cb-space-2);padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-hover)}.cb-pdf__view{flex:1;min-width:0;padding:.25rem .375rem;border:0;border-radius:calc(var(--cb-radius-md) - 2px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.cb-pdf__view[aria-pressed=true]{background:var(--cb-color-surface-raised);color:var(--cb-color-text-strong);box-shadow:0 1px 2px #0f172a1f}.cb-pdf__view:focus-visible,.cb-pdf__outline-link:focus-visible,.cb-pdf__outline-toggle:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-pdf__outline{padding:0 var(--cb-space-2)}.cb-pdf__outline-list{margin:0;padding:0;list-style:none}.cb-pdf__outline-list .cb-pdf__outline-list{padding-left:1rem}.cb-pdf__outline-item{display:flex;flex-wrap:wrap;align-items:flex-start}.cb-pdf__outline-item>.cb-pdf__outline-list{flex-basis:100%}.cb-pdf__outline-toggle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.5rem;height:1.75rem;padding:0;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-pdf__outline-link{flex:1;min-width:0;padding:.3rem .375rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);line-height:1.3;text-align:start;cursor:pointer}.cb-pdf__outline-item>.cb-pdf__outline-link:first-child{margin-left:1.5rem}.cb-pdf__outline-link:hover,.cb-pdf__outline-toggle:hover{background:var(--cb-color-surface-hover)}.cb-pdf__outline-link--bold{font-weight:var(--cb-font-weight-semibold)}.cb-pdf__outline-link--italic{font-style:italic}.cb-pdf__thumb{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-1);padding:var(--cb-space-1);border:2px solid transparent;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs);cursor:pointer}.cb-pdf__thumb:hover{background:var(--cb-color-surface-hover)}.cb-pdf__thumb.cb-is-active{border-color:var(--cb-color-primary-500);color:var(--cb-color-text-strong);font-weight:var(--cb-font-weight-semibold)}.cb-pdf__thumb-canvas{display:block;background:#fff;box-shadow:0 1px 3px #0f172a33}:host ::ng-deep .cb-pdf__thumb-canvas canvas{display:block;width:100%;height:100%}.cb-pdf__viewport{position:relative;flex:1;min-width:0;overflow:auto;background:var(--cb-color-surface-subtle)}.cb-pdf__pages{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;width:max-content;min-width:100%;box-sizing:border-box}.cb-pdf__page{--user-unit: 1;--total-scale-factor: calc(var(--scale-factor) * var(--user-unit));--scale-round-x: 1px;--scale-round-y: 1px;position:relative;flex:none;background:#fff;box-shadow:0 1px 3px #0f172a2e,0 4px 12px #0f172a14;direction:ltr}.cb-pdf__canvas,:host ::ng-deep .cb-pdf__canvas canvas{position:absolute;inset:0;width:100%;height:100%}.cb-pdf__text{position:absolute;inset:0;overflow:clip;opacity:1;line-height:1;text-align:initial;letter-spacing:normal;word-spacing:normal;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:0;--min-font-size: 1;--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv: calc(1 / var(--min-font-size))}.cb-pdf__text[data-main-rotation=\"90\"]{transform:rotate(90deg) translateY(-100%)}.cb-pdf__text[data-main-rotation=\"180\"]{transform:rotate(180deg) translate(-100%,-100%)}.cb-pdf__text[data-main-rotation=\"270\"]{transform:rotate(270deg) translate(-100%)}.cb-pdf__annotations{position:absolute;inset:0;z-index:1;transform-origin:0 0;pointer-events:none}.cb-pdf__annotations[data-main-rotation=\"90\"]{transform:rotate(90deg) translateY(-100%)}.cb-pdf__annotations[data-main-rotation=\"180\"]{transform:rotate(180deg) translate(-100%,-100%)}.cb-pdf__annotations[data-main-rotation=\"270\"]{transform:rotate(270deg) translate(-100%)}:host ::ng-deep .cb-pdf__annotations section{position:absolute;box-sizing:border-box;text-align:initial;transform-origin:0 0;pointer-events:auto}:host ::ng-deep .cb-pdf__annotations [hidden]{display:none!important}:host ::ng-deep .cb-pdf__annotations .linkAnnotation>a{position:absolute;inset:0;border-radius:2px}:host ::ng-deep .cb-pdf__annotations .linkAnnotation>a:hover{background:#0e74901f}:host ::ng-deep .cb-pdf__annotations .linkAnnotation>a:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}:host ::ng-deep .cb-pdf__annotations :is(.textWidgetAnnotation,.choiceWidgetAnnotation) :is(input,textarea,select){width:100%;height:100%;box-sizing:border-box;margin:0;padding:0 calc(2px * var(--total-scale-factor));border:1px solid transparent;border-radius:0;background:#2563eb1a;color:#111827;font-family:Helvetica,Arial,sans-serif;font-size:calc(9px * var(--total-scale-factor));vertical-align:top}:host ::ng-deep .cb-pdf__annotations .textWidgetAnnotation textarea{padding-top:calc(2px * var(--total-scale-factor));resize:none}:host ::ng-deep .cb-pdf__annotations :is(.textWidgetAnnotation,.choiceWidgetAnnotation) :is(input,textarea,select):hover{border-color:#2563eb99}:host ::ng-deep .cb-pdf__annotations :is(input,textarea,select):focus{border-color:transparent;outline:2px solid var(--cb-color-focus-ring);outline-offset:0;background:#2563eb0a}:host ::ng-deep .cb-pdf__annotations :is(input,textarea,select):disabled{background:transparent}:host ::ng-deep .cb-pdf__annotations .buttonWidgetAnnotation :is(.checkBox,.radioButton) input{width:100%;height:100%;margin:0;accent-color:var(--cb-color-primary-600, #0e7490);cursor:pointer}:host ::ng-deep .cb-pdf__annotations .buttonWidgetAnnotation.checkBox input,:host ::ng-deep .cb-pdf__annotations .buttonWidgetAnnotation.radioButton input{width:100%;height:100%;margin:0;accent-color:var(--cb-color-primary-600, #0e7490);cursor:pointer}:host ::ng-deep .cb-pdf__text :is(span,br){position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%;-webkit-user-select:text;user-select:text}:host ::ng-deep .cb-pdf__text>:not(.markedContent),:host ::ng-deep .cb-pdf__text .markedContent span:not(.markedContent){--font-height: 0;--scale-x: 1;--rotate: 0deg;z-index:1;font-size:calc(var(--text-scale-factor) * var(--font-height));transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}:host ::ng-deep .cb-pdf__text .markedContent{display:contents}:host ::ng-deep .cb-pdf__text span[role=img]{-webkit-user-select:none;user-select:none;cursor:default}:host ::ng-deep .cb-pdf__text ::selection{background:color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent);color:transparent}:host ::ng-deep .cb-pdf__text .cb-pdf__hl{position:relative;margin:-1px;padding:1px;border-radius:3px;background:#facc1573;font-size:inherit;transform:none}:host ::ng-deep .cb-pdf__text .cb-pdf__hl.cb-is-selected{background:#f973168c;outline:2px solid rgb(234 88 12)}@media(forced-colors:active){:host ::ng-deep .cb-pdf__text .cb-pdf__hl{background:transparent;outline:1px solid Highlight}:host ::ng-deep .cb-pdf__text .cb-pdf__hl.cb-is-selected{outline:3px solid Highlight}}.cb-pdf__message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cb-space-3);height:100%;padding:var(--cb-space-6);color:var(--cb-color-text-muted);text-align:center}.cb-pdf__message--error{color:var(--cb-color-danger)}.cb-pdf__password{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2);max-width:24rem;margin:var(--cb-space-6) auto;padding:var(--cb-space-6);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);text-align:center}.cb-pdf__password-text{margin:0}.cb-pdf__password-label{align-self:flex-start;font-weight:var(--cb-font-weight-medium)}.cb-pdf__password-row{display:flex;gap:var(--cb-space-2);width:100%}.cb-pdf__password-row .cb-pdf__field{flex:1;min-width:0}.cb-pdf__password-error{margin:0;color:var(--cb-color-danger)}.cb-pdf__submit{height:2.25rem;padding:0 var(--cb-space-4);border:none;border-radius:var(--cb-radius-md);background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font:inherit;font-weight:var(--cb-font-weight-semibold);cursor:pointer}.cb-pdf__submit:hover{background:var(--cb-color-primary-600)}.cb-pdf__toast{position:absolute;left:50%;bottom:var(--cb-space-4);transform:translate(-50%);padding:var(--cb-space-2) var(--cb-space-4);border-radius:var(--cb-radius-full);background:var(--cb-color-surface-950);color:#fff;box-shadow:var(--cb-shadow-md)}.cb-pdf__tool[aria-pressed=true]{background:color-mix(in srgb,var(--cb-color-primary-500) 16%,transparent);color:var(--cb-color-primary-700)}:host-context([data-theme=\"dark\"]) .cb-pdf__tool[aria-pressed=true]{color:var(--cb-color-primary-300)}.cb-pdf__color{position:relative;display:inline-flex;align-items:center}.cb-pdf__swatch{position:absolute;left:.625rem;width:.875rem;height:.875rem;border:2px solid;border-radius:var(--cb-radius-full);pointer-events:none}.cb-pdf__color-select{padding-left:1.875rem}.cb-pdf__hint{position:sticky;top:var(--cb-space-2);z-index:4;box-sizing:border-box;width:max-content;max-width:calc(100% - 2rem);height:2rem;margin:var(--cb-space-2) auto calc(-2rem - var(--cb-space-2));padding:0 var(--cb-space-3);overflow:hidden;border-radius:var(--cb-radius-full);background:var(--cb-color-surface-950, #0f172a);color:#fff;font-size:var(--cb-text-xs);line-height:2rem;text-overflow:ellipsis;white-space:nowrap;box-shadow:var(--cb-shadow-md)}.cb-pdf__marks{position:absolute;inset:0;z-index:2;pointer-events:none}.cb-pdf__marks--capture{pointer-events:auto;cursor:cell;touch-action:none}.cb-pdf__marks--ink{cursor:crosshair}.cb-pdf__mark{position:absolute;box-sizing:border-box;pointer-events:auto;border-radius:2px;outline-offset:2px;touch-action:none}.cb-pdf__mark:focus-visible,.cb-pdf__mark.cb-is-selected{outline:2px solid var(--cb-color-focus-ring)}.cb-pdf__marks--pass .cb-pdf__mark--highlight{pointer-events:none}.cb-pdf__mark--highlight{cursor:pointer}.cb-pdf__hl-rect{position:absolute;background:color-mix(in srgb,var(--cb-pdf-mark-light) 55%,transparent)}.cb-pdf__hl-badge{position:absolute;top:-.35rem;right:-.35rem;width:.625rem;height:.625rem;border:2px solid #fff;border-radius:var(--cb-radius-full);background:var(--cb-pdf-mark-dark)}.cb-pdf__mark--note,.cb-pdf__mark--signature,.cb-pdf__mark--ink{cursor:move}.cb-pdf__note-text{display:block;box-sizing:border-box;padding:.1em .3em;border:1px dashed color-mix(in srgb,var(--cb-pdf-mark-dark) 45%,transparent);border-radius:2px;background:transparent;color:var(--cb-pdf-mark-dark);font-family:Helvetica,Arial,sans-serif;line-height:1.2;white-space:pre}.cb-pdf__ink,.cb-pdf__stroke{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.cb-pdf__ink path,.cb-pdf__stroke polyline{fill:none;stroke:var(--cb-pdf-mark-dark);stroke-linecap:round;stroke-linejoin:round}.cb-pdf__sig{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.cb-pdf__resize{position:absolute;right:-.4rem;bottom:-.4rem;width:.8rem;height:.8rem;border:2px solid #fff;border-radius:2px;background:var(--cb-color-focus-ring);cursor:nwse-resize}.cb-pdf__card{position:absolute;z-index:3;display:flex;flex-direction:column;gap:var(--cb-space-2);box-sizing:border-box;width:16rem;padding:var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));color:var(--cb-color-text);font-size:var(--cb-text-sm);box-shadow:var(--cb-shadow-lg);pointer-events:auto;cursor:auto}.cb-pdf__card-label{font-weight:var(--cb-font-weight-medium)}.cb-pdf__card-text{height:auto;min-height:4.5rem;padding:var(--cb-space-2);resize:vertical}.cb-pdf__card-actions,.cb-pdf__sign-actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2)}.cb-pdf__card-btn{height:2rem;padding:0 var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-pdf__card-btn:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-pdf__card-btn--primary{border-color:var(--cb-color-primary-500);background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font-weight:var(--cb-font-weight-semibold)}.cb-pdf__card-btn--primary:hover:not(:disabled){background:var(--cb-color-primary-600)}.cb-pdf__card-btn:disabled{opacity:var(--cb-opacity-disabled, .5);cursor:default}.cb-pdf__card-btn:focus-visible,.cb-pdf__card-text:focus-visible,.cb-pdf__notes-link:focus-visible,.cb-pdf__notes-remove:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-pdf__notes-panel{padding:0 var(--cb-space-2)}.cb-pdf__notes-empty{margin:0;padding:var(--cb-space-2);color:var(--cb-color-text-muted)}.cb-pdf__notes-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}.cb-pdf__notes-item{display:flex;align-items:flex-start;gap:2px}.cb-pdf__notes-link{display:flex;flex:1;align-items:flex-start;gap:var(--cb-space-2);min-width:0;padding:var(--cb-space-2);border:0;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);font:inherit;text-align:left;cursor:pointer}.cb-pdf__notes-link:hover,.cb-pdf__notes-remove:hover{background:var(--cb-color-surface-hover)}.cb-pdf__notes-swatch{flex:none;width:.625rem;height:.625rem;margin-top:.3rem;border-radius:var(--cb-radius-full)}.cb-pdf__notes-text{display:flex;flex-direction:column;min-width:0}.cb-pdf__notes-page{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-pdf__notes-label{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow-wrap:anywhere}.cb-pdf__notes-remove{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-pdf__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(forced-colors:active){.cb-pdf__hl-rect{background:transparent;outline:2px solid Mark}.cb-pdf__note-text{border-color:CanvasText}}\n"], dependencies: [{ kind: "component", type: CbDialog, selector: "cb-dialog", inputs: ["visible", "header", "closable", "dismissableMask", "closeOnEscape", "width", "ariaLabel"], outputs: ["visibleChange", "onHide", "onShow"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbSignaturePad, selector: "cb-signature-pad", inputs: ["value", "format", "mode", "typing", "penColor", "background", "minWidth", "maxWidth", "height", "font", "placeholder", "disabled", "readonly", "invalid", "ariaLabel"], outputs: ["valueChange", "modeChange", "signStart", "signEnd", "cleared"] }, { kind: "component", type: CbSpinner, selector: "cb-spinner", inputs: ["size", "strokeWidth", "severity", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbPdfViewer, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-pdf-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon, CbSpinner], host: {
+            args: [{ selector: 'cb-pdf-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbDialog, CbIcon, CbSignaturePad, CbSpinner, NgTemplateOutlet], host: {
                         class: 'cb-pdf-viewer',
                         role: 'region',
                         '[attr.aria-label]': 'ariaLabel() || t().pdfViewer',
@@ -1361,6 +2816,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
           }
         </div>
 
+        @if (annotatable()) {
+          <div class="cb-pdf__group" role="group" [attr.aria-label]="t().pdfAnnotate">
+            <!-- mousedown sin default: pulsar la herramienta no quita la selección de texto. -->
+            <button
+              type="button"
+              class="cb-pdf__tool"
+              [attr.aria-label]="t().pdfHighlight"
+              [attr.aria-pressed]="tool() === 'highlight'"
+              [attr.title]="t().pdfHighlight"
+              [disabled]="state() !== 'ready'"
+              (mousedown)="$event.preventDefault()"
+              (click)="onHighlightTool()"
+            >
+              <cb-icon name="highlighter" [size]="18" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="cb-pdf__tool"
+              [attr.aria-label]="t().pdfNote"
+              [attr.aria-pressed]="tool() === 'note'"
+              [attr.title]="t().pdfNote"
+              [disabled]="state() !== 'ready'"
+              (click)="onNoteTool($event)"
+            >
+              <cb-icon name="sticky-note" [size]="18" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="cb-pdf__tool"
+              [attr.aria-label]="t().pdfDraw"
+              [attr.aria-pressed]="tool() === 'ink'"
+              [attr.title]="t().pdfDraw"
+              [disabled]="state() !== 'ready'"
+              (click)="toggleTool('ink')"
+            >
+              <cb-icon name="pen-line" [size]="18" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="cb-pdf__tool"
+              aria-haspopup="dialog"
+              [attr.aria-label]="t().pdfSign"
+              [attr.title]="t().pdfSign"
+              [disabled]="state() !== 'ready'"
+              (click)="openSignature()"
+            >
+              <cb-icon name="signature" [size]="18" aria-hidden="true" />
+            </button>
+            <span class="cb-pdf__color">
+              <span class="cb-pdf__swatch" aria-hidden="true" [style.background]="colors[annotationColor()].light" [style.border-color]="colors[annotationColor()].dark"></span>
+              <select
+                class="cb-pdf__field cb-pdf__color-select"
+                [attr.aria-label]="t().pdfColor"
+                [disabled]="state() !== 'ready'"
+                (change)="annotationColor.set($any($event.target).value)"
+              >
+                @for (c of colorNames; track c) {
+                  <option [value]="c" [selected]="annotationColor() === c">{{ colorLabel(c) }}</option>
+                }
+              </select>
+            </span>
+          </div>
+        }
+
         <span class="cb-pdf__spacer"></span>
 
         @if (showSearch()) {
@@ -1391,7 +2910,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         @if (downloadable() || printable()) {
           <div class="cb-pdf__group">
             @if (downloadable()) {
-              <button type="button" class="cb-pdf__tool" [attr.aria-label]="t().download" [disabled]="state() !== 'ready'" (click)="download()">
+              <button
+                type="button"
+                class="cb-pdf__tool"
+                [attr.aria-label]="annotations().length ? t().pdfDownloadAnnotated : formModified() ? t().pdfDownloadFilled : t().download"
+                [attr.title]="annotations().length ? t().pdfDownloadAnnotated : formModified() ? t().pdfDownloadFilled : null"
+                [disabled]="state() !== 'ready'"
+                (click)="download()"
+              >
                 <cb-icon name="download" [size]="18" aria-hidden="true" />
               </button>
             }
@@ -1413,7 +2939,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
     <div class="cb-pdf__body">
       @if (state() === 'ready' && sidebar() && showThumbnails()) {
-        <nav class="cb-pdf__sidebar" [id]="uid + '-thumbs'" [attr.aria-label]="t().thumbnails">
+        <div
+          class="cb-pdf__sidebar"
+          [class.cb-pdf__sidebar--tabs]="sidebarTabs().length > 1"
+          [class.cb-pdf__sidebar--outline]="activeView() !== 'thumbnails' || sidebarTabs().length > 2"
+          [id]="uid + '-thumbs'"
+        >
+          @if (sidebarTabs().length > 1) {
+            <div class="cb-pdf__views" role="group" [attr.aria-label]="t().pdfSidebarView">
+              @for (view of sidebarTabs(); track view) {
+                <button type="button" class="cb-pdf__view" [attr.aria-pressed]="activeView() === view" (click)="sidebarView.set(view)">
+                  {{ view === 'outline' ? t().pdfOutline : view === 'annotations' ? t().pdfAnnotations : t().thumbnails }}
+                </button>
+              }
+            </div>
+          }
+          @if (activeView() === 'outline') {
+            <nav class="cb-pdf__outline" [attr.aria-label]="t().pdfOutline">
+              <ng-container *ngTemplateOutlet="outlineList; context: { $implicit: outline(), path: '' }" />
+            </nav>
+          } @else if (activeView() === 'annotations') {
+            <section class="cb-pdf__notes-panel" [attr.aria-label]="t().pdfAnnotations">
+              @if (!sortedAnnotations().length) {
+                <p class="cb-pdf__notes-empty">{{ t().pdfNoAnnotations }}</p>
+              } @else {
+                <ul class="cb-pdf__notes-list">
+                  @for (a of sortedAnnotations(); track a.id) {
+                    <li class="cb-pdf__notes-item">
+                      <button type="button" class="cb-pdf__notes-link" (click)="revealAnnotation(a)">
+                        <span class="cb-pdf__notes-swatch" aria-hidden="true" [style.background]="swatchOf(a)"></span>
+                        <span class="cb-pdf__notes-text">
+                          <!-- La coma oculta separa la página del texto en el nombre del botón. -->
+                          <span class="cb-pdf__notes-page">{{ format(t().pageOf, a.page, numPages()) }}<span class="cb-pdf__sr">, </span></span>
+                          <span class="cb-pdf__notes-label">{{ labelOf(a) }}</span>
+                        </span>
+                      </button>
+                      <button type="button" class="cb-pdf__notes-remove" [attr.aria-label]="t().pdfDeleteAnnotation + ': ' + labelOf(a)" (click)="removeAnnotation(a)">
+                        <cb-icon name="trash" [size]="14" aria-hidden="true" />
+                      </button>
+                    </li>
+                  }
+                </ul>
+              }
+            </section>
+          } @else {
+          <nav class="cb-pdf__thumbs" [attr.aria-label]="t().thumbnails">
           @for (thumb of thumbBoxes(); track $index; let i = $index) {
             <button
               #thumbEl
@@ -1430,7 +3000,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               <span class="cb-pdf__thumb-label" aria-hidden="true">{{ i + 1 }}</span>
             </button>
           }
-        </nav>
+          </nav>
+          }
+        </div>
       }
 
       <div
@@ -1476,7 +3048,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             </form>
           }
           @case ('ready') {
-            <div class="cb-pdf__pages">
+            @if (toolHint(); as hint) {
+              <div class="cb-pdf__hint">{{ hint }}</div>
+            }
+            <div class="cb-pdf__pages" (pointerup)="onPagesPointerUp()">
               @for (box of pageBoxes(); track $index; let i = $index) {
                 <div
                   #pageEl
@@ -1491,6 +3066,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 >
                   <div class="cb-pdf__canvas"></div>
                   <div class="cb-pdf__text"></div>
+                  <div class="cb-pdf__annotations" (input)="onFormInput()" (change)="onFormInput()"></div>
+                  @if (annotatable() || marks()[i]?.length) {
+                    <div
+                      class="cb-pdf__marks"
+                      [class.cb-pdf__marks--capture]="annotatable() && (tool() === 'ink' || tool() === 'note')"
+                      [class.cb-pdf__marks--ink]="tool() === 'ink'"
+                      [class.cb-pdf__marks--pass]="tool() === 'highlight'"
+                      (pointerdown)="onMarksPointerDown($event, i + 1)"
+                    >
+                      @for (m of marks()[i]; track m.a.id) {
+                        <div
+                          class="cb-pdf__mark"
+                          [class]="'cb-pdf__mark cb-pdf__mark--' + m.a.type"
+                          [class.cb-is-selected]="selectedId() === m.a.id"
+                          [attr.data-id]="m.a.id"
+                          [attr.tabindex]="annotatable() ? 0 : null"
+                          [attr.role]="annotatable() ? 'button' : 'img'"
+                          [attr.aria-label]="m.label"
+                          [attr.aria-describedby]="annotatable() ? uid + '-mark-hint' : null"
+                          [attr.aria-expanded]="annotatable() && (m.a.type === 'note' || m.a.type === 'highlight') ? editingId() === m.a.id : null"
+                          [style.left.px]="m.box.left"
+                          [style.top.px]="m.box.top"
+                          [style.width.px]="m.a.type === 'note' ? null : m.box.width"
+                          [style.height.px]="m.a.type === 'note' ? null : m.box.height"
+                          [style.--cb-pdf-mark-light]="m.light"
+                          [style.--cb-pdf-mark-dark]="m.dark"
+                          (pointerdown)="onMarkPointerDown($event, m.a)"
+                          (keydown)="onMarkKeydown($event, m.a)"
+                          (focus)="select(m.a.id)"
+                        >
+                          @switch (m.a.type) {
+                            @case ('highlight') {
+                              @for (r of m.rects; track $index) {
+                                <span class="cb-pdf__hl-rect" [style.left.px]="r.left" [style.top.px]="r.top" [style.width.px]="r.width" [style.height.px]="r.height"></span>
+                              }
+                              @if (m.a.comment) {
+                                <span class="cb-pdf__hl-badge" aria-hidden="true"></span>
+                              }
+                            }
+                            @case ('note') {
+                              <span class="cb-pdf__note-text" [style.font-size.px]="m.fontPx" [style.min-width.px]="m.box.width">{{ m.a.text || ' ' }}</span>
+                            }
+                            @case ('ink') {
+                              <svg class="cb-pdf__ink" [attr.viewBox]="'0 0 ' + m.box.width + ' ' + m.box.height" aria-hidden="true">
+                                <path [attr.d]="m.d" [attr.stroke-width]="m.strokePx" />
+                              </svg>
+                            }
+                            @case ('signature') {
+                              <img class="cb-pdf__sig" [src]="m.a.image" alt="" draggable="false" />
+                              @if (annotatable() && selectedId() === m.a.id) {
+                                <span class="cb-pdf__resize" aria-hidden="true" (pointerdown)="onResizePointerDown($event, m.a)"></span>
+                              }
+                            }
+                          }
+                        </div>
+                      }
+                      @if (stroke(); as s) {
+                        @if (s.page === i + 1) {
+                          <svg class="cb-pdf__stroke" aria-hidden="true" [style.--cb-pdf-mark-dark]="colors[annotationColor()].dark">
+                            <polyline [attr.points]="s.points.join(' ')" [attr.stroke-width]="2 * box.scaleFactor" />
+                          </svg>
+                        }
+                      }
+                      @if (editingMark(); as e) {
+                        @if (e.a.page === i + 1) {
+                          <div
+                            class="cb-pdf__card"
+                            role="group"
+                            [attr.aria-label]="e.label"
+                            [style.left.px]="cardLeft(e, box.width)"
+                            [style.top.px]="e.box.top + (e.a.type === 'note' ? noteHeight(e) : e.box.height) + 6"
+                            (pointerdown)="$event.stopPropagation()"
+                            (keydown)="onCardKeydown($event)"
+                          >
+                            <label class="cb-pdf__card-label" [for]="uid + '-card'">{{ e.a.type === 'note' ? t().pdfNoteText : t().pdfComment }}</label>
+                            <textarea
+                              #cardText
+                              class="cb-pdf__field cb-pdf__card-text"
+                              rows="3"
+                              [id]="uid + '-card'"
+                              (input)="onCardInput($any($event.target).value)"
+                            ></textarea>
+                            <div class="cb-pdf__card-actions">
+                              <button type="button" class="cb-pdf__card-btn" (click)="removeAnnotation(e.a)">{{ t().pdfDeleteAnnotation }}</button>
+                              <button type="button" class="cb-pdf__card-btn cb-pdf__card-btn--primary" (click)="closeEditor(true)">{{ t().pdfDone }}</button>
+                            </div>
+                          </div>
+                        }
+                      }
+                    </div>
+                  }
                 </div>
               }
             </div>
@@ -1499,15 +3165,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       </div>
     </div>
 
+    @if (annotatable()) {
+      <span class="cb-pdf__sr" [id]="uid + '-mark-hint'">{{ t().pdfAnnotationHint }}</span>
+      <span class="cb-pdf__sr" aria-live="polite">{{ announcement() }}</span>
+      <cb-dialog [(visible)]="signing" [header]="t().pdfSignTitle" width="34rem" (onHide)="onSignatureHide()">
+        <cb-signature-pad [(value)]="signatureValue" background="transparent" [ariaLabel]="t().pdfSignTitle" />
+        <div cb-dialog-footer class="cb-pdf__sign-actions">
+          <button type="button" class="cb-pdf__card-btn" (click)="signing.set(false)">{{ t().pdfCancel }}</button>
+          <button type="button" class="cb-pdf__card-btn cb-pdf__card-btn--primary" [disabled]="!signatureValue()" (click)="insertSignature()">
+            {{ t().pdfInsertSignature }}
+          </button>
+        </div>
+      </cb-dialog>
+    }
+
+    <ng-template #outlineList let-items let-path="path">
+      <ul class="cb-pdf__outline-list" [attr.role]="path ? 'group' : null">
+        @for (item of items; track $index; let i = $index) {
+          <li class="cb-pdf__outline-item">
+            @if (item.items.length) {
+              <button
+                type="button"
+                class="cb-pdf__outline-toggle"
+                [attr.aria-expanded]="!isCollapsed(path + i)"
+                [attr.aria-label]="format(isCollapsed(path + i) ? t().pdfExpandItem : t().pdfCollapseItem, item.title)"
+                (click)="toggleOutline(path + i)"
+              >
+                <cb-icon [name]="isCollapsed(path + i) ? 'chevron-right' : 'chevron-down'" [size]="14" aria-hidden="true" />
+              </button>
+            }
+            <button
+              type="button"
+              class="cb-pdf__outline-link"
+              [class.cb-pdf__outline-link--bold]="item.bold"
+              [class.cb-pdf__outline-link--italic]="item.italic"
+              (click)="openOutlineItem(item)"
+            >
+              {{ item.title }}
+            </button>
+            @if (item.items.length && !isCollapsed(path + i)) {
+              <ng-container *ngTemplateOutlet="outlineList; context: { $implicit: item.items, path: path + i + '.' }" />
+            }
+          </li>
+        }
+      </ul>
+    </ng-template>
+
     @if (printProgress(); as p) {
       <div class="cb-pdf__toast" role="status">{{ format(t().preparingPrint, p.done, p.total) }}</div>
     }
-  `, styles: [":host{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:var(--cb-pdf-viewer-height, 40rem);min-height:16rem;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);container-type:inline-size}.cb-pdf__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width, 1px) solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-pdf__group{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-pdf__spacer{flex:1}.cb-pdf__tool{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-pdf__tool:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-pdf__tool[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-primary-600)}.cb-pdf__tool:disabled{opacity:var(--cb-opacity-disabled, .5);cursor:default}.cb-pdf__tool:focus-visible,.cb-pdf__field:focus-visible,.cb-pdf__thumb:focus-visible,.cb-pdf__submit:focus-visible,.cb-pdf__viewport:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-pdf__field{height:2.25rem;padding:0 var(--cb-space-2);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit}.cb-pdf__field:disabled{opacity:var(--cb-opacity-disabled, .5)}.cb-pdf__page-input{width:3.25rem;text-align:center}.cb-pdf__total{min-width:2.5rem;color:var(--cb-color-text-muted);white-space:nowrap}.cb-pdf__zoom{width:9.5rem}.cb-pdf__search{position:relative}.cb-pdf__search-icon{position:absolute;left:.625rem;color:var(--cb-color-text-muted);pointer-events:none}.cb-pdf__search-input{width:14rem;padding-left:2rem}.cb-pdf__status{min-width:4.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-align:center;white-space:nowrap}@container (max-width: 40rem){.cb-pdf__zoom,.cb-pdf__status{display:none}.cb-pdf__search-input{width:9rem}}.cb-pdf__body{display:flex;flex:1;min-height:0}.cb-pdf__sidebar{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-3);flex:none;width:10rem;padding:var(--cb-space-3) 0;overflow-y:auto;border-right:var(--cb-border-width, 1px) solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-pdf__thumb{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-1);padding:var(--cb-space-1);border:2px solid transparent;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs);cursor:pointer}.cb-pdf__thumb:hover{background:var(--cb-color-surface-hover)}.cb-pdf__thumb.cb-is-active{border-color:var(--cb-color-primary-500);color:var(--cb-color-text-strong);font-weight:var(--cb-font-weight-semibold)}.cb-pdf__thumb-canvas{display:block;background:#fff;box-shadow:0 1px 3px #0f172a33}:host ::ng-deep .cb-pdf__thumb-canvas canvas{display:block;width:100%;height:100%}.cb-pdf__viewport{position:relative;flex:1;min-width:0;overflow:auto;background:var(--cb-color-surface-subtle)}.cb-pdf__pages{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;width:max-content;min-width:100%;box-sizing:border-box}.cb-pdf__page{--user-unit: 1;--total-scale-factor: calc(var(--scale-factor) * var(--user-unit));--scale-round-x: 1px;--scale-round-y: 1px;position:relative;flex:none;background:#fff;box-shadow:0 1px 3px #0f172a2e,0 4px 12px #0f172a14;direction:ltr}.cb-pdf__canvas,:host ::ng-deep .cb-pdf__canvas canvas{position:absolute;inset:0;width:100%;height:100%}.cb-pdf__text{position:absolute;inset:0;overflow:clip;opacity:1;line-height:1;text-align:initial;letter-spacing:normal;word-spacing:normal;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:0;--min-font-size: 1;--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv: calc(1 / var(--min-font-size))}.cb-pdf__text[data-main-rotation=\"90\"]{transform:rotate(90deg) translateY(-100%)}.cb-pdf__text[data-main-rotation=\"180\"]{transform:rotate(180deg) translate(-100%,-100%)}.cb-pdf__text[data-main-rotation=\"270\"]{transform:rotate(270deg) translate(-100%)}:host ::ng-deep .cb-pdf__text :is(span,br){position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%;-webkit-user-select:text;user-select:text}:host ::ng-deep .cb-pdf__text>:not(.markedContent),:host ::ng-deep .cb-pdf__text .markedContent span:not(.markedContent){--font-height: 0;--scale-x: 1;--rotate: 0deg;z-index:1;font-size:calc(var(--text-scale-factor) * var(--font-height));transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}:host ::ng-deep .cb-pdf__text .markedContent{display:contents}:host ::ng-deep .cb-pdf__text span[role=img]{-webkit-user-select:none;user-select:none;cursor:default}:host ::ng-deep .cb-pdf__text ::selection{background:color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent);color:transparent}:host ::ng-deep .cb-pdf__text .cb-pdf__hl{position:relative;margin:-1px;padding:1px;border-radius:3px;background:#facc1573;font-size:inherit;transform:none}:host ::ng-deep .cb-pdf__text .cb-pdf__hl.cb-is-selected{background:#f973168c;outline:2px solid rgb(234 88 12)}@media(forced-colors:active){:host ::ng-deep .cb-pdf__text .cb-pdf__hl{background:transparent;outline:1px solid Highlight}:host ::ng-deep .cb-pdf__text .cb-pdf__hl.cb-is-selected{outline:3px solid Highlight}}.cb-pdf__message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cb-space-3);height:100%;padding:var(--cb-space-6);color:var(--cb-color-text-muted);text-align:center}.cb-pdf__message--error{color:var(--cb-color-danger)}.cb-pdf__password{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2);max-width:24rem;margin:var(--cb-space-6) auto;padding:var(--cb-space-6);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);text-align:center}.cb-pdf__password-text{margin:0}.cb-pdf__password-label{align-self:flex-start;font-weight:var(--cb-font-weight-medium)}.cb-pdf__password-row{display:flex;gap:var(--cb-space-2);width:100%}.cb-pdf__password-row .cb-pdf__field{flex:1;min-width:0}.cb-pdf__password-error{margin:0;color:var(--cb-color-danger)}.cb-pdf__submit{height:2.25rem;padding:0 var(--cb-space-4);border:none;border-radius:var(--cb-radius-md);background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font:inherit;font-weight:var(--cb-font-weight-semibold);cursor:pointer}.cb-pdf__submit:hover{background:var(--cb-color-primary-600)}.cb-pdf__toast{position:absolute;left:50%;bottom:var(--cb-space-4);transform:translate(-50%);padding:var(--cb-space-2) var(--cb-space-4);border-radius:var(--cb-radius-full);background:var(--cb-color-surface-950);color:#fff;box-shadow:var(--cb-shadow-md)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }], withCredentials: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCredentials", required: false }] }], httpHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "httpHeaders", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }, { type: i0.Output, args: ["zoomChange"] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }, { type: i0.Output, args: ["rotationChange"] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: false }] }, { type: i0.Output, args: ["sidebarChange"] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }], showRotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRotate", required: false }] }], downloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadable", required: false }] }], printable: [{ type: i0.Input, args: [{ isSignal: true, alias: "printable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], loadError: [{ type: i0.Output, args: ["loadError"] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], pageEls: [{ type: i0.ViewChildren, args: ['pageEl', { isSignal: true }] }], thumbEls: [{ type: i0.ViewChildren, args: ['thumbEl', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], passwordInput: [{ type: i0.ViewChild, args: ['passwordInput', { isSignal: true }] }] } });
+  `, styles: [":host{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:var(--cb-pdf-viewer-height, 40rem);min-height:16rem;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);container-type:inline-size}.cb-pdf__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width, 1px) solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-pdf__group{display:inline-flex;align-items:center;gap:var(--cb-space-1)}.cb-pdf__spacer{flex:1}.cb-pdf__tool{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);cursor:pointer;transition:background-color var(--cb-duration-fast) var(--cb-ease)}.cb-pdf__tool:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-pdf__tool[aria-expanded=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-primary-text)}.cb-pdf__tool:disabled{opacity:var(--cb-opacity-disabled, .5);cursor:default}.cb-pdf__tool:focus-visible,.cb-pdf__field:focus-visible,.cb-pdf__thumb:focus-visible,.cb-pdf__submit:focus-visible,.cb-pdf__viewport:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-pdf__field{height:2.25rem;padding:0 var(--cb-space-2);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit}.cb-pdf__field:disabled{opacity:var(--cb-opacity-disabled, .5)}.cb-pdf__page-input{width:3.25rem;text-align:center}.cb-pdf__total{min-width:2.5rem;color:var(--cb-color-text-muted);white-space:nowrap}.cb-pdf__zoom{width:9.5rem}.cb-pdf__search{position:relative}.cb-pdf__search-icon{position:absolute;left:.625rem;color:var(--cb-color-text-muted);pointer-events:none}.cb-pdf__search-input{width:14rem;padding-left:2rem}.cb-pdf__status{min-width:4.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-align:center;white-space:nowrap}@container (max-width: 40rem){.cb-pdf__zoom,.cb-pdf__status{display:none}.cb-pdf__search-input{width:9rem}}.cb-pdf__body{display:flex;flex:1;min-height:0}.cb-pdf__sidebar{display:flex;flex-direction:column;gap:var(--cb-space-3);flex:none;width:10rem;padding:var(--cb-space-3) 0;overflow-y:auto;border-right:var(--cb-border-width, 1px) solid var(--cb-color-border);background:var(--cb-color-surface)}.cb-pdf__sidebar--tabs{width:12rem}.cb-pdf__sidebar--outline{width:16rem}.cb-pdf__thumbs{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-3)}.cb-pdf__views{display:flex;gap:2px;margin:0 var(--cb-space-2);padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-hover)}.cb-pdf__view{flex:1;min-width:0;padding:.25rem .375rem;border:0;border-radius:calc(var(--cb-radius-md) - 2px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.cb-pdf__view[aria-pressed=true]{background:var(--cb-color-surface-raised);color:var(--cb-color-text-strong);box-shadow:0 1px 2px #0f172a1f}.cb-pdf__view:focus-visible,.cb-pdf__outline-link:focus-visible,.cb-pdf__outline-toggle:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-pdf__outline{padding:0 var(--cb-space-2)}.cb-pdf__outline-list{margin:0;padding:0;list-style:none}.cb-pdf__outline-list .cb-pdf__outline-list{padding-left:1rem}.cb-pdf__outline-item{display:flex;flex-wrap:wrap;align-items:flex-start}.cb-pdf__outline-item>.cb-pdf__outline-list{flex-basis:100%}.cb-pdf__outline-toggle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.5rem;height:1.75rem;padding:0;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-pdf__outline-link{flex:1;min-width:0;padding:.3rem .375rem;border:0;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);line-height:1.3;text-align:start;cursor:pointer}.cb-pdf__outline-item>.cb-pdf__outline-link:first-child{margin-left:1.5rem}.cb-pdf__outline-link:hover,.cb-pdf__outline-toggle:hover{background:var(--cb-color-surface-hover)}.cb-pdf__outline-link--bold{font-weight:var(--cb-font-weight-semibold)}.cb-pdf__outline-link--italic{font-style:italic}.cb-pdf__thumb{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-1);padding:var(--cb-space-1);border:2px solid transparent;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs);cursor:pointer}.cb-pdf__thumb:hover{background:var(--cb-color-surface-hover)}.cb-pdf__thumb.cb-is-active{border-color:var(--cb-color-primary-500);color:var(--cb-color-text-strong);font-weight:var(--cb-font-weight-semibold)}.cb-pdf__thumb-canvas{display:block;background:#fff;box-shadow:0 1px 3px #0f172a33}:host ::ng-deep .cb-pdf__thumb-canvas canvas{display:block;width:100%;height:100%}.cb-pdf__viewport{position:relative;flex:1;min-width:0;overflow:auto;background:var(--cb-color-surface-subtle)}.cb-pdf__pages{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;width:max-content;min-width:100%;box-sizing:border-box}.cb-pdf__page{--user-unit: 1;--total-scale-factor: calc(var(--scale-factor) * var(--user-unit));--scale-round-x: 1px;--scale-round-y: 1px;position:relative;flex:none;background:#fff;box-shadow:0 1px 3px #0f172a2e,0 4px 12px #0f172a14;direction:ltr}.cb-pdf__canvas,:host ::ng-deep .cb-pdf__canvas canvas{position:absolute;inset:0;width:100%;height:100%}.cb-pdf__text{position:absolute;inset:0;overflow:clip;opacity:1;line-height:1;text-align:initial;letter-spacing:normal;word-spacing:normal;-webkit-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:0;--min-font-size: 1;--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv: calc(1 / var(--min-font-size))}.cb-pdf__text[data-main-rotation=\"90\"]{transform:rotate(90deg) translateY(-100%)}.cb-pdf__text[data-main-rotation=\"180\"]{transform:rotate(180deg) translate(-100%,-100%)}.cb-pdf__text[data-main-rotation=\"270\"]{transform:rotate(270deg) translate(-100%)}.cb-pdf__annotations{position:absolute;inset:0;z-index:1;transform-origin:0 0;pointer-events:none}.cb-pdf__annotations[data-main-rotation=\"90\"]{transform:rotate(90deg) translateY(-100%)}.cb-pdf__annotations[data-main-rotation=\"180\"]{transform:rotate(180deg) translate(-100%,-100%)}.cb-pdf__annotations[data-main-rotation=\"270\"]{transform:rotate(270deg) translate(-100%)}:host ::ng-deep .cb-pdf__annotations section{position:absolute;box-sizing:border-box;text-align:initial;transform-origin:0 0;pointer-events:auto}:host ::ng-deep .cb-pdf__annotations [hidden]{display:none!important}:host ::ng-deep .cb-pdf__annotations .linkAnnotation>a{position:absolute;inset:0;border-radius:2px}:host ::ng-deep .cb-pdf__annotations .linkAnnotation>a:hover{background:#0e74901f}:host ::ng-deep .cb-pdf__annotations .linkAnnotation>a:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}:host ::ng-deep .cb-pdf__annotations :is(.textWidgetAnnotation,.choiceWidgetAnnotation) :is(input,textarea,select){width:100%;height:100%;box-sizing:border-box;margin:0;padding:0 calc(2px * var(--total-scale-factor));border:1px solid transparent;border-radius:0;background:#2563eb1a;color:#111827;font-family:Helvetica,Arial,sans-serif;font-size:calc(9px * var(--total-scale-factor));vertical-align:top}:host ::ng-deep .cb-pdf__annotations .textWidgetAnnotation textarea{padding-top:calc(2px * var(--total-scale-factor));resize:none}:host ::ng-deep .cb-pdf__annotations :is(.textWidgetAnnotation,.choiceWidgetAnnotation) :is(input,textarea,select):hover{border-color:#2563eb99}:host ::ng-deep .cb-pdf__annotations :is(input,textarea,select):focus{border-color:transparent;outline:2px solid var(--cb-color-focus-ring);outline-offset:0;background:#2563eb0a}:host ::ng-deep .cb-pdf__annotations :is(input,textarea,select):disabled{background:transparent}:host ::ng-deep .cb-pdf__annotations .buttonWidgetAnnotation :is(.checkBox,.radioButton) input{width:100%;height:100%;margin:0;accent-color:var(--cb-color-primary-600, #0e7490);cursor:pointer}:host ::ng-deep .cb-pdf__annotations .buttonWidgetAnnotation.checkBox input,:host ::ng-deep .cb-pdf__annotations .buttonWidgetAnnotation.radioButton input{width:100%;height:100%;margin:0;accent-color:var(--cb-color-primary-600, #0e7490);cursor:pointer}:host ::ng-deep .cb-pdf__text :is(span,br){position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%;-webkit-user-select:text;user-select:text}:host ::ng-deep .cb-pdf__text>:not(.markedContent),:host ::ng-deep .cb-pdf__text .markedContent span:not(.markedContent){--font-height: 0;--scale-x: 1;--rotate: 0deg;z-index:1;font-size:calc(var(--text-scale-factor) * var(--font-height));transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}:host ::ng-deep .cb-pdf__text .markedContent{display:contents}:host ::ng-deep .cb-pdf__text span[role=img]{-webkit-user-select:none;user-select:none;cursor:default}:host ::ng-deep .cb-pdf__text ::selection{background:color-mix(in srgb,var(--cb-color-primary-500) 35%,transparent);color:transparent}:host ::ng-deep .cb-pdf__text .cb-pdf__hl{position:relative;margin:-1px;padding:1px;border-radius:3px;background:#facc1573;font-size:inherit;transform:none}:host ::ng-deep .cb-pdf__text .cb-pdf__hl.cb-is-selected{background:#f973168c;outline:2px solid rgb(234 88 12)}@media(forced-colors:active){:host ::ng-deep .cb-pdf__text .cb-pdf__hl{background:transparent;outline:1px solid Highlight}:host ::ng-deep .cb-pdf__text .cb-pdf__hl.cb-is-selected{outline:3px solid Highlight}}.cb-pdf__message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cb-space-3);height:100%;padding:var(--cb-space-6);color:var(--cb-color-text-muted);text-align:center}.cb-pdf__message--error{color:var(--cb-color-danger)}.cb-pdf__password{display:flex;flex-direction:column;align-items:center;gap:var(--cb-space-2);max-width:24rem;margin:var(--cb-space-6) auto;padding:var(--cb-space-6);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);text-align:center}.cb-pdf__password-text{margin:0}.cb-pdf__password-label{align-self:flex-start;font-weight:var(--cb-font-weight-medium)}.cb-pdf__password-row{display:flex;gap:var(--cb-space-2);width:100%}.cb-pdf__password-row .cb-pdf__field{flex:1;min-width:0}.cb-pdf__password-error{margin:0;color:var(--cb-color-danger)}.cb-pdf__submit{height:2.25rem;padding:0 var(--cb-space-4);border:none;border-radius:var(--cb-radius-md);background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font:inherit;font-weight:var(--cb-font-weight-semibold);cursor:pointer}.cb-pdf__submit:hover{background:var(--cb-color-primary-600)}.cb-pdf__toast{position:absolute;left:50%;bottom:var(--cb-space-4);transform:translate(-50%);padding:var(--cb-space-2) var(--cb-space-4);border-radius:var(--cb-radius-full);background:var(--cb-color-surface-950);color:#fff;box-shadow:var(--cb-shadow-md)}.cb-pdf__tool[aria-pressed=true]{background:color-mix(in srgb,var(--cb-color-primary-500) 16%,transparent);color:var(--cb-color-primary-700)}:host-context([data-theme=\"dark\"]) .cb-pdf__tool[aria-pressed=true]{color:var(--cb-color-primary-300)}.cb-pdf__color{position:relative;display:inline-flex;align-items:center}.cb-pdf__swatch{position:absolute;left:.625rem;width:.875rem;height:.875rem;border:2px solid;border-radius:var(--cb-radius-full);pointer-events:none}.cb-pdf__color-select{padding-left:1.875rem}.cb-pdf__hint{position:sticky;top:var(--cb-space-2);z-index:4;box-sizing:border-box;width:max-content;max-width:calc(100% - 2rem);height:2rem;margin:var(--cb-space-2) auto calc(-2rem - var(--cb-space-2));padding:0 var(--cb-space-3);overflow:hidden;border-radius:var(--cb-radius-full);background:var(--cb-color-surface-950, #0f172a);color:#fff;font-size:var(--cb-text-xs);line-height:2rem;text-overflow:ellipsis;white-space:nowrap;box-shadow:var(--cb-shadow-md)}.cb-pdf__marks{position:absolute;inset:0;z-index:2;pointer-events:none}.cb-pdf__marks--capture{pointer-events:auto;cursor:cell;touch-action:none}.cb-pdf__marks--ink{cursor:crosshair}.cb-pdf__mark{position:absolute;box-sizing:border-box;pointer-events:auto;border-radius:2px;outline-offset:2px;touch-action:none}.cb-pdf__mark:focus-visible,.cb-pdf__mark.cb-is-selected{outline:2px solid var(--cb-color-focus-ring)}.cb-pdf__marks--pass .cb-pdf__mark--highlight{pointer-events:none}.cb-pdf__mark--highlight{cursor:pointer}.cb-pdf__hl-rect{position:absolute;background:color-mix(in srgb,var(--cb-pdf-mark-light) 55%,transparent)}.cb-pdf__hl-badge{position:absolute;top:-.35rem;right:-.35rem;width:.625rem;height:.625rem;border:2px solid #fff;border-radius:var(--cb-radius-full);background:var(--cb-pdf-mark-dark)}.cb-pdf__mark--note,.cb-pdf__mark--signature,.cb-pdf__mark--ink{cursor:move}.cb-pdf__note-text{display:block;box-sizing:border-box;padding:.1em .3em;border:1px dashed color-mix(in srgb,var(--cb-pdf-mark-dark) 45%,transparent);border-radius:2px;background:transparent;color:var(--cb-pdf-mark-dark);font-family:Helvetica,Arial,sans-serif;line-height:1.2;white-space:pre}.cb-pdf__ink,.cb-pdf__stroke{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.cb-pdf__ink path,.cb-pdf__stroke polyline{fill:none;stroke:var(--cb-pdf-mark-dark);stroke-linecap:round;stroke-linejoin:round}.cb-pdf__sig{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.cb-pdf__resize{position:absolute;right:-.4rem;bottom:-.4rem;width:.8rem;height:.8rem;border:2px solid #fff;border-radius:2px;background:var(--cb-color-focus-ring);cursor:nwse-resize}.cb-pdf__card{position:absolute;z-index:3;display:flex;flex-direction:column;gap:var(--cb-space-2);box-sizing:border-box;width:16rem;padding:var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));color:var(--cb-color-text);font-size:var(--cb-text-sm);box-shadow:var(--cb-shadow-lg);pointer-events:auto;cursor:auto}.cb-pdf__card-label{font-weight:var(--cb-font-weight-medium)}.cb-pdf__card-text{height:auto;min-height:4.5rem;padding:var(--cb-space-2);resize:vertical}.cb-pdf__card-actions,.cb-pdf__sign-actions{display:flex;justify-content:flex-end;gap:var(--cb-space-2)}.cb-pdf__card-btn{height:2rem;padding:0 var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-pdf__card-btn:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-pdf__card-btn--primary{border-color:var(--cb-color-primary-500);background:var(--cb-color-primary-500);color:var(--cb-color-primary-contrast);font-weight:var(--cb-font-weight-semibold)}.cb-pdf__card-btn--primary:hover:not(:disabled){background:var(--cb-color-primary-600)}.cb-pdf__card-btn:disabled{opacity:var(--cb-opacity-disabled, .5);cursor:default}.cb-pdf__card-btn:focus-visible,.cb-pdf__card-text:focus-visible,.cb-pdf__notes-link:focus-visible,.cb-pdf__notes-remove:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-pdf__notes-panel{padding:0 var(--cb-space-2)}.cb-pdf__notes-empty{margin:0;padding:var(--cb-space-2);color:var(--cb-color-text-muted)}.cb-pdf__notes-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}.cb-pdf__notes-item{display:flex;align-items:flex-start;gap:2px}.cb-pdf__notes-link{display:flex;flex:1;align-items:flex-start;gap:var(--cb-space-2);min-width:0;padding:var(--cb-space-2);border:0;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);font:inherit;text-align:left;cursor:pointer}.cb-pdf__notes-link:hover,.cb-pdf__notes-remove:hover{background:var(--cb-color-surface-hover)}.cb-pdf__notes-swatch{flex:none;width:.625rem;height:.625rem;margin-top:.3rem;border-radius:var(--cb-radius-full)}.cb-pdf__notes-text{display:flex;flex-direction:column;min-width:0}.cb-pdf__notes-page{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}.cb-pdf__notes-label{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow-wrap:anywhere}.cb-pdf__notes-remove{display:inline-flex;flex:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-pdf__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(forced-colors:active){.cb-pdf__hl-rect{background:transparent;outline:2px solid Mark}.cb-pdf__note-text{border-color:CanvasText}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }], withCredentials: [{ type: i0.Input, args: [{ isSignal: true, alias: "withCredentials", required: false }] }], httpHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "httpHeaders", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }, { type: i0.Output, args: ["zoomChange"] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }, { type: i0.Output, args: ["rotationChange"] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: false }] }, { type: i0.Output, args: ["sidebarChange"] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }], showRotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRotate", required: false }] }], downloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadable", required: false }] }], printable: [{ type: i0.Input, args: [{ isSignal: true, alias: "printable", required: false }] }], showOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutline", required: false }] }], forms: [{ type: i0.Input, args: [{ isSignal: true, alias: "forms", required: false }] }], externalLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalLinks", required: false }] }], sidebarView: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarView", required: false }] }, { type: i0.Output, args: ["sidebarViewChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], annotatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotatable", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }, { type: i0.Output, args: ["annotationsChange"] }], tool: [{ type: i0.Input, args: [{ isSignal: true, alias: "tool", required: false }] }, { type: i0.Output, args: ["toolChange"] }], annotationColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotationColor", required: false }] }, { type: i0.Output, args: ["annotationColorChange"] }], author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], loadError: [{ type: i0.Output, args: ["loadError"] }], formChange: [{ type: i0.Output, args: ["formChange"] }], annotationAdd: [{ type: i0.Output, args: ["annotationAdd"] }], annotationRemove: [{ type: i0.Output, args: ["annotationRemove"] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], pageEls: [{ type: i0.ViewChildren, args: ['pageEl', { isSignal: true }] }], thumbEls: [{ type: i0.ViewChildren, args: ['thumbEl', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], passwordInput: [{ type: i0.ViewChild, args: ['passwordInput', { isSignal: true }] }], cardText: [{ type: i0.ViewChild, args: ['cardText', { isSignal: true }] }] } });
 function sizeOf(page) {
     const viewport = page.getViewport({ scale: 1, rotation: 0 });
     const userUnit = page.userUnit || 1;
-    return { width: viewport.width, height: viewport.height, rotate: page.rotate || 0, userUnit };
+    const [x0 = 0, y0 = 0] = page.view ?? [];
+    return { x0, y0, width: viewport.width, height: viewport.height, rotate: page.rotate || 0, userUnit };
 }
 /** Bytes del documento si no es una URL (copiados: pdf.js transfiere el buffer al worker). */
 async function toData(src) {
@@ -1541,6 +3254,23 @@ function clamp(value, min, max) {
 function round2(value) {
     return Math.round(value * 100) / 100;
 }
+/** Quita de una selección las cajas mucho más altas que una línea (contenedores, fin de contenido). */
+function withoutTallRects(rects) {
+    if (rects.length < 2)
+        return rects;
+    const heights = rects.map((r) => r.height).sort((a, b) => a - b);
+    const median = heights[Math.floor(heights.length / 2)];
+    return rects.filter((r) => r.height <= median * 2.5);
+}
+function unionBox(boxes) {
+    const left = Math.min(...boxes.map((b) => b.left));
+    const top = Math.min(...boxes.map((b) => b.top));
+    return { left, top, width: Math.max(...boxes.map((b) => b.left + b.width)) - left, height: Math.max(...boxes.map((b) => b.top + b.height)) - top };
+}
+function truncate(text, max) {
+    const clean = text.replace(/\s+/g, ' ').trim();
+    return clean.length > max ? `${clean.slice(0, max - 1)}…` : clean;
+}
 
 /*
  * Public API Surface de @caribeng/ui/pdfviewer
@@ -1550,4 +3280,4 @@ function round2(value) {
  * Generated bundle index. Do not edit.
  */
 
-export { CB_PDF_VIEWER_OPTIONS, CbPdfEngine, CbPdfViewer, provideCbPdfViewer };
+export { CB_PDF_COLORS, CB_PDF_VIEWER_OPTIONS, CbPdfEngine, CbPdfViewer, provideCbPdfViewer };