structra-ui 0.1.25 → 0.1.27

package/structra-ui.css

@@ -1,939 +0,0 @@
-@charset "UTF-8";
-/* You can add global styles to this file, and also import other style files */
-@import 'ag-grid-community/styles/ag-grid.css';
-@import 'ag-grid-community/styles/ag-theme-alpine.css';
-@import '@angular/material/prebuilt-themes/indigo-pink.css';
-/**
- * Estilos dos painéis CDK Dialog (`ConfirmDialogService`, `LoadingDialogService` + `libDialogPanelClasses`).
- * Importar uma vez em `styles.scss` (raiz do projecto).
- */
-/**
- * Abertura padrão da lib: fade-in leve do painel + backdrop CDK já faz fade de opacidade;
- * desfoque reforçado no mixin do scrim.
- */
-@keyframes app-lib-dialog-panel-in {
-  from {
-    opacity: 0;
-    transform: translateY(-6px) scale(0.985);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-/**
- * Backdrop do `app-dialog` (modal declarativo).
- * Não animar `opacity` no mesmo nó que `backdrop-filter`: em Chromium o desfoque deixa de
- * amostrar o conteúdo por trás e o scrim parece um painel sólido cinzento/branco.
- */
-@keyframes app-lib-dialog-backdrop-enter {
-  from {
-    backdrop-filter: blur(0);
-    -webkit-backdrop-filter: blur(0);
-  }
-  to {
-    backdrop-filter: blur(10px) saturate(1.05);
-    -webkit-backdrop-filter: blur(10px) saturate(1.05);
-  }
-}
-.cdk-overlay-pane.app-lib-dialog-panel {
-  box-sizing: border-box;
-  border-radius: 10px;
-  border: 1px solid var(--app-color-border-subtle, rgba(26, 47, 69, 0.12));
-  background: var(--app-color-surface, #fff);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 12px 28px -8px rgba(26, 47, 69, 0.18);
-  max-height: min(88vh, 40rem);
-  overflow: auto;
-  outline: none;
-  animation: app-lib-dialog-panel-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .cdk-overlay-pane.app-lib-dialog-panel {
-    animation: none;
-  }
-  .cdk-overlay-backdrop.app-lib-dialog-backdrop {
-    transition: opacity 1ms;
-  }
-}
-/**
- * O `cdk-dialog-container` tem `tabindex="-1"` e pode receber foco (trap / restauro).
- * Sem isto, o browser desenha muitas vezes um contorno preto à volta do painel inteiro.
- */
-.cdk-overlay-pane.app-lib-dialog-panel .cdk-dialog-container {
-  outline: none;
-}
-
-.cdk-overlay-backdrop.app-lib-dialog-backdrop {
-  background: rgba(26, 47, 69, 0.42);
-  backdrop-filter: blur(10px) saturate(1.05);
-  -webkit-backdrop-filter: blur(10px) saturate(1.05);
-  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1), backdrop-filter 380ms ease-out, -webkit-backdrop-filter 380ms ease-out;
-}
-
-.cdk-overlay-backdrop.app-lib-dialog-backdrop:not(.cdk-overlay-backdrop-showing) {
-  backdrop-filter: blur(0);
-  -webkit-backdrop-filter: blur(0);
-}
-
-/**
- * Tokens semânticos globais (`--app-color-*`).
- * Cores de erro/validação são fixas e não devem ser sobrescritas por paletas de tema.
- * Temas (`.app-library-theme.theme-*`) sobrescrevem apenas os tokens não marcados como fixos.
- */
-:root {
-  /* ——— Validação / estado (fixos, independentes do tema) ——— */
-  --app-color-error: #b91c1c;
-  --app-color-error-contrast: #ffffff;
-  --app-color-error-border: #dc2626;
-  --app-color-error-bg-subtle: rgba(185, 28, 28, 0.12);
-  /** Fundo da caixa do input em erro: fixo, não segue o tint da primária do tema. */
-  --app-color-invalid-input-bg: #fef2f2;
-  --app-color-validation-focus-ring: rgba(185, 28, 28, 0.45);
-  --app-color-success: #15803d;
-  --app-color-warning: #c2410c;
-  --app-color-info: #1d4ed8;
-  /* ——— Tema por omissão (azul) ——— */
-  --app-color-primary: #2b7fd9;
-  --app-color-primary-contrast: #ffffff;
-  --app-color-primary-muted: rgba(43, 127, 217, 0.14);
-  --app-color-secondary: #4a6d8c;
-  --app-color-secondary-contrast: #ffffff;
-  --app-color-surface: #ffffff;
-  /** Fundo da caixa flutuante dos inputs: branco com um toque muito claro da primária. */
-  --app-color-surface-alt: color-mix(in srgb, var(--app-color-primary) 7%, #ffffff 93%);
-  --app-color-background: #fafbfc;
-  --app-color-border: #d4d4d4;
-  --app-color-border-strong: #b6cce5;
-  --app-color-border-subtle: rgba(26, 47, 69, 0.09);
-  --app-color-text-primary: #1a2f45;
-  --app-color-text-secondary: #5a7fa3;
-  --app-color-text-muted: #6b8299;
-  --app-color-placeholder: #737373;
-  --app-color-focus-ring: rgba(43, 127, 217, 0.25);
-  --app-color-focus-ring-strong: rgba(43, 127, 217, 0.45);
-  --app-color-disabled-bg: #f5f5f5;
-  --app-color-disabled-text: #737373;
-  --app-color-selected-bg: rgba(43, 127, 217, 0.1);
-  --app-color-selected-border: #2b7fd9;
-  --app-color-hover-bg: rgba(43, 127, 217, 0.08);
-  --app-color-hover-bg-strong: rgba(43, 127, 217, 0.12);
-  --app-color-active-bg: rgba(43, 127, 217, 0.14);
-  /**
-   * Realce das listas dropdown (select / multiselect / combobox): ver `_field-colors.scss`
-   * no selector `:root, .app-library-theme` — têm de viver nesse escopo para o overlay CDK
-   * usar a `--app-color-primary` da paleta activa (`.theme-*`), e não a azul só herdada de `:root`.
-   */
-  /* Tabs / molduras */
-  --app-color-tab-inactive-bg: #f3f6f9;
-  --app-color-tab-inactive-border: rgba(182, 204, 229, 0.75);
-  --app-color-tab-inactive-text: #51667a;
-  --app-color-tab-hover-border: rgba(43, 127, 217, 0.42);
-  --app-color-tab-hover-bg: #eef3f8;
-  --app-color-tab-shadow: rgba(43, 127, 217, 0.14);
-  --app-color-shell-shadow: rgba(26, 47, 69, 0.05);
-  /* Navegação / app shell: ver `_field-colors.scss` (`:root, .app-library-theme`) — color-mix + tema activo. */
-  /* Sombras / grupos */
-  --app-color-elevated-shadow: rgba(43, 127, 217, 0.07);
-  --app-color-group-header-hover: rgba(43, 127, 217, 0.06);
-  /* Readonly (neutro, estável entre temas claros) */
-  --app-color-readonly-bg: #eceff1;
-  --app-color-readonly-border: #b0bec5;
-  --app-color-readonly-border-focus: #78909c;
-  --app-color-readonly-label: #607d8b;
-  --app-color-readonly-label-top: #455a64;
-  --app-color-readonly-prefix: #78909b;
-  --app-color-readonly-input: #37474f;
-  --app-color-readonly-focus-ring: rgba(120, 144, 156, 0.28);
-  --app-color-readonly-button-bg: #cfd8dc;
-  --app-color-readonly-button-border: #90a4ae;
-  --app-color-readonly-button-text: #37474f;
-  --app-color-readonly-button-focus-ring: rgba(96, 125, 139, 0.35);
-  /* Skeleton */
-  --app-color-skeleton-track: rgba(26, 47, 69, 0.09);
-  --app-color-skeleton-track-strong: rgba(26, 47, 69, 0.12);
-  --app-color-skeleton-shine: rgba(255, 255, 255, 0.22);
-  /* Empty state / cartão avatar */
-  --app-color-empty-border: rgba(26, 47, 69, 0.14);
-  --app-color-empty-bg: rgba(243, 246, 249, 0.55);
-  --app-color-avatar-gradient-start: rgba(43, 127, 217, 0.14);
-  --app-color-avatar-gradient-end: rgba(26, 47, 69, 0.06);
-  /* Secondary button hover (claro) */
-  --app-color-button-secondary-hover-bg: #e8f0fa;
-  /* Prefix genérico (float) hover clear — sem vermelho */
-  --app-color-prefix-hover-bg: rgba(90, 127, 163, 0.15);
-  /* Painéis flutuantes (dropdown, etc.) */
-  --app-color-overlay-shadow: rgba(0, 0, 0, 0.12);
-  /**
-   * Empilhamento para componentes montados no `document` (fora do `cdk-overlay-container`).
-   * Resumo de validação **pinned** acima de drawer / shell mobile / diálogo / toast — erros devem
-   * ficar sempre visíveis (ex.: iPhone com menu ou `app-drawer` aberto).
-   */
-  --app-z-drawer-backdrop: 1100;
-  --app-z-drawer-panel: 1101;
-  /**
-   * Container global do CDK Overlay: tem de ficar **acima** do drawer móvel (1101),
-   * senão submenus / listas ligadas ao `document` ficam por baixo do painel lateral.
-   */
-  --app-z-overlay-container: 1120;
-  /** Modal declarativo (`app-dialog`) e painéis CDK Dialog. */
-  --app-z-dialog: 1200;
-  /** Pilha de toasts (canto superior direito). */
-  --app-z-toast: 1300;
-  /** Acima de tudo o que listamos acima (drawer, modal, toast). */
-  --app-z-validation-summary-pinned: 1400;
-}
-
-/**
- * Paletas aplicadas em `.app-library-theme.theme-*`.
- * Não redefinir `--app-color-error*` nem tokens de validação.
- */
-.app-library-theme.theme-green {
-  --app-color-primary: #16a34a;
-  --app-color-surface-alt: color-mix(in srgb, var(--app-color-primary) 7%, #ffffff 93%);
-  --app-color-primary-muted: rgba(22, 163, 74, 0.16);
-  --app-color-secondary: #3d6b4f;
-  --app-color-border-strong: #86cba0;
-  --app-color-focus-ring: rgba(22, 163, 74, 0.28);
-  --app-color-focus-ring-strong: rgba(22, 163, 74, 0.42);
-  --app-color-selected-bg: rgba(22, 163, 74, 0.12);
-  --app-color-selected-border: #16a34a;
-  --app-color-hover-bg: rgba(22, 163, 74, 0.07);
-  --app-color-hover-bg-strong: rgba(22, 163, 74, 0.12);
-  --app-color-active-bg: rgba(22, 163, 74, 0.16);
-  --app-color-tab-hover-border: rgba(22, 163, 74, 0.45);
-  --app-color-tab-shadow: rgba(22, 163, 74, 0.16);
-  --app-color-elevated-shadow: rgba(22, 163, 74, 0.09);
-  --app-color-group-header-hover: rgba(22, 163, 74, 0.07);
-  --app-color-text-secondary: #3f6b52;
-  --app-color-tab-inactive-text: #4a6356;
-  --app-color-tab-hover-bg: #ecfdf3;
-  --app-color-button-secondary-hover-bg: #dff7e8;
-  --app-color-prefix-hover-bg: rgba(63, 107, 82, 0.14);
-  --app-color-avatar-gradient-start: rgba(22, 163, 74, 0.18);
-  --app-color-avatar-gradient-end: rgba(26, 47, 69, 0.06);
-}
-
-.app-library-theme.theme-purple {
-  --app-color-primary: #7c3aed;
-  --app-color-surface-alt: color-mix(in srgb, var(--app-color-primary) 7%, #ffffff 93%);
-  --app-color-primary-muted: rgba(124, 58, 237, 0.16);
-  --app-color-secondary: #5b21b6;
-  --app-color-border-strong: #c4b5fd;
-  --app-color-focus-ring: rgba(124, 58, 237, 0.28);
-  --app-color-focus-ring-strong: rgba(124, 58, 237, 0.42);
-  --app-color-selected-bg: rgba(124, 58, 237, 0.12);
-  --app-color-selected-border: #7c3aed;
-  --app-color-hover-bg: rgba(124, 58, 237, 0.08);
-  --app-color-hover-bg-strong: rgba(124, 58, 237, 0.14);
-  --app-color-active-bg: rgba(124, 58, 237, 0.18);
-  --app-color-tab-hover-border: rgba(124, 58, 237, 0.45);
-  --app-color-tab-shadow: rgba(124, 58, 237, 0.18);
-  --app-color-elevated-shadow: rgba(124, 58, 237, 0.1);
-  --app-color-group-header-hover: rgba(124, 58, 237, 0.08);
-  --app-color-text-secondary: #6d5a9c;
-  --app-color-tab-inactive-text: #5c5678;
-  --app-color-tab-hover-bg: #f5f3ff;
-  --app-color-button-secondary-hover-bg: #ede9fe;
-  --app-color-prefix-hover-bg: rgba(109, 90, 156, 0.14);
-  --app-color-avatar-gradient-start: rgba(124, 58, 237, 0.2);
-  --app-color-avatar-gradient-end: rgba(26, 47, 69, 0.06);
-}
-
-.app-library-theme.theme-orange {
-  --app-color-primary: #ea580c;
-  --app-color-surface-alt: color-mix(in srgb, var(--app-color-primary) 7%, #ffffff 93%);
-  --app-color-primary-muted: rgba(234, 88, 12, 0.16);
-  --app-color-secondary: #9a3412;
-  --app-color-border-strong: #fdba74;
-  --app-color-focus-ring: rgba(234, 88, 12, 0.28);
-  --app-color-focus-ring-strong: rgba(234, 88, 12, 0.42);
-  --app-color-selected-bg: rgba(234, 88, 12, 0.1);
-  --app-color-selected-border: #ea580c;
-  --app-color-hover-bg: rgba(234, 88, 12, 0.07);
-  --app-color-hover-bg-strong: rgba(234, 88, 12, 0.12);
-  --app-color-active-bg: rgba(234, 88, 12, 0.16);
-  --app-color-tab-hover-border: rgba(234, 88, 12, 0.45);
-  --app-color-tab-shadow: rgba(234, 88, 12, 0.16);
-  --app-color-elevated-shadow: rgba(234, 88, 12, 0.09);
-  --app-color-group-header-hover: rgba(234, 88, 12, 0.07);
-  --app-color-text-secondary: #a16207;
-  --app-color-tab-inactive-text: #6b5c4e;
-  --app-color-tab-hover-bg: #fff7ed;
-  --app-color-button-secondary-hover-bg: #ffedd5;
-  --app-color-prefix-hover-bg: rgba(154, 52, 18, 0.12);
-  --app-color-avatar-gradient-start: rgba(234, 88, 12, 0.2);
-  --app-color-avatar-gradient-end: rgba(26, 47, 69, 0.06);
-}
-
-/**
- * Tema «Branco»: UI muito clara, acento cinza-azulado suave (contraste baixo mas legível).
- */
-.app-library-theme.theme-white {
-  --app-color-primary: #64748b;
-  --app-color-primary-contrast: #ffffff;
-  --app-color-primary-muted: rgba(100, 116, 139, 0.14);
-  --app-color-secondary: #475569;
-  --app-color-secondary-contrast: #ffffff;
-  --app-color-surface: #ffffff;
-  --app-color-surface-alt: #f8fafc;
-  --app-color-background: #fcfcfd;
-  --app-color-border: #e2e8f0;
-  --app-color-border-strong: #cbd5e1;
-  --app-color-border-subtle: rgba(71, 85, 105, 0.08);
-  --app-color-text-primary: #1e293b;
-  --app-color-text-secondary: #64748b;
-  --app-color-text-muted: #94a3b8;
-  --app-color-placeholder: #94a3b8;
-  --app-color-focus-ring: rgba(100, 116, 139, 0.28);
-  --app-color-focus-ring-strong: rgba(100, 116, 139, 0.42);
-  --app-color-disabled-bg: #f1f5f9;
-  --app-color-disabled-text: #cbd5e1;
-  --app-color-selected-bg: rgba(100, 116, 139, 0.1);
-  --app-color-selected-border: #64748b;
-  --app-color-hover-bg: rgba(100, 116, 139, 0.06);
-  --app-color-hover-bg-strong: rgba(100, 116, 139, 0.11);
-  --app-color-active-bg: rgba(100, 116, 139, 0.14);
-  --app-color-tab-inactive-bg: #f8fafc;
-  --app-color-tab-inactive-border: #e2e8f0;
-  --app-color-tab-inactive-text: #64748b;
-  --app-color-tab-hover-border: rgba(100, 116, 139, 0.35);
-  --app-color-tab-hover-bg: #f1f5f9;
-  --app-color-tab-shadow: rgba(100, 116, 139, 0.1);
-  --app-color-shell-shadow: rgba(30, 41, 59, 0.05);
-  --app-color-elevated-shadow: rgba(30, 41, 59, 0.07);
-  --app-color-group-header-hover: rgba(100, 116, 139, 0.05);
-  --app-color-readonly-bg: #f1f5f9;
-  --app-color-readonly-border: #cbd5e1;
-  --app-color-readonly-border-focus: #94a3b8;
-  --app-color-readonly-label: #64748b;
-  --app-color-readonly-label-top: #475569;
-  --app-color-readonly-prefix: #94a3b8;
-  --app-color-readonly-input: #334155;
-  --app-color-readonly-focus-ring: rgba(100, 116, 139, 0.28);
-  --app-color-readonly-button-bg: #e2e8f0;
-  --app-color-readonly-button-border: #cbd5e1;
-  --app-color-readonly-button-text: #334155;
-  --app-color-readonly-button-focus-ring: rgba(71, 85, 105, 0.32);
-  --app-color-skeleton-track: rgba(100, 116, 139, 0.08);
-  --app-color-skeleton-track-strong: rgba(100, 116, 139, 0.12);
-  --app-color-skeleton-shine: rgba(255, 255, 255, 0.35);
-  --app-color-empty-border: rgba(100, 116, 139, 0.12);
-  --app-color-empty-bg: rgba(248, 250, 252, 0.9);
-  --app-color-avatar-gradient-start: rgba(100, 116, 139, 0.12);
-  --app-color-avatar-gradient-end: rgba(30, 41, 59, 0.05);
-  --app-color-button-secondary-hover-bg: #e2e8f0;
-  --app-color-prefix-hover-bg: rgba(71, 85, 105, 0.12);
-  --app-color-overlay-shadow: rgba(15, 23, 42, 0.12);
-}
-
-/**
- * Tema «Cinza»: monocromático neutro, acento zinc/slate.
- */
-.app-library-theme.theme-gray {
-  --app-color-primary: #52525b;
-  --app-color-primary-contrast: #ffffff;
-  --app-color-primary-muted: rgba(82, 82, 91, 0.14);
-  --app-color-secondary: #3f3f46;
-  --app-color-secondary-contrast: #ffffff;
-  --app-color-surface: #fafafa;
-  --app-color-surface-alt: #f4f4f5;
-  --app-color-background: #f4f4f5;
-  --app-color-border: #d4d4d8;
-  --app-color-border-strong: #a1a1aa;
-  --app-color-border-subtle: rgba(39, 39, 42, 0.09);
-  --app-color-text-primary: #18181b;
-  --app-color-text-secondary: #52525b;
-  --app-color-text-muted: #71717a;
-  --app-color-placeholder: #a1a1aa;
-  --app-color-focus-ring: rgba(82, 82, 91, 0.28);
-  --app-color-focus-ring-strong: rgba(82, 82, 91, 0.42);
-  --app-color-disabled-bg: #f4f4f5;
-  --app-color-disabled-text: #a1a1aa;
-  --app-color-selected-bg: rgba(82, 82, 91, 0.1);
-  --app-color-selected-border: #52525b;
-  --app-color-hover-bg: rgba(82, 82, 91, 0.07);
-  --app-color-hover-bg-strong: rgba(82, 82, 91, 0.12);
-  --app-color-active-bg: rgba(82, 82, 91, 0.16);
-  --app-color-tab-inactive-bg: #f4f4f5;
-  --app-color-tab-inactive-border: #e4e4e7;
-  --app-color-tab-inactive-text: #52525b;
-  --app-color-tab-hover-border: rgba(82, 82, 91, 0.35);
-  --app-color-tab-hover-bg: #e4e4e7;
-  --app-color-tab-shadow: rgba(24, 24, 27, 0.1);
-  --app-color-shell-shadow: rgba(24, 24, 27, 0.06);
-  --app-color-elevated-shadow: rgba(24, 24, 27, 0.08);
-  --app-color-group-header-hover: rgba(82, 82, 91, 0.06);
-  --app-color-readonly-bg: #e4e4e7;
-  --app-color-readonly-border: #a1a1aa;
-  --app-color-readonly-border-focus: #71717a;
-  --app-color-readonly-label: #52525b;
-  --app-color-readonly-label-top: #3f3f46;
-  --app-color-readonly-prefix: #71717a;
-  --app-color-readonly-input: #27272a;
-  --app-color-readonly-focus-ring: rgba(113, 113, 122, 0.28);
-  --app-color-readonly-button-bg: #d4d4d8;
-  --app-color-readonly-button-border: #a1a1aa;
-  --app-color-readonly-button-text: #27272a;
-  --app-color-readonly-button-focus-ring: rgba(63, 63, 70, 0.32);
-  --app-color-skeleton-track: rgba(82, 82, 91, 0.09);
-  --app-color-skeleton-track-strong: rgba(82, 82, 91, 0.13);
-  --app-color-skeleton-shine: rgba(255, 255, 255, 0.28);
-  --app-color-empty-border: rgba(82, 82, 91, 0.14);
-  --app-color-empty-bg: rgba(244, 244, 245, 0.92);
-  --app-color-avatar-gradient-start: rgba(82, 82, 91, 0.14);
-  --app-color-avatar-gradient-end: rgba(24, 24, 27, 0.06);
-  --app-color-button-secondary-hover-bg: #e4e4e7;
-  --app-color-prefix-hover-bg: rgba(63, 63, 70, 0.12);
-  --app-color-overlay-shadow: rgba(0, 0, 0, 0.16);
-}
-
-/**
- * Tema «Sépia»: papel quente, texto e bordas terrosas.
- */
-.app-library-theme.theme-sepia {
-  --app-color-primary: #8d6e4b;
-  --app-color-primary-contrast: #fffef8;
-  --app-color-primary-muted: rgba(141, 110, 75, 0.18);
-  --app-color-secondary: #6b5344;
-  --app-color-secondary-contrast: #fffef8;
-  --app-color-surface: #fffef8;
-  --app-color-surface-alt: #faf6ed;
-  --app-color-background: #f4efe6;
-  --app-color-border: #e5d9c8;
-  --app-color-border-strong: #cbb89a;
-  --app-color-border-subtle: rgba(61, 48, 40, 0.1);
-  --app-color-text-primary: #3d3428;
-  --app-color-text-secondary: #6b5a48;
-  --app-color-text-muted: #8a7a66;
-  --app-color-placeholder: #a89884;
-  --app-color-focus-ring: rgba(141, 110, 75, 0.35);
-  --app-color-focus-ring-strong: rgba(141, 110, 75, 0.48);
-  --app-color-disabled-bg: #f0ebe3;
-  --app-color-disabled-text: #b5a896;
-  --app-color-selected-bg: rgba(141, 110, 75, 0.12);
-  --app-color-selected-border: #8d6e4b;
-  --app-color-hover-bg: rgba(141, 110, 75, 0.08);
-  --app-color-hover-bg-strong: rgba(141, 110, 75, 0.14);
-  --app-color-active-bg: rgba(141, 110, 75, 0.18);
-  --app-color-tab-inactive-bg: #faf6ed;
-  --app-color-tab-inactive-border: #e8dcc8;
-  --app-color-tab-inactive-text: #6b5a48;
-  --app-color-tab-hover-border: rgba(141, 110, 75, 0.42);
-  --app-color-tab-hover-bg: #f2ebe0;
-  --app-color-tab-shadow: rgba(61, 48, 40, 0.12);
-  --app-color-shell-shadow: rgba(61, 48, 40, 0.07);
-  --app-color-elevated-shadow: rgba(61, 48, 40, 0.1);
-  --app-color-group-header-hover: rgba(141, 110, 75, 0.07);
-  --app-color-readonly-bg: #efe8dc;
-  --app-color-readonly-border: #cbb89a;
-  --app-color-readonly-border-focus: #a89884;
-  --app-color-readonly-label: #6b5a48;
-  --app-color-readonly-label-top: #4a3f35;
-  --app-color-readonly-prefix: #8a7a66;
-  --app-color-readonly-input: #3d3428;
-  --app-color-readonly-focus-ring: rgba(141, 110, 75, 0.32);
-  --app-color-readonly-button-bg: #e5d9c8;
-  --app-color-readonly-button-border: #cbb89a;
-  --app-color-readonly-button-text: #3d3428;
-  --app-color-readonly-button-focus-ring: rgba(107, 90, 72, 0.35);
-  --app-color-skeleton-track: rgba(141, 110, 75, 0.1);
-  --app-color-skeleton-track-strong: rgba(141, 110, 75, 0.14);
-  --app-color-skeleton-shine: rgba(255, 254, 248, 0.45);
-  --app-color-empty-border: rgba(141, 110, 75, 0.18);
-  --app-color-empty-bg: rgba(250, 246, 237, 0.92);
-  --app-color-avatar-gradient-start: rgba(141, 110, 75, 0.16);
-  --app-color-avatar-gradient-end: rgba(61, 48, 40, 0.06);
-  --app-color-button-secondary-hover-bg: #ebe2d4;
-  --app-color-prefix-hover-bg: rgba(107, 90, 72, 0.14);
-  --app-color-overlay-shadow: rgba(45, 35, 28, 0.18);
-}
-
-/**
- * Tema «Preto»: acento quase preto em UI **clara** (superfície branca como nos outros temas).
- * O fundo geral da página / modo escuro fica a cargo do browser (`prefers-color-scheme`), não desta paleta.
- */
-.app-library-theme.theme-black {
-  --app-color-primary: #111827;
-  --app-color-primary-contrast: #ffffff;
-  --app-color-primary-muted: rgba(17, 24, 39, 0.12);
-  --app-color-secondary: #374151;
-  --app-color-secondary-contrast: #ffffff;
-  --app-color-surface: #ffffff;
-  --app-color-surface-alt: color-mix(in srgb, var(--app-color-primary) 7%, #ffffff 93%);
-  --app-color-background: #fafbfc;
-  --app-color-border: #d1d5db;
-  --app-color-border-strong: #9ca3af;
-  --app-color-border-subtle: rgba(17, 24, 39, 0.08);
-  --app-color-text-primary: #111827;
-  --app-color-text-secondary: #4b5563;
-  --app-color-text-muted: #6b7280;
-  --app-color-placeholder: #9ca3af;
-  --app-color-focus-ring: rgba(17, 24, 39, 0.22);
-  --app-color-focus-ring-strong: rgba(17, 24, 39, 0.38);
-  --app-color-disabled-bg: #f3f4f6;
-  --app-color-disabled-text: #9ca3af;
-  --app-color-selected-bg: rgba(17, 24, 39, 0.08);
-  --app-color-selected-border: #111827;
-  --app-color-hover-bg: rgba(17, 24, 39, 0.05);
-  --app-color-hover-bg-strong: rgba(17, 24, 39, 0.1);
-  --app-color-active-bg: rgba(17, 24, 39, 0.14);
-  --app-color-tab-inactive-bg: #f3f4f6;
-  --app-color-tab-inactive-border: #e5e7eb;
-  --app-color-tab-inactive-text: #4b5563;
-  --app-color-tab-hover-border: rgba(17, 24, 39, 0.28);
-  --app-color-tab-hover-bg: #eceff2;
-  --app-color-tab-shadow: rgba(17, 24, 39, 0.1);
-  --app-color-shell-shadow: rgba(17, 24, 39, 0.06);
-  --app-color-elevated-shadow: rgba(17, 24, 39, 0.08);
-  --app-color-group-header-hover: rgba(17, 24, 39, 0.05);
-  --app-color-readonly-bg: #eceff1;
-  --app-color-readonly-border: #b0bec5;
-  --app-color-readonly-border-focus: #78909c;
-  --app-color-readonly-label: #607d8b;
-  --app-color-readonly-label-top: #455a64;
-  --app-color-readonly-prefix: #78909b;
-  --app-color-readonly-input: #37474f;
-  --app-color-readonly-focus-ring: rgba(120, 144, 156, 0.28);
-  --app-color-readonly-button-bg: #cfd8dc;
-  --app-color-readonly-button-border: #90a4ae;
-  --app-color-readonly-button-text: #37474f;
-  --app-color-readonly-button-focus-ring: rgba(96, 125, 139, 0.35);
-  --app-color-skeleton-track: rgba(17, 24, 39, 0.08);
-  --app-color-skeleton-track-strong: rgba(17, 24, 39, 0.11);
-  --app-color-skeleton-shine: rgba(255, 255, 255, 0.22);
-  --app-color-empty-border: rgba(17, 24, 39, 0.12);
-  --app-color-empty-bg: rgba(243, 244, 246, 0.85);
-  --app-color-avatar-gradient-start: rgba(17, 24, 39, 0.12);
-  --app-color-avatar-gradient-end: rgba(17, 24, 39, 0.05);
-  --app-color-button-secondary-hover-bg: #e5e7eb;
-  --app-color-prefix-hover-bg: rgba(75, 85, 99, 0.12);
-  --app-color-overlay-shadow: rgba(0, 0, 0, 0.14);
-}
-
-/**
- * Ponte: tokens de implementação dos campos (`--ui-field-*`) → tokens semânticos (`--app-color-*`).
- * `:root` mantém compatibilidade quando não há `.app-library-theme`; com o host tematizado,
- * `var(--app-color-*)` resolve nos valores herdados do tema activo.
- */
-:root,
-.app-library-theme {
-  --ui-field-float-bg: var(--app-color-surface-alt);
-  --ui-field-float-border: var(--app-color-border-strong);
-  --ui-field-float-border-focus: var(--app-color-primary);
-  --ui-field-float-border-radius: 14px;
-  --ui-field-float-label-color: var(--app-color-text-secondary);
-  --ui-field-float-label-top-color: var(--app-color-secondary);
-  --ui-field-float-label-invalid-color: var(--app-color-error);
-  --ui-field-float-input-text: var(--app-color-text-primary);
-  --ui-field-float-prefix-color: var(--app-color-text-secondary);
-  --ui-field-float-focus-ring: var(--app-color-focus-ring);
-  /**
-   * Listas dropdown (overlay CDK): `color-mix` com primária/texto aqui para resolver no mesmo
-   * elemento que `.app-library-theme.theme-*` (evita realce azul quando o tema é roxo, verde, …).
-   */
-  --app-color-dropdown-option-selected-bg: color-mix(in srgb, var(--app-color-primary) 12%, #ffffff 88%);
-  --app-color-dropdown-option-selected-bg-active: color-mix(
-    in srgb,
-    var(--app-color-primary) 18%,
-    #ffffff 82%
-  );
-  --app-color-dropdown-option-selected-hover-bg: color-mix(
-    in srgb,
-    var(--app-color-primary) 16%,
-    #ffffff 84%
-  );
-  /**
-   * Navegação por setas / hover: mais tint da primária que o fundo do painel (`surface-alt` ~7%)
-   * para o realce ser claramente visível sobre `--ui-field-float-bg`.
-   */
-  --app-color-dropdown-option-highlight-bg: color-mix(in srgb, var(--app-color-primary) 16%, #ffffff 84%);
-  --app-color-dropdown-option-hover-bg: color-mix(in srgb, var(--app-color-primary) 13%, #ffffff 87%);
-  --ui-field-input-border: var(--app-color-border);
-  --ui-field-input-border-radius: 6px;
-  --ui-field-input-bg: var(--app-color-surface);
-  --ui-field-input-color: var(--app-color-text-primary);
-  --ui-field-input-placeholder: var(--app-color-placeholder);
-  --ui-field-input-focus-ring: var(--app-color-primary);
-  --ui-field-input-focus-ring-width: 2px;
-  --ui-field-input-invalid-border: var(--app-color-error-border);
-  --ui-field-input-invalid-placeholder: var(--app-color-error);
-  --ui-field-input-invalid-focus-ring: var(--app-color-error);
-  --ui-field-input-invalid-focus-halo: var(--app-color-error-bg-subtle);
-  --ui-field-invalid-input-bg: var(--app-color-invalid-input-bg);
-  --ui-field-input-disabled-bg: var(--app-color-disabled-bg);
-  --ui-field-input-disabled-opacity: 0.65;
-  --ui-field-label-color: var(--app-color-text-primary);
-  --ui-field-required-mark-color: var(--app-color-error);
-  --ui-field-error-text-color: var(--app-color-error);
-  --ui-field-datepicker-selected-bg: var(--app-color-primary);
-  --ui-field-datepicker-selected-fg: var(--app-color-primary-contrast);
-  --ui-field-datepicker-today-outline: var(--app-color-primary);
-  --ui-field-datepicker-nav-icon: var(--app-color-primary);
-  --ui-field-datepicker-period-icon: var(--app-color-secondary);
-  --ui-field-datepicker-hover-bg: var(--app-color-hover-bg-strong);
-  --ui-field-datepicker-focus-bg: var(--app-color-hover-bg-strong);
-  --ui-field-readonly-bg: var(--app-color-readonly-bg);
-  --ui-field-readonly-border: var(--app-color-readonly-border);
-  --ui-field-readonly-border-focus: var(--app-color-readonly-border-focus);
-  --ui-field-readonly-label-color: var(--app-color-readonly-label);
-  --ui-field-readonly-label-top-color: var(--app-color-readonly-label-top);
-  --ui-field-readonly-prefix-color: var(--app-color-readonly-prefix);
-  --ui-field-readonly-input-text: var(--app-color-readonly-input);
-  --ui-field-readonly-focus-ring: var(--app-color-readonly-focus-ring);
-  --ui-field-readonly-button-bg: var(--app-color-readonly-button-bg);
-  --ui-field-readonly-button-border: var(--app-color-readonly-button-border);
-  --ui-field-readonly-button-text: var(--app-color-readonly-button-text);
-  --ui-field-readonly-button-focus-ring: var(--app-color-readonly-button-focus-ring);
-  --ui-form-actions-divider-color: var(--app-color-border);
-  --ui-form-group-chevron-locked: var(--app-color-text-muted);
-  /**
-   * App shell / sidebar / docs: fundo branco como a área principal; o acento fica só no item
-   * selecionado/hover (tokens `--app-color-nav-*` / primária). Igual ao drawer mobile.
-   */
-  --app-color-nav-shell-bg: var(--app-color-surface);
-  --app-color-nav-surface: #ffffff;
-  --app-color-nav-card-border: color-mix(in srgb, var(--app-color-primary) 32%, #ffffff);
-  --app-color-nav-border-subtle: color-mix(in srgb, var(--app-color-primary) 18%, #ffffff);
-  --app-color-nav-group-label: var(--app-color-text-muted);
-  --app-color-nav-item-text: var(--app-color-text-primary);
-  --app-color-nav-icon: var(--app-color-text-secondary);
-  --app-color-nav-selected-bg: var(--app-color-selected-bg);
-  --app-color-nav-selected-border: var(--app-color-selected-border);
-  --app-color-nav-selected-text: var(--app-color-primary);
-  --app-color-nav-hover-bg: var(--app-color-hover-bg);
-  --app-color-nav-link: var(--app-color-primary);
-  --app-color-nav-focus-ring: var(--app-color-focus-ring-strong);
-  --app-color-shell-main-bg: var(--app-color-surface);
-}
-
-/**
- * Tema do overlay do `MatDatepicker` alinhado às variáveis `--ui-field-*`.
- * O `panelClass` do Angular Material é aplicado no host `mat-calendar`.
- */
-.mat-calendar.ui-field-datepicker-panel {
-  --mat-datepicker-calendar-date-selected-state-text-color: var(
-    --ui-field-datepicker-selected-fg
-  );
-  --mat-datepicker-calendar-date-selected-state-background-color: var(
-    --ui-field-datepicker-selected-bg
-  );
-  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(
-    in srgb,
-    var(--ui-field-datepicker-selected-bg) 45%,
-    transparent
-  );
-  --mat-datepicker-calendar-date-today-outline-color: var(--ui-field-datepicker-today-outline);
-  --mat-datepicker-calendar-date-today-disabled-state-outline-color: var(
-    --ui-field-float-border
-  );
-  --mat-datepicker-calendar-date-today-selected-state-outline-color: var(
-    --ui-field-datepicker-selected-fg
-  );
-  --mat-datepicker-calendar-date-focus-state-background-color: var(
-    --ui-field-datepicker-focus-bg
-  );
-  --mat-datepicker-calendar-date-hover-state-background-color: var(
-    --ui-field-datepicker-hover-bg
-  );
-  --mat-datepicker-calendar-navigation-button-icon-color: var(--ui-field-datepicker-nav-icon);
-  --mat-datepicker-calendar-period-button-icon-color: var(--ui-field-datepicker-period-icon);
-  --mat-datepicker-calendar-toggle-active-state-icon-color: var(--ui-field-datepicker-nav-icon);
-  --mat-datepicker-calendar-date-in-range-state-background-color: var(
-    --ui-field-datepicker-hover-bg
-  );
-}
-.mat-calendar.ui-field-datepicker-panel .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
-  --mat-icon-button-icon-color: var(--ui-field-datepicker-nav-icon);
-  --mat-icon-button-state-layer-color: var(--ui-field-datepicker-nav-icon);
-}
-
-/**
- * Superfície única de navegação (documentação + demo App shell):
- * brand, scroll, seções, links e `app-menu-list` sem cartão duplicado.
- */
-.app-nav-surface {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  box-sizing: border-box;
-}
-
-.app-nav-surface__brand {
-  flex: 0 0 auto;
-  display: block;
-  margin: 0 0 1rem;
-  font-size: 0.95rem;
-  font-weight: 700;
-  line-height: 1.3;
-  color: var(--app-color-text-primary, #1a2f45);
-  text-decoration: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.app-nav-surface__brand:hover {
-  color: var(--app-color-nav-link);
-}
-
-.app-nav-surface__scroll {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 0.15rem 0 0.35rem;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  box-sizing: border-box;
-}
-
-.app-nav-surface__section {
-  flex: 0 0 auto;
-  min-width: 0;
-  margin: 0;
-  padding: 0.75rem 0 0.5rem;
-  border-top: 1px solid var(--app-color-border-subtle, rgba(26, 47, 69, 0.08));
-}
-.app-nav-surface__section:first-of-type {
-  border-top: none;
-  padding-top: 0.35rem;
-}
-
-.app-nav-surface__section-title {
-  margin: 0 0 0.5rem;
-  padding: 0 0.1rem;
-  font-size: 0.74rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: none;
-  color: var(--app-color-text-secondary, #5a7fa3);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.app-nav-surface__list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.app-nav-surface__list li + li {
-  margin-top: 0.08rem;
-}
-
-.app-nav-surface__link {
-  display: block;
-  box-sizing: border-box;
-  padding: 0.52rem 0.55rem;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  font-size: 0.93rem;
-  color: var(--app-color-text-primary, #1a2f45);
-  text-decoration: none;
-  line-height: 1.35;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.app-nav-surface__link:hover {
-  background: var(--app-color-nav-hover-bg);
-  color: var(--app-color-nav-selected-text);
-}
-.app-nav-surface__link:focus-visible {
-  outline: 2px solid var(--app-color-nav-focus-ring);
-  outline-offset: 1px;
-}
-
-.app-nav-surface__link--active {
-  font-weight: 600;
-  color: var(--app-color-primary, #2b7fd9);
-  background: color-mix(in srgb, var(--app-color-primary) 9%, transparent);
-  border: 1px solid transparent;
-  box-shadow: inset 3px 0 0 0 var(--app-color-primary, #2b7fd9);
-}
-
-/* `app-menu-list` na shell: mesma linguagem, sem cartão nem sombra de dropdown. */
-.app-nav-surface app-menu-list .menu-list {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  max-height: none;
-  overflow-x: hidden;
-  overflow-y: visible;
-  padding: 0.15rem 0 0.35rem;
-  gap: 0.08rem;
-}
-
-.app-nav-surface app-menu-list .menu-list--dense {
-  padding: 0.12rem 0;
-  gap: 0;
-}
-
-.app-nav-surface app-menu-list .menu-list__group-label {
-  font-size: 0.74rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: none;
-  color: var(--app-color-text-secondary, #5a7fa3);
-  padding: 0.75rem 0.55rem 0.5rem;
-  margin-top: 0.35rem;
-  border-top: 1px solid var(--app-color-border-subtle, rgba(26, 47, 69, 0.08));
-}
-
-.app-nav-surface app-menu-list .menu-list > app-menu-group:first-of-type .menu-list__group-label {
-  margin-top: 0;
-  padding-top: 0.35rem;
-  border-top: none;
-}
-
-.app-nav-surface app-menu-list .menu-list__label {
-  color: var(--app-color-nav-item-text);
-}
-
-.app-nav-surface app-menu-list .menu-list__icon {
-  color: var(--app-color-nav-icon);
-}
-
-.app-nav-surface app-menu-list .menu-list__submenu-chevron {
-  color: var(--app-color-nav-icon);
-}
-
-.app-nav-surface app-menu-list .menu-list__option:hover:not(.menu-list__option--disabled):not(.menu-list__option--loading) {
-  background: var(--app-color-nav-hover-bg);
-}
-
-.app-nav-surface app-menu-list .menu-list__option.menu-list__option--active:not(.menu-list__option--selected):not(.menu-list__option--disabled):not(.menu-list__option--loading) {
-  background: var(--app-color-nav-hover-bg);
-  border-color: transparent;
-  box-shadow: none;
-}
-
-.app-nav-surface app-menu-list .menu-list__option--selected:not(.menu-list__option--disabled) {
-  background: color-mix(in srgb, var(--app-color-primary) 9%, transparent);
-  box-shadow: inset 3px 0 0 0 var(--app-color-primary, #2b7fd9);
-  border-radius: 8px;
-  border: 1px solid transparent;
-}
-
-.app-nav-surface app-menu-list .menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__label {
-  color: var(--app-color-primary, #2b7fd9);
-  font-weight: 600;
-}
-
-.app-nav-surface app-menu-list .menu-list__option--selected:not(.menu-list__option--disabled) .menu-list__icon {
-  color: var(--app-color-primary, #2b7fd9);
-}
-
-.app-nav-surface app-menu-list .menu-list__option:focus-visible {
-  outline: 2px solid var(--app-color-nav-focus-ring);
-  outline-offset: 1px;
-}
-
-/* Demo / shell com texto comprimido: ícones centrados, sem “caixa” permanente. */
-.app-nav-surface app-menu-list .menu-list--compress-text {
-  gap: 0.1rem;
-}
-
-.app-nav-surface app-menu-list .menu-list--compress-text .menu-list__option {
-  border-radius: 8px;
-  border-color: transparent;
-}
-
-.app-nav-surface app-menu-list .menu-list--compress-text .menu-list__option.menu-list__option--active:not(.menu-list__option--selected):not(.menu-list__option--disabled):not(.menu-list__option--loading) {
-  background: color-mix(in srgb, var(--app-color-primary) 5%, transparent);
-  border-color: transparent;
-  box-shadow: none;
-}
-
-@media (max-width: 52rem) {
-  .app-nav-surface__brand {
-    margin: 0.25rem 0 0.85rem;
-    font-size: 1.08rem;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-  }
-}
-/**
- * O tema Material define `z-index: 1000` no `.cdk-overlay-container`, abaixo do drawer
- * (`--app-z-drawer-panel`: 1101) — submenus de `app-menu-list` deixavam de ser visíveis no telemóvel.
- */
-.cdk-overlay-container {
-  z-index: var(--app-z-overlay-container, 1120);
-}
-
-/**
- * Painéis CDK com tema da lib: o fundo real fica no conteúdo (popover, dropdown, …).
- * Sem `transparent` no wrapper, o flex do `.cdk-overlay-pane` pode mostrar branco por baixo
- * e parecer «fora do tema» face ao resto da página.
- */
-.cdk-overlay-container .cdk-overlay-pane.app-library-theme:not(.app-lib-dialog-panel) {
-  background: transparent;
-  color: var(--app-color-text-primary, inherit);
-}
-
-/* Cadeia de altura: scroll só dentro do app (ex.: docs `main`, home), não no `body`. */
-html {
-  height: 100%;
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  background-color: #ffffff;
-}
-
-body {
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-/**
- * Bloqueio de scroll (CDK BlockScrollStrategy + `app-dialog`).
- * `overflow-y: scroll` no `html` foi removido — forçava barra no viewport.
- */
-html.cdk-global-scrollblock {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  min-height: 100%;
-  min-height: 100dvh;
-  overflow: hidden;
-  overscroll-behavior: none;
-}
-
-html.cdk-global-scrollblock body {
-  overflow: hidden !important;
-}
-
-/**
- * Áreas com scroll próprio (ex.: doc) — corta scroll de fundo.
- */
-html.cdk-global-scrollblock [data-app-scroll-lock] {
-  overflow: hidden !important;
-  overscroll-behavior: none;
-}
-
-/**
- * Bloqueio de scroll do `app-dialog` declarativo ({@link lockPageScrollAppDialog}): sem mover o
- * `html` com `position: fixed` + `left`/`top` negativos, para o scrim `position: fixed` alinhar ao
- * viewport real (ver comentário no util).
- */
-html.app-dialog-scroll-lock {
-  overflow: hidden !important;
-  overscroll-behavior: none;
-}
-
-html.app-dialog-scroll-lock body {
-  overflow: hidden !important;
-  overscroll-behavior: none;
-}