@sfperusacdev/sf-ui 0.3.0 → 0.3.1

package/dist/theme/densidad.css

@@ -0,0 +1,291 @@
+/**
+ * Densidad compacta de tablero con <html data-density="compacta">: títulos de tarjeta de 18 px y leyendas, listas,
+ * baldosas y líneas de tiempo más apretadas para que un tablero completo quepa en 1536×1024. Independiente del tema.
+ */
+:root[data-density='compacta'] {
+  --sf-app-shell-sidebar-width: 11.875rem;
+  --sf-font-script: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive;
+}
+
+:root[data-density='compacta'] .sf-card-header .sf-card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+:root[data-density='compacta'] .sf-card-header .sf-card-muted {
+  font-size: 0.875rem;
+  color: var(--sf-text);
+}
+
+:root[data-density='compacta'] .sf-card-header {
+  border-bottom-color: transparent;
+}
+
+:root[data-density='compacta'] .sf-card-header {
+  padding: 0.5rem 0.75rem 0.125rem;
+}
+
+:root[data-density='compacta'] .sf-chart-legend--vertical .sf-chart-legend__item {
+  padding: 0.0625rem 0;
+  font-size: 0.78125rem;
+  line-height: 1.15;
+}
+
+:root[data-density='compacta'] .sf-record-list--compact .sf-record-list__item {
+  padding: 0.1875rem 0.25rem;
+  line-height: 1.2;
+}
+
+:root[data-density='compacta'] .sf-record-list--compact .sf-record-list__title {
+  font-size: 0.71875rem;
+}
+
+:root[data-density='compacta'] .sf-record-list--compact .sf-record-list__subtitle {
+  font-size: 0.65625rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered {
+  gap: 0.25rem;
+  padding: 0.5rem 0.375rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered .sf-metric-tile__label {
+  font-size: 0.8125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered .sf-metric-tile__value {
+  font-size: 1.375rem;
+}
+
+:root[data-density='compacta'] .sf-app-shell__submenu-btn {
+  padding: 0.75rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+:root[data-density='compacta'] .sf-app-shell__submenu-items {
+  gap: 0.375rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row__tile-icon {
+  width: 3.125rem;
+  height: 3.125rem;
+  font-size: 1.5rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile {
+  gap: 0.625rem;
+  padding: 0.5rem 0.625rem 0.5rem 0.5rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile .sf-metric-row__label {
+  font-size: 0.8125rem;
+  white-space: nowrap;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile .sf-metric-row__description {
+  font-size: 0.6875rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--leading {
+  gap: 0.625rem;
+  padding: 0.625rem 0.625rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--leading .sf-metric-tile__icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.25rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--leading .sf-metric-tile__value {
+  font-size: 1.5rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--leading .sf-metric-tile__label,
+:root[data-density='compacta'] .sf-metric-tile--leading .sf-metric-tile__sublabel {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--eyebrow .sf-metric-tile__value {
+  font-size: 1.25rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__item {
+  gap: 0.75rem;
+  margin-bottom: 0.375rem;
+  padding: 0.4375rem 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__icon-wrap {
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 1.125rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__title {
+  font-size: 0.8125rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__time,
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__description,
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__meta {
+  margin-top: 0;
+  font-size: 0.71875rem;
+  line-height: 1.35;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__meta {
+  width: 8rem;
+}
+
+:root[data-density='compacta'] .sf-check-list {
+  gap: 0.5rem 1.125rem;
+}
+
+:root[data-density='compacta'] .sf-check-list__item {
+  font-size: 0.8125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row__tile-bar {
+  margin-top: 0.125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile .sf-metric-row__tile-body {
+  gap: 0;
+  line-height: 1.25;
+}
+
+:root[data-density='compacta'] .sf-integration-flow--compact .sf-integration-flow__group--targets .sf-integration-flow__nodes {
+  gap: 0.25rem;
+}
+
+:root[data-density='compacta'] .sf-integration-flow--compact .sf-integration-flow__group--targets .sf-integration-flow__node {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+:root[data-density='compacta'] .sf-profile-card__fact {
+  padding: 0.25rem 0;
+}
+
+:root[data-density='compacta'] .sf-profile-card__quote {
+  margin-top: 0.875rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small {
+  padding-top: 0.3125rem;
+  padding-bottom: 0.3125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small .sf-metric-row__tile-icon {
+  width: 2.375rem;
+  height: 2.375rem;
+  font-size: 1rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small .sf-metric-row__label {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small .sf-metric-row__description,
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small .sf-metric-row__value {
+  font-size: 0.65625rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--inline .sf-metric-row__label {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--inline .sf-metric-row__value {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-tabs--pills > .sf-tab {
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__time {
+  font-weight: 600;
+  color: var(--sf-text);
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__title,
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__description {
+  margin-top: 0;
+  font-size: 0.71875rem;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--sf-text);
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__time {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-tabs--pills {
+  gap: 0.25rem;
+}
+
+:root[data-density='compacta'] .sf-tabs--pills > .sf-tab {
+  padding: 0.3125rem 0.625rem;
+}
+
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__item {
+  padding-bottom: 0.5rem;
+}
+
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__item + .sf-audit-timeline__item {
+  padding-top: 0.5rem;
+}
+
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__actor {
+  font-size: 0.875rem;
+}
+
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__action,
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__detail {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__icon-wrap {
+  height: 2rem;
+  width: 2rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__item:has(.sf-timeline__icon-wrap) .sf-timeline__line {
+  top: calc(2.75rem - 1px);
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__item {
+  gap: 0.375rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered .sf-metric-tile__icon {
+  font-size: 1.5rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered .sf-metric-tile__sublabel {
+  font-size: 0.6875rem;
+}
+
+:root[data-density='compacta'] .sf-app-shell__submenu-btn--nested {
+  padding: 0.375rem 0.75rem 0.375rem 2.125rem;
+  font-size: 0.78125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--value-first .sf-metric-tile__label {
+  font-size: 0.6875rem;
+}
+
+/* Leyendas: la etiqueta pasa a otra línea entera en vez de partirse a media palabra. */
+:root[data-density='compacta'] .sf-chart-legend--vertical .sf-chart-legend__label {
+  overflow-wrap: break-word;
+}
+
+:root[data-density='compacta'] .sf-chart-legend--columns-2 .sf-chart-legend__item {
+  font-size: 0.71875rem;
+}

package/dist/theme/neon.css

@@ -0,0 +1,185 @@
+/**
+ * Acabado «neón»: fondo de foto oscurecido (--sf-page-bg-image), tarjetas de vidrio con borde verde agua y
+ * resplandor de color. Con <html data-skin="neon">; data-theme="dark" da la versión oscura (capa sobre dark.css).
+ */
+
+:root[data-skin='neon'] {
+  --sf-glow-sm: 0 0 10px;
+  --sf-glow-md: 0 0 18px;
+}
+
+/* —— Neón claro: vidrio blanco sobre el campo, mismos acentos. —— */
+:root[data-skin='neon']:not([data-theme='dark']) {
+  --sf-page-bg: #e9f4f2;
+  --sf-surface: #ffffff;
+  --sf-surface-alt: #f2f8f7;
+  --sf-white: #ffffff;
+
+  --sf-border: #c4e1db;
+  --sf-border-strong: #a9d3cb;
+  --sf-text: #0b2530;
+  --sf-text-muted: #45606b;
+  --sf-text-subtle: #5f7782;
+  --sf-label: #0b2530;
+  --sf-primary: #0b2530;
+
+  --sf-accent: #0d9488;
+  --sf-accent-hover: #0f766e;
+  --sf-accent-10: rgb(13 148 136 / 0.1);
+
+  --sf-card-bg: rgb(255 255 255 / 0.9);
+  --sf-card-border: #c4e1db;
+  --sf-card-title: #0b2530;
+  --sf-card-subtitle: #45606b;
+  --sf-card-muted: #5f7782;
+  --sf-card-shadow: 0 0 0 1px rgb(13 148 136 / 0.08), 0 8px 24px rgb(11 37 48 / 0.1);
+  --sf-record-item-bg: rgb(240 249 247 / 0.9);
+
+  --sf-metric-track: rgb(11 37 48 / 0.05);
+  --sf-gauge-track: rgb(13 148 136 / 0.14);
+
+  --sf-btn-outline-border: #7fb6d9;
+  --sf-btn-outline-text: #0b3a5c;
+  --sf-btn-outline-hover-bg: rgb(43 125 224 / 0.1);
+
+  --sf-drawer-bg: #ffffff;
+  --sf-modal-bg: #ffffff;
+  --sf-dropdown-bg: #ffffff;
+
+  --sf-app-shell-accent: #0284c7;
+  --sf-timeline-time-color: #0f766e;
+
+  --sf-cat-1: #0284c7;
+  --sf-cat-2: #9333ea;
+  --sf-cat-3: #059669;
+  --sf-cat-4: #ea580c;
+  --sf-cat-5: #ca8a04;
+  --sf-cat-6: #16a34a;
+  --sf-cat-7: #a21caf;
+  --sf-cat-8: #2563eb;
+  --sf-cat-9: #0891b2;
+  --sf-cat-10: #db2777;
+}
+
+:root[data-skin='neon']:not([data-theme='dark']) .sf-app-shell {
+  background:
+    linear-gradient(rgb(233 244 242 / 0.86), rgb(233 244 242 / 0.86)),
+    var(--sf-page-bg-image, none) center / cover no-repeat,
+    var(--sf-page-bg);
+}
+
+:root[data-skin='neon']:not([data-theme='dark']) .sf-app-shell__submenu {
+  background: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(236 246 244 / 0.95));
+  border-right-color: #c4e1db;
+  box-shadow: none;
+}
+
+:root[data-skin='neon']:not([data-theme='dark']) .sf-btn--outline {
+  background: rgb(255 255 255 / 0.85);
+}
+
+:root[data-theme='dark'][data-skin='neon'] {
+  --sf-page-bg: #010b13;
+  --sf-surface: #011a24;
+  --sf-surface-alt: #01121c;
+  --sf-white: #011a24;
+
+  --sf-border: #1f4144;
+  --sf-border-strong: #2a4852;
+  --sf-text: #e6eef0;
+  --sf-text-muted: #9fb1bb;
+  --sf-text-subtle: #84929f;
+  --sf-label: #e6eef0;
+
+  --sf-accent: #2dd4bf;
+  --sf-accent-hover: #14b8a6;
+  --sf-accent-10: rgb(45 212 191 / 0.12);
+
+  --sf-card-bg: rgb(1 26 36 / 0.86);
+  --sf-card-border: #1f4144;
+  --sf-card-title: #f1f6f7;
+  --sf-card-subtitle: #9fb1bb;
+  --sf-card-muted: #84929f;
+  --sf-card-shadow: 0 0 0 1px rgb(45 212 191 / 0.06), 0 8px 24px rgb(0 0 0 / 0.45);
+  --sf-card-shadow-hover: 0 0 0 1px rgb(45 212 191 / 0.18), 0 10px 28px rgb(0 0 0 / 0.5);
+  --sf-record-item-bg: rgb(4 43 46 / 0.55);
+
+  /* Paneles y ventanas opacos: sobre el fondo de foto un panel translúcido deja ver la página. */
+  --sf-drawer-bg: #011a24;
+  --sf-modal-bg: #011a24;
+  --sf-modal-header-bg: #01121c;
+  --sf-modal-footer-bg: #01121c;
+  --sf-dropdown-bg: #011a24;
+
+  --sf-metric-track: rgb(255 255 255 / 0.1);
+  --sf-gauge-track: rgb(45 212 191 / 0.14);
+
+  --sf-btn-outline-border: #1c4d7a;
+  --sf-btn-outline-text: #e6eef0;
+  --sf-btn-outline-hover-bg: rgb(28 77 122 / 0.55);
+  --sf-avatar-bg: #0d7a65;
+  --sf-avatar-text: #ffffff;
+
+  --sf-app-shell-accent: #04b7ea;
+
+  /* Paleta de categorías saturada para fondo oscuro. */
+  --sf-cat-1: #14caff;
+  --sf-cat-2: #b44cf0;
+  --sf-cat-3: #2ee59d;
+  --sf-cat-4: #ff9f2e;
+  --sf-cat-5: #ffd02e;
+  --sf-cat-6: #3ef07a;
+  --sf-cat-7: #c04cf5;
+  --sf-cat-8: #2aa8ff;
+  --sf-cat-9: #2ec8f0;
+  --sf-cat-10: #ff3fa0;
+
+}
+
+/* Fondo de página: la imagen la pone el host con --sf-page-bg-image (url). */
+:root[data-theme='dark'][data-skin='neon'] .sf-app-shell {
+  background:
+    linear-gradient(rgb(1 11 19 / 0.78), rgb(1 11 19 / 0.78)),
+    var(--sf-page-bg-image, none) center / cover no-repeat,
+    var(--sf-page-bg);
+}
+
+:root[data-theme='dark'][data-skin='neon'] .sf-app-shell__submenu {
+  background: linear-gradient(180deg, rgb(2 22 34 / 0.94), rgb(0 11 16 / 0.9));
+  border-right-color: rgb(42 72 82 / 0.6);
+  box-shadow: none;
+}
+
+:root[data-skin='neon'] .sf-app-shell__submenu-btn--active {
+  background: linear-gradient(90deg, #005bb0, #013c7f);
+  color: #ffffff;
+  box-shadow: inset 0 0 0 1px rgb(20 202 255 / 0.35);
+}
+
+:root[data-skin='neon'] .sf-app-shell__submenu-btn--active .sf-app-shell__submenu-icon {
+  color: #ffffff;
+}
+
+:root[data-skin='neon'] .sf-app-shell__submenu-icon {
+  color: var(--sf-text);
+}
+
+:root[data-skin='neon'] .sf-app-shell__content {
+  background: transparent;
+}
+
+:root[data-theme='dark'][data-skin='neon'] .sf-btn--outline {
+  background: rgb(14 46 74 / 0.85);
+}
+
+:root[data-skin='neon'] .sf-profile-card__status {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid #3ef07a;
+  background: #0b6e3a;
+  color: #ffffff;
+  font-size: 0.875rem;
+}
+
+:root[data-skin='neon'] .sf-profile-card__status .sf-badge-dot {
+  background: #3ef07a;
+}

package/dist/theme/temas.css

@@ -0,0 +1,229 @@
+/**
+ * Temas intercambiables en tiempo de ejecución según el <html>: data-skin="sark|erp|neon" y data-theme="dark".
+ * Carga junto a sark.css, dark.css y neon.css. Sin data-skin nada de este archivo aplica.
+ * El bloque ERP claro repite las variables de erp.css: la prueba temas.test.ts falla si se separan.
+ */
+
+/* —— ERP Systel claro (naranja + navy) —— */
+:root[data-skin='erp']:not([data-theme='dark']) {
+  --sf-primary: rgb(12, 33, 49);
+  --sf-primary-muted: #46555c;
+  --sf-accent: #ec7211;
+  --sf-accent-hover: #d96510;
+  --sf-accent-10: rgb(236 114 17 / 0.1);
+
+  --sf-navy: rgb(12, 33, 49);
+  --sf-navy-muted: #64748b;
+  --sf-green: #ec7211;
+  --sf-green-mid: #d96510;
+
+  --sf-surface: #f1f3f4;
+  --sf-surface-alt: #f8fafc;
+  --sf-page-bg: #f0f4fa;
+
+  --sf-border: #d1d5db;
+  --sf-border-strong: #c7d5ce;
+  --sf-text: #374151;
+  --sf-text-muted: #6b7280;
+  --sf-label: #374151;
+
+  --sf-input-bg: #f8fafc;
+  --sf-input-bg-readonly: #f1f5f9;
+  --sf-input-border: #d1d5db;
+  --sf-input-border-focus: #ec7211;
+  --sf-input-text: #374151;
+  --sf-input-placeholder: #9ca3af;
+  --sf-input-font-size: 13px;
+
+  --sf-ring: rgb(236 114 17 / 0.18);
+  --sf-ring-focus: rgb(236 114 17 / 0.18);
+  --sf-ring-width: 3px;
+  --sf-ring-error: rgb(244 63 94 / 0.15);
+  --sf-input-border-error: #fb7185;
+
+  --sf-danger: #f05a25;
+  --sf-danger-bg: rgb(240 90 37 / 0.1);
+  --sf-row-hover: #f0f7ff;
+  --sf-row-selected: rgb(236 114 17 / 0.06);
+
+  --sf-btn-primary-bg: var(--sf-accent);
+  --sf-btn-primary-hover: var(--sf-accent-hover);
+  --sf-btn-primary-shadow: 0 4px 14px rgb(236 114 17 / 0.3);
+  --sf-btn-primary-shadow-hover: 0 6px 20px rgb(236 114 17 / 0.4);
+  --sf-btn-outline-border: rgb(236 114 17 / 0.4);
+  --sf-btn-outline-text: #ec7211;
+  --sf-btn-outline-hover-bg: rgb(236 114 17 / 0.08);
+
+  --sf-shadow-2: 0 1px 3px rgb(12 33 49 / 0.08), 0 1px 2px rgb(12 33 49 / 0.05);
+  --sf-shadow-4: 0 4px 16px rgb(12 33 49 / 0.08), 0 2px 6px rgb(12 33 49 / 0.04);
+  --sf-shadow-8: 0 10px 32px rgb(12 33 49 / 0.1), 0 4px 10px rgb(12 33 49 / 0.06);
+
+  --sf-modal-overlay: rgb(12 33 49 / 0.45);
+  --sf-card-border: var(--sf-border);
+  --sf-badge-primary-bg: var(--sf-accent);
+  --sf-badge-primary-dot: var(--sf-accent-hover);
+
+  --sf-table-header-bg: var(--sf-primary);
+  --sf-table-header-text: var(--sf-white);
+  --sf-table-header-border: color-mix(in srgb, var(--sf-primary) 82%, var(--sf-white));
+  --sf-modal-header-bg: var(--sf-primary);
+  --sf-modal-header-text: var(--sf-white);
+  --sf-modal-header-subtitle: var(--sf-app-shell-topbar-muted);
+  --sf-modal-header-icon-bg: var(--sf-app-shell-accent);
+  --sf-modal-footer-bg: var(--sf-surface-alt);
+  --sf-record-item-bg: var(--sf-white);
+  --sf-master-detail-panel-bg: var(--sf-white);
+  --sf-filter-bar-bg: var(--sf-white);
+  --sf-expandable-row-bg: var(--sf-white);
+  --sf-itinerary-map-bg: color-mix(in srgb, var(--sf-accent-10) 55%, var(--sf-white));
+  --sf-avatar-accent-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-text: var(--sf-white);
+  --sf-maestro-toolbar-bg: var(--sf-white);
+  --sf-live-status-bg: var(--sf-white);
+  --sf-passenger-onboard-bg: color-mix(in srgb, var(--sf-success) 10%, var(--sf-white));
+}
+
+/* —— Modo oscuro de cada tema: dark.css con el acento propio —— */
+:root[data-theme='dark'][data-skin='erp'] {
+  --sf-accent: #f59a4a;
+  --sf-accent-hover: #ec7211;
+  --sf-accent-10: rgb(245 154 74 / 0.14);
+  --sf-input-border-focus: #f59a4a;
+  --sf-ring: rgb(245 154 74 / 0.28);
+  --sf-ring-focus: rgb(245 154 74 / 0.28);
+  --sf-btn-primary-bg: #f59a4a;
+  --sf-btn-primary-hover: #ec7211;
+  --sf-btn-primary-text: #1b1206;
+  --sf-btn-primary-shadow: 0 4px 14px rgb(245 154 74 / 0.25);
+  --sf-btn-outline-border: rgb(245 154 74 / 0.45);
+  --sf-btn-outline-text: #f59a4a;
+  --sf-btn-outline-hover-bg: rgb(245 154 74 / 0.12);
+  --sf-app-shell-accent: #f59a4a;
+  --sf-avatar-accent-bg: #f59a4a;
+  --sf-app-shell-nav-badge-bg: #f59a4a;
+  --sf-spinner-fill: #f59a4a;
+}
+
+:root[data-theme='dark'][data-skin='sark'] {
+  --sf-accent: #3dba6e;
+  --sf-accent-hover: #2e9e5b;
+  --sf-accent-10: rgb(61 186 110 / 0.14);
+  --sf-input-border-focus: #3dba6e;
+  --sf-ring: rgb(61 186 110 / 0.28);
+  --sf-ring-focus: rgb(61 186 110 / 0.28);
+  --sf-btn-primary-bg: #3dba6e;
+  --sf-btn-primary-hover: #2e9e5b;
+  --sf-btn-primary-text: #06150c;
+  --sf-btn-primary-shadow: 0 4px 14px rgb(61 186 110 / 0.25);
+  --sf-btn-outline-border: rgb(61 186 110 / 0.45);
+  --sf-btn-outline-text: #3dba6e;
+  --sf-btn-outline-hover-bg: rgb(61 186 110 / 0.12);
+  --sf-app-shell-accent: #3dba6e;
+  --sf-spinner-fill: #3dba6e;
+}
+
+/* —— Modo claro con cualquier tema: el texto pintado con un color de categoría se oscurece para leerse sobre
+   blanco (los colores de categoría están pensados para rellenos y para fondo oscuro). —— */
+:root[data-skin]:not([data-theme='dark']) .sf-metric-tile__value {
+  color: color-mix(in srgb, var(--sf-metric-tile-value-color) 62%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-tile--centered .sf-metric-tile__icon,
+:root[data-skin]:not([data-theme='dark']) .sf-metric-row__prefix {
+  filter: none;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-row__prefix {
+  color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 62%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-stage-flow--ring .sf-stage-flow__eyebrow {
+  color: color-mix(in srgb, var(--sf-stage-color) 45%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-state-chain--dot .sf-state-chain__item--current .sf-state-chain__label {
+  color: color-mix(in srgb, var(--sf-state-color) 45%, #0b1f29);
+}
+
+/* Texto de acento y de categoría sobre blanco: verbo del grafo, etiqueta de la dona, numeración de baldosas, fechas. */
+:root[data-skin]:not([data-theme='dark']) .sf-relation-graph--orbit .sf-relation-graph__relation {
+  color: color-mix(in srgb, var(--sf-relation-color) 40%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-donut-gauge__label[style*="--sf-donut-label-color"] {
+  color: color-mix(in srgb, var(--sf-donut-label-color) 48%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-row__tile-icon {
+  border-color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 60%, #0b1f29);
+  color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 48%, #0b1f29);
+}
+
+/* Partes gráficas que deben distinguirse (3:1) sobre blanco: muestras de leyenda, rellenos de barra, puntos y
+   círculos de estado. Sus colores llegan en línea desde quien usa el componente, por eso se oscurecen con filtro. */
+:root[data-skin]:not([data-theme='dark']) .sf-chart-legend__swatch {
+  filter: brightness(0.65) saturate(1.2);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-metric-row__fill,
+:root[data-skin]:not([data-theme='dark']) .sf-timeline__dot--custom {
+  filter: brightness(0.6) saturate(1.2);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-state-chain--ring .sf-state-chain__circle {
+  border-color: color-mix(in srgb, var(--sf-state-color) 62%, #0b1f29);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-state-chain--dot .sf-state-chain__circle {
+  background: color-mix(in srgb, var(--sf-state-color) 58%, #0b1f29);
+}
+
+/* ERP claro: el naranja publicado da 3:1 con texto blanco; en botones y texto de acento va un tono más profundo. */
+:root[data-skin='erp']:not([data-theme='dark']) {
+  --sf-btn-primary-bg: #b35400;
+  --sf-btn-primary-hover: #9a4800;
+  --sf-btn-outline-text: #a94f00;
+  --sf-accent-text: #a94f00;
+  --sf-text-muted: #5f6876;
+}
+
+:root[data-skin='erp']:not([data-theme='dark']) .sf-timeline__time {
+  color: var(--sf-accent-text);
+}
+
+/* Modo oscuro con cualquier tema: el texto pintado con un color de categoría se aclara para leerse sobre el fondo
+   pizarra o negro; el amarillo de advertencia suave y los rellenos de barra también suben de luz. */
+:root[data-skin][data-theme='dark'] .sf-relation-graph--orbit .sf-relation-graph__relation {
+  color: color-mix(in srgb, var(--sf-relation-color) 65%, #ffffff);
+}
+
+:root[data-skin][data-theme='dark'] .sf-stage-flow--ring .sf-stage-flow__eyebrow {
+  color: color-mix(in srgb, var(--sf-stage-color) 70%, #ffffff);
+}
+
+:root[data-skin][data-theme='dark'] .sf-metric-row__prefix {
+  color: color-mix(in srgb, var(--sf-metric-color, var(--sf-accent)) 70%, #ffffff);
+}
+
+:root[data-skin][data-theme='dark'] .sf-badge--warning:not(.sf-badge--solid) {
+  color: #fbbf24;
+}
+
+:root[data-skin][data-theme='dark'] .sf-metric-row__fill {
+  filter: brightness(1.15);
+}
+
+/* Modo claro con cualquier tema: advertencia suave, contador de la campana y avatar sin foto a 4,5:1. */
+:root[data-skin]:not([data-theme='dark']) {
+  --sf-avatar-text: var(--sf-text);
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-badge--warning:not(.sf-badge--solid) {
+  color: #92400e;
+}
+
+:root[data-skin]:not([data-theme='dark']) .sf-notification-bell__badge {
+  background: #15803d;
+  color: #ffffff;
+}