@prolibu-suite/cobalt-core 0.11.5 → 0.11.7

package/dist/collection/components/co-data-table/co-data-table.css

@@ -19,7 +19,7 @@ co-data-table {
 .co-data-table {
   position: relative;
   font-family: var(--co-font-family-primary);
-  background: var(--co-color-base-blanco);
+  background: var(--co-semantic-surface-page);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -61,7 +61,7 @@ co-data-table {
   position: relative;
   height: 40px; /* Figma header 40 — altura dura, centrado por flex/vertical-align */
   padding: 0 var(--co-spacing-md);
-  background: var(--co-color-base-blanco);
+  background: var(--co-semantic-surface-page);
   border-bottom: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   border-right: 1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);
   text-align: left;
@@ -145,7 +145,8 @@ co-data-table {
 
 .co-data-table__filter-icon--active {
   opacity: 1;
-  color: var(--co-color-primary-azul);
+  /* Tinta de enlace/activo: text-link gira con el tema (azul primitivo = 3,8:1 sobre gray-800). */
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul));
 }
 
 .co-data-table__filter-icon--indirect {
@@ -173,7 +174,9 @@ co-data-table {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  color: var(--co-color-gray-400);
+  /* text-muted, no gray-400 (= text-disabled): el icono de orden es un control HABILITADO y
+     gray-400 daba 2,6 sobre blanco (auditoría 2026-09-27, §5). */
+  color: var(--co-semantic-text-muted);
   transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
@@ -233,7 +236,7 @@ co-data-table {
 .co-data-table__td--sticky {
   position: sticky;
   z-index: 1;
-  background: var(--co-color-base-blanco);
+  background: var(--co-semantic-surface-page);
 }
 
 .co-data-table__th--sticky {
@@ -284,7 +287,7 @@ co-data-table {
   width: 4px;
   pointer-events: none;
   opacity: 0;
-  background: linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);
+  background: linear-gradient(to right, var(--co-semantic-border-subtle), transparent);
   transition: opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);
 }
 
@@ -317,11 +320,11 @@ co-data-table {
 
 .co-data-table__row--selected .co-data-table__td--sticky::before {
   opacity: 1;
-  background-color: var(--co-color-opacity-negro-4);
+  background-color: var(--co-semantic-border-hairline);
 }
 
 .co-data-table__row--selected:hover .co-data-table__td--sticky::before {
-  background-color: var(--co-color-opacity-negro-8);
+  background-color: var(--co-semantic-surface-hover);
 }
 
 /* ─── RESIZE HANDLE ─────────────────────────────────────────── */
@@ -359,11 +362,11 @@ co-data-table {
 }
 
 .co-data-table__row--selected {
-  background: var(--co-color-opacity-negro-4);
+  background: var(--co-semantic-border-hairline);
 }
 
 .co-data-table__row--selected:hover {
-  background: var(--co-color-opacity-negro-8);
+  background: var(--co-semantic-surface-hover);
 }
 
 .co-data-table__td {

package/dist/collection/components/co-data-table/co-data-table.js

@@ -509,7 +509,7 @@ export class CoDataTable {
                     "references": {
                         "CoDataTableColumn": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-audio-peaks/packages/core/src/components/co-data-table/co-data-table.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-data-table/co-data-table.tsx",
                             "id": "src/components/co-data-table/co-data-table.tsx::CoDataTableColumn"
                         }
                     }

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.css

@@ -14,8 +14,8 @@
   align-items: center;
   gap: var(--co-spacing-lg);
   padding: var(--co-spacing-md) var(--co-spacing-lg);
-  border-top: 1px solid var(--co-color-opacity-negro-8);
-  background: var(--co-color-base-blanco);
+  border-top: 1px solid var(--co-semantic-border-subtle);
+  background: var(--co-semantic-surface-page);
   font-size: var(--co-font-size-12);
   color: var(--co-semantic-text-secondary);
   letter-spacing: var(--co-font-letter-spacing-body);
@@ -48,9 +48,9 @@
 .co-pagination__jump-input {
   width: 32px;
   height: 28px;
-  border: 1px solid var(--co-color-opacity-negro-8);
+  border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xxs);
-  background: var(--co-color-base-blanco);
+  background: var(--co-semantic-surface-page);
   font-family: var(--co-font-family-primary);
   font-size: var(--co-font-size-12);
   color: var(--co-semantic-text-default);
@@ -93,8 +93,8 @@
   bottom: calc(100% + 4px);
   left: 0;
   min-width: 72px;
-  background: var(--co-color-base-blanco);
-  border: 1px solid var(--co-color-opacity-negro-8);
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xs);
   box-shadow: 0 4px 12px var(--co-color-opacity-negro-8);
   padding: var(--co-spacing-xs) 0;
@@ -121,7 +121,8 @@
 
 .co-pagination__page-size-option--active {
   font-weight: 500;
-  color: var(--co-color-primary-azul);
+  /* Tinta de enlace/activo: text-link gira con el tema (azul primitivo = 3,8:1 sobre gray-800). */
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul));
 }
 
 /* ─── PAGE NAVIGATION ───────────────────────────────────────── */
@@ -136,9 +137,9 @@
   align-items: center;
   gap: var(--co-spacing-xs);
   padding: var(--co-spacing-xs) var(--co-spacing-sm);
-  border: 1px solid var(--co-color-opacity-negro-8);
+  border: 1px solid var(--co-semantic-border-subtle);
   border-radius: var(--co-border-radius-xxs);
-  background: var(--co-color-base-blanco);
+  background: var(--co-semantic-surface-page);
   font-family: var(--co-font-family-primary);
   font-size: var(--co-font-size-12);
   color: var(--co-semantic-text-default);
@@ -177,13 +178,13 @@
 }
 
 .co-pagination__page-btn--active {
-  background: var(--co-color-base-negro);
-  color: var(--co-color-base-blanco);
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
   font-weight: 500;
 }
 
 .co-pagination__page-btn--active:hover {
-  background: var(--co-color-base-negro);
+  background: var(--co-semantic-surface-primary);
 }
 
 .co-pagination__ellipsis {
@@ -192,5 +193,6 @@
   justify-content: center;
   min-width: 28px;
   height: 28px;
-  color: var(--co-color-gray-400);
+  /* text-muted: la elipsis es contenido, no un control deshabilitado (text-disabled daba 2,6). */
+  color: var(--co-semantic-text-muted);
 }

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.js

@@ -96,17 +96,17 @@ export class CoDataTablePagination {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (h("div", { key: '0f62fb900604d4deb263f03e8075e2c092e8ce73', class: "co-pagination", part: "pagination" }, h("div", { key: '257d5bc2c25ef058ceb7b41ddfba949e8da0d466', class: "co-pagination__section" }, h("span", { key: '61d243f6e20b8aca4f65c4f95dd0a85a98b70485', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'd99b709c2f9ac000adf4922c3cbcd9a745f6be2f', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: '617a09f825d5bd9594e9548d0c20fc13a5db7fd3', class: "co-pagination", part: "pagination" }, h("div", { key: '34a685bd8ac4491d60ff2c918dd5c28db0cbba69', class: "co-pagination__section" }, h("span", { key: '2485f9691607c27cc008f4f86b0e95d437247bc0', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'd99846b8b9c6870f1820b92058aedc04eeb3a861', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), h("div", { key: '9737e4830745d75428184b9cb1e45f9cfd713aaf', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: '1a025e7dc8fc1cc29547da7633b70e0b1b166ab7', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '5402395084c43c4e828de79454aa2dbb457bf6df', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '8010da33d478ce393f77122926d6d5e30eb6da27', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '0abd66f654b36912826d9b11357837f1db5b045c', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: 'ca25c9f67dd28fbf58d903691a6f805168dc255e', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: 'f632f2fc45bbc36b9c0b6e36384c874a86bf6aa7', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'f221dee7c91bc77db6f129406f75536be9e44101', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: 'b393c0f979f8cb47c3c8053a45ba68f76b5dbc03', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '8a5ebabfd0d02cce13a336665146bdfdffc8c8b8', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '50b8d964edef6e024dd05b3a9568aaeafc68e3f8', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '95ea37573a30b0fa211e744357fee3d16f050e28', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '3b84c572f6eb902d9bd2787e938014efa710b317', class: "co-pagination__spacer" }), h("div", { key: '0cf60f2844ccd5e7ce370bc57895c874f558b718', class: "co-pagination__section" }, h("span", { key: '944f414d863c494b00df4ac81f688b00597b0af4', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '4190fcca176fc5d9918cc6e70c7ab6f5a244dfd7', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '5dbb9d83e9e3df1ad9dc817e5e7995706e9c06b3', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '842aadd400b81993b4b351720e593e078d9430a8', class: "co-pagination__spacer" }), h("div", { key: '8a107df8e4b72daa20b7660c7fa95e772d802567', class: "co-pagination__section" }, h("span", { key: '1a532086e8349eefebb13445fe010030b6b924a7', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: '689e3254577b29ff67e03c01fa5c7ba7797c94eb', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '34af2b66e5fe56c5770fea0efaad624f85f157c7', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '7b27f1e6910b3f8c40198c83a6c6a11a4fbddaeb', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '961479bc06744abaf978ac143390923169ba7d35', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get is() { return "co-data-table-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-field/co-date-field.css

@@ -183,18 +183,23 @@
 }
 
 /* ---- Invalid (mirrors co-input error) ---- */
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico); el
+   halo sale de color-mix 12% (= el rgba(170, 46, 27, .12) de antes). Fallback: la primitiva de hoy. */
 .co-date-field--invalid .co-date-field__field {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 .co-date-field--invalid.co-date-field--focused .co-date-field__field {
-  border-color: var(--co-semantic-status-error);
-  box-shadow: 0 0 0 2px rgba(170, 46, 27, 0.12);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-error, var(--co-semantic-status-error)) 12%, transparent);
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-date-field__helper--error .co-date-field__helper-icon,
 .co-date-field__helper--error .co-date-field__helper-text {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──
@@ -223,9 +228,10 @@
   min-width: 0;
 }
 
+/* Asterisco de requerido: tinta --co-semantic-text-error (gira con el tema). */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {

package/dist/collection/components/co-date-field/co-date-field.js

@@ -168,20 +168,20 @@ export class CoDateField {
         // should still fall back to the localized default placeholder.
         const placeholder = this.placeholder || t.setDate;
         const helper = this.isInvalid ? this.errorMessage : this.helperText;
-        return (h("div", { key: 'd93a8860d06fcdd8b89dcb3aeccff5c9c5b38167', class: {
+        return (h("div", { key: '453e532a8aa115e750353877880555d00c768951', class: {
                 'co-date-field': true,
                 'co-date-field--disabled': this.disabled,
                 'co-date-field--focused': this.hasFocus,
                 'co-date-field--filled': this.hasValue,
                 'co-date-field--invalid': this.isInvalid,
                 [`co-date-field--${this.size}`]: true,
-            }, part: "wrapper" }, this.label && (h("div", { key: '6504b4f052600de1c04f02a06d8bf63e1328d22e', class: "co-date-field__labels" }, h("label", { key: '123e4c3eebf375fb7aa9071122a414236ecf4655', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: '2fbfbfe2c135f6c7205650a53085aad1b0eb353c', required: this.required })))), h("div", { key: '6149b5560bde2ef55d161bfefce6eeb09070db58', class: "co-date-field__field-row" }, h("div", { key: '4457e1e7ac2e11246d4c03d5b6c0ae876aba9ff7', class: "co-date-field__field", part: "field" }, h("co-icon", { key: 'd65eba1f429aaaa8e484525aa7c9d51b054bbc76', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: 'f8a34bef5a3ffadb07f9a74f78a67ef321566a7b', class: "co-date-field__input-wrapper" }, h("input", { key: '2fc599d088b02d4bda53d7839c2c923d63d23552', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: 'f255bb2cb791e9956ee6dc89d19fd320069f566b', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: 'e455cfb66bb65981ba685dcd3c2fbbf0bd98562f', class: "co-date-field__labels" }, h("label", { key: 'd3cd19357bded058f3922c5423f816bc094c5fb9', class: "co-date-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'e66ca94dabe83f2bcf77a85d6d4c72ad7eed6cdb', required: this.required })))), h("div", { key: '848c32b06cbe5fa847c9c769c1407f13237ba4d5', class: "co-date-field__field-row" }, h("div", { key: 'ca350ae929087a7e6268de42a4b2e14d3de9ef58', class: "co-date-field__field", part: "field" }, h("co-icon", { key: '9054673efd46a0f367abffc938a3328af6d0408b', name: "calendar", size: 16, class: "co-date-field__icon" }), h("div", { key: '06c441cd3829acfd26d1e2eba100f246fadf4f55', class: "co-date-field__input-wrapper" }, h("input", { key: '0b1fccd57b629230b079ad41d3d02555ca54144d', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (h("button", { key: 'afacd96145ddfb36f9c4823dace12472c1692839', class: {
                 'co-date-field__clear': true,
                 'co-date-field__clear--hidden': !showClear,
-            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: '9d3aa2b050471790738c5744277c47a78b5c4f35', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '54a70ac066a6c20f644aecbd73c498485909b084', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '89574b44f7d194a5bfe36e639b00c9c2f62a438e', class: {
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, h("co-icon", { key: '87d841da80b8d0ef82df03ec32345a0cd274f043', name: "x-circle", size: 16, weight: "fill" }))))), this.name && h("input", { key: '60a65f36972af02f0bb3f747c287b0fb8174de4d', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (h("div", { key: '05cfeef9edc268c1ca3f6b112d9750532cbf6159', class: {
                 'co-date-field__helper': true,
                 'co-date-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '6a3038de56a98bafdee4e6b11839031b37af9496', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '9ac954adc74f2fac84abcd3a98fe68120edc1609', class: "co-date-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '8e97926b9bd11f007d850dbcced80b9fb51b37b6', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), h("span", { key: '8cd33b10c139f17a97bc88f457a96e23413e744a', class: "co-date-field__helper-text" }, helper)))));
     }
     static get is() { return "co-date-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-picker/co-date-picker.css

@@ -50,8 +50,10 @@ co-date-field[data-variant='flat']::part(field) {
   line-height: 1;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-date-picker__helper--error {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /*
@@ -111,9 +113,10 @@ co-date-field[data-variant='flat']::part(field) {
   min-width: 0;
 }
 
+/* Asterisco de requerido: tinta --co-semantic-text-error (gira con el tema). */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {

package/dist/collection/components/co-date-range/co-date-range.js

@@ -42,7 +42,7 @@ export class CoDateRange {
         }
     }
     render() {
-        return (h("co-date-range-picker", { key: 'e1d13b772fcd7aa60bbc77a25a5c6cb40a25dd4b', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
+        return (h("co-date-range-picker", { key: '4ac8c4be9cee1d7573b8770ae61305f171f8358c', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
     }
     static get is() { return "co-date-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-range-picker/co-date-range-picker.css

@@ -71,8 +71,11 @@
   cursor: not-allowed;
 }
 
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico).
+   Fallback: la primitiva de hoy, hasta publicar tokens. */
 .co-date-range-picker--invalid .co-date-range-picker__trigger {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 .co-date-range-picker__icon,
@@ -234,8 +237,10 @@
   color: var(--co-semantic-text-muted);
   padding: 0 var(--co-spacing-xs);
 }
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-date-range-picker__helper--error {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /* ── Horizontal layout: label left; control + helper stacked right ──
@@ -264,9 +269,10 @@
   min-width: 0;
 }
 
+/* Asterisco de requerido: tinta --co-semantic-text-error (gira con el tema). */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {

package/dist/collection/components/co-date-range-picker/co-date-range-picker.js

@@ -1055,7 +1055,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-audio-peaks/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }
@@ -1076,7 +1076,7 @@ export class CoDateRangePicker {
                     "references": {
                         "DateRangeValue": {
                             "location": "local",
-                            "path": "/Users/agox/worktrees/cobalt-audio-peaks/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-date-range-picker/co-date-range-picker.tsx",
                             "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
                         }
                     }

package/dist/collection/components/co-date-time-picker/co-date-time-picker.css

@@ -171,13 +171,16 @@
   cursor: default;
 }
 
+/* Borde de error de CAMPO por --co-semantic-border-error: gira con el tema (status-error es
+   relleno fijo y como trazo en oscuro daba 2,94:1). En claro vale status-error (idéntico); el
+   halo sale de color-mix 12% (= el rgba(170, 46, 27, .12) de antes). Fallback: la primitiva de hoy. */
 .co-date-time-picker__field--invalid {
-  border-color: var(--co-semantic-status-error);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
 }
 
 .co-date-time-picker__field--invalid:focus-within {
-  border-color: var(--co-semantic-status-error);
-  box-shadow: 0 0 0 2px rgba(170, 46, 27, 0.12);
+  border-color: var(--co-semantic-border-error, var(--co-semantic-status-error));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-semantic-border-error, var(--co-semantic-status-error)) 12%, transparent);
 }
 
 /* ---- Helper text ---- */
@@ -193,8 +196,10 @@
   line-height: 1;
 }
 
+/* Tinta de estado por --co-semantic-text-*: gira con el tema (status-* es relleno, no se
+   aclara, y como texto en oscuro daba <4,5). Fallback a la primitiva hasta publicar tokens. */
 .co-date-time-picker__helper--error {
-  color: var(--co-semantic-status-error);
+  color: var(--co-semantic-text-error, var(--co-semantic-status-error));
 }
 
 /* ============================================================
@@ -404,9 +409,10 @@
   min-width: 0;
 }
 
+/* Asterisco de requerido: tinta --co-semantic-text-error (gira con el tema). */
 .co-field-required {
   margin-left: 2px;
-  color: var(--co-color-status-error);
+  color: var(--co-semantic-text-error, var(--co-color-status-error));
 }
 
 .co-field-required__caption {

package/dist/collection/components/co-date-time-picker/co-date-time-picker.js

@@ -371,10 +371,10 @@ export class CoDateTimePicker {
     render() {
         var _a;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: 'fd0f8441ff0531546790d1d318a580cd962bf345', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
+        return (h("div", { key: 'af86cbb11e2cdfb7c51332fcb7b862458fe5f7fa', class: "co-date-time-picker", onKeyDown: this.onRootKeyDown }, this.renderLabel(), this.isMobile ? ([
             h("div", { class: "co-date-time-picker__trigger", onClick: () => !this.disabled && !this.readonly && this.setOpen(true) }, this.renderTrigger(t)),
             h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDateTime, onCoClose: this.closeApplyingDraft }, h("div", { class: "co-date-time-picker__sheet" }, this.renderPanel(t, true))),
-        ]) : (h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && h("input", { key: 'a30aed536d890836f468660f4f40f745504a6731', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
+        ]) : (h("co-popover", { ref: (el) => (this.popoverEl = el), open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: "co-date-time-picker__trigger" }, this.renderTrigger(t)), this.open && this.renderPanel(t, false))), this.name && h("input", { key: '91f3044a08ae34ed8ad50c26ae6319fefdac79d7', type: "hidden", name: this.name, value: (_a = this.value) !== null && _a !== void 0 ? _a : '' }), this.renderHelper()));
     }
     static get is() { return "co-date-time-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-document-editor/co-document-editor.css

@@ -120,9 +120,22 @@ co-document-editor {
   outline: 1px dashed var(--co-color-primary-azul);
   outline-offset: -1px;
   background: color-mix(in srgb, var(--co-color-primary-azul) 6%, transparent);
-  color: var(--co-color-primary-azul);
+  /* Tinta por text-link (la hoja la re-ancla a la primitiva: el papel es isla clara). */
+  color: var(--co-semantic-text-link, var(--co-color-primary-azul));
   font-size: var(--co-font-size-12);
   user-select: none;
+  /* draggable (signature-slot.ts): se mueve de un gesto; ⌥/Ctrl + arrastrar copia. */
+  cursor: grab;
+}
+
+.co-doc-signature:active {
+  cursor: grabbing;
+}
+
+/* Seleccionada (clic): la barra de firma actúa sobre ESTA — tras «Duplicar» es la copia. */
+.co-doc-signature.ProseMirror-selectednode {
+  outline-style: solid;
+  background: color-mix(in srgb, var(--co-color-primary-azul) 14%, transparent);
 }
 
 .co-doc-hb {
@@ -204,6 +217,8 @@ co-document-editor {
   --co-semantic-border-field: var(--co-color-opacity-negro-25);
   --co-semantic-border-focus: var(--co-color-opacity-negro-50);
   --co-semantic-border-focus-ring: var(--co-color-opacity-negro-8);
+  /* La firma (tinta text-link) vive en el papel: en oscuro text-link sería azul-500 sobre blanco (2,9:1). */
+  --co-semantic-text-link: var(--co-color-primary-azul);
   position: relative;
   width: var(--co-doc-page-w);
   min-height: calc(var(--co-doc-pages, 1) * var(--co-doc-page-h) + (var(--co-doc-pages, 1) - 1) * var(--co-doc-gap));
@@ -436,3 +451,99 @@ co-document-editor {
 .co-doc-editor__image-mode--active:focus-visible {
   box-shadow: inset 0 0 0 1px var(--co-semantic-border-focus), 0 0 0 2px var(--co-semantic-border-focus-ring);
 }
+
+/*
+ * Barra de la firma seleccionada (2026-10-01): «Duplicar» + ‹ Firma N ›, mismo marco que la
+ * barra de imagen. Medidas fijas en SIGNATURE_BAR_SIZE (prueba en signature-bar.test.ts):
+ * se posiciona con imageBarPosition antes de existir. Sin transición (Motion regla 2, H15).
+ */
+.co-doc-editor__sig-bar {
+  position: absolute;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+  padding: var(--co-spacing-xxs);
+  box-sizing: border-box;
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-xs);
+  color: var(--co-semantic-text-default);
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-12);
+  user-select: none;
+}
+
+.co-doc-editor__sig-bar co-tooltip {
+  display: inline-flex;
+}
+
+/* Base común en UNA línea: la prueba de medidas toma la primera regla que EMPIEZA con el selector. */
+.co-doc-editor__sig-duplicate, .co-doc-editor__sig-step {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--co-border-radius-xxs);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.co-doc-editor__sig-duplicate {
+  width: 96px;
+  height: 28px;
+  gap: var(--co-spacing-xs);
+  padding: 0 var(--co-spacing-sm);
+}
+
+.co-doc-editor__sig-duplicate co-icon {
+  flex-shrink: 0;
+}
+
+.co-doc-editor__sig-duplicate-text {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-doc-editor__sig-step {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+}
+
+.co-doc-editor__sig-duplicate:hover,
+.co-doc-editor__sig-step:hover:not(:disabled) {
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-doc-editor__sig-step:disabled {
+  color: var(--co-semantic-text-muted);
+  cursor: default;
+}
+
+.co-doc-editor__sig-duplicate:focus-visible,
+.co-doc-editor__sig-step:focus-visible {
+  outline: 1px solid var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-doc-editor__sig-sep {
+  width: 1px;
+  align-self: stretch;
+  background: var(--co-semantic-border-default);
+}
+
+.co-doc-editor__sig-label {
+  width: 88px;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-variant-numeric: tabular-nums;
+}