/* Tema do Compras CCB: fonte única do visual do app (change radzen-native-ui, D2).
   Mundo visual: fichário Kardex de almoxarifado. Trilho, cabeçalho e menu inferior são o aço do arquivo; o conteúdo é a
   gaveta, com fichas de índice em cartão frio; o estado de cada requisição é um cavaleiro de sinal colorido.
   A cor tem dois donos e mais nenhum: o estado (cavaleiros --st-*) e a ação principal (tinta azul --accent).
   Claro e escuro são só a troca dos tokens em [data-theme="dark"]. Todo derivado é oklch() explícito: misturar uma
   cor com um acromático em color-mix() faz o matiz do branco valer 0° e o resultado sai rosa. */

/* ─── Fontes (servidas pelo app: a CSP só aceita font-src 'self') ─────────────── */
/* Archivo (Omnibus-Type, OFL): grotesca de trabalho com eixo de largura; a largura estreita faz as etiquetas de gaveta.
   Courier Prime (OFL): a máquina de escrever das fichas, só para protocolo e códigos (SIGA, AUX, documento). Datas,
   quantidades e contagens ficam na Archivo, com números tabulares. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-wdth.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face { font-family: 'Courier Prime'; src: url('../fonts/courier-prime-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('../fonts/courier-prime-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* Material Symbols: os ícones são os do Radzen (--rz-icon-font-family), mas servidos daqui. A face do pacote tem
   1,02 MB (fonte variável com os ~3.200 ícones do catálogo) e vinha sem font-display, então os ícones ficavam
   invisíveis por até 3 s e depois apareciam como a ligadura crua ("grid_view") no trilho de aço.
   Este subset tem só os 122 ícones que o app e o Radzen usam, com os eixos fixos na instância padrão: 10,8 kB.
   Esta declaração vem depois da do material-base.css e, com a mesma família e o mesmo intervalo de peso, vence
   o casamento, então a face de 1 MB nunca é baixada.
   Regerar (a lista está em fonts/material-symbols-icons.txt):
   https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=<lista> */
@font-face {
  font-family: 'Material Symbols';
  src: url('../fonts/material-symbols-subset.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

/* ─── Tokens ──────────────────────────────────────────────────────────────────── */
:root {
  /* Gaveta e ficha: fundo cinza-esverdeado frio, ficha de índice quase branca. */
  --bg:      oklch(94.6% 0.007 165);
  --surface: oklch(99.4% 0.002 165);
  --fg:      oklch(21% 0.012 165);
  --muted:   oklch(45% 0.012 165);
  --border:  oklch(87.5% 0.009 165);
  /* Fio do campo: o campo tem o mesmo fundo da ficha e do diálogo em que está, então o fio de 1 px é a única
     coisa que diz onde o campo começa. Com --border ele ficava em 1,4:1 e reprovava a WCAG 1.4.11 (3:1 para o
     que identifica um controle). É o mesmo cinza-esverdeado, só com tinta suficiente para se ver. */
  --border-input: oklch(61% 0.014 165);
  /* Pauta da ficha de índice: o fio azul-acinzentado que sublinha títulos de ficha. */
  --rule:    oklch(80% 0.040 240);
  /* Pauta leve da ficha de índice: fio azul a cada 28 px, bem apagado, atrás do texto. */
  --pauta: repeating-linear-gradient(to bottom, transparent 0 27px, oklch(80% 0.040 240 / 0.20) 27px 28px);
  /* Bandeja da gaveta: onde as fichas ficam em pé. */
  --tray:    oklch(91% 0.009 165);

  /* Aço grafite neutro no tema claro: acompanha a logo monocromática na moldura do app. */
  --steel:        oklch(29% 0 0);
  --steel-raised: oklch(35% 0 0);
  --steel-line:   oklch(40% 0 0);
  --steel-ink:    oklch(96% 0 0);
  --steel-muted:  oklch(76% 0 0);
  /* Etiqueta de gaveta: o cartão claro no porta-etiqueta de metal (item ativo do trilho). */
  --insert:       oklch(97.5% 0.004 165);
  --insert-ink:   oklch(20% 0.012 165);

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Courier Prime', 'Courier New', ui-monospace, monospace;

  /* Tinta azul: só a ação principal, a seleção e o pedido em rascunho. */
  --accent:             oklch(43% 0.135 258);
  --accent-solid:       oklch(42% 0.135 258);
  --accent-solid-hover: oklch(34% 0.120 258);
  --on-accent:          oklch(99% 0.004 258);
  --on-accent-soft:     oklch(86% 0.045 258);
  --accent-soft:        oklch(95.5% 0.020 258);
  --accent-line:        oklch(82% 0.060 258);
  --fg-soft:            oklch(92.5% 0.007 165);
  --fg-softer:          oklch(96.8% 0.004 165);
  --tile:               oklch(93% 0.006 165);
  /* Apagado de verdade (controle desabilitado, que a WCAG isenta) e apagado que ainda é texto lido ("sem foto"):
     são dois tons, porque o segundo precisa dos 4,5:1 sobre a ficha e sobre o ladrilho. */
  --disabled-ink:       oklch(70% 0.008 165);
  --faint-ink:          oklch(52% 0.010 165);
  /* Trilho do switch desligado: precisa de 3:1 contra a ficha e contra a própria bolinha (WCAG 1.4.11),
     senão o estado "desligado" não se distingue de um campo vazio. */
  --toggle-off:         oklch(63% 0.014 165);
  /* Profundidade física: só a ficha puxada da gaveta e as folhas que sobem sobem com sombra. */
  /* Bandeja: o fundo rebaixado onde as fichas ficam em pé. Era o mesmo valor repetido em três telas e não
     escurecia no tema escuro, ao contrário das outras sombras. */
  --shadow-tray:        inset 0 1px 3px oklch(0% 0 0 / 0.10);
  --shadow-lift:        0 1px 1px oklch(21% 0.02 165 / 0.08), 0 8px 18px -6px oklch(21% 0.02 165 / 0.22);
  --shadow-sheet:       0 -2px 6px oklch(21% 0.02 165 / 0.08), 0 -18px 44px oklch(21% 0.02 165 / 0.16);
  --shadow-frame:       0 1px 2px oklch(21% 0.02 165 / 0.06), 0 14px 38px oklch(21% 0.02 165 / 0.10);

  /* Cavaleiros de sinal: tinta, fundo e fio de cada estado. Enviada âmbar, pronta verde, concluída grafite,
     devolvida violeta (volta para a casa), recusada e atraso vermelho. */
  --st-enviada:          oklch(47% 0.110 70);
  --st-enviada-tint:     oklch(96% 0.040 85);
  --st-enviada-line:     oklch(82% 0.100 80);
  --st-enviada-rider:    oklch(65% 0.150 78);
  --st-separacao:        oklch(47% 0.110 70);
  --st-separacao-tint:   oklch(96% 0.040 85);
  --st-separacao-line:   oklch(82% 0.100 80);
  --st-pronta:           oklch(43% 0.110 152);
  --st-pronta-tint:      oklch(95.5% 0.035 152);
  --st-pronta-line:      oklch(80% 0.080 152);
  --st-pronta-rider:     oklch(62% 0.150 150);
  --st-retirada:         oklch(40% 0.010 165);
  --st-retirada-tint:    oklch(94% 0.005 165);
  --st-retirada-line:    oklch(82% 0.010 165);
  --st-retirada-rider:   oklch(38% 0.012 165);
  --st-devolvida:        oklch(45% 0.140 305);
  --st-devolvida-tint:   oklch(95.5% 0.030 305);
  --st-devolvida-line:   oklch(81% 0.080 305);
  --st-devolvida-rider:  oklch(56% 0.170 305);
  --st-atraso:           oklch(47% 0.165 27);
  --st-atraso-tint:      oklch(95.5% 0.028 27);
  --st-atraso-line:      oklch(82% 0.080 27);
  --st-atraso-rider:     oklch(57% 0.190 27);
  /* Só na limpeza: aprovada em verde-azulado (avaliada, entra no agrupamento) e em cotação em magenta (agrupada e
     travada). Os dois matizes que sobravam longe do âmbar, do verde, do violeta, do vermelho e do azul da ação. */
  --st-approved:         oklch(44% 0.080 195);
  --st-approved-tint:    oklch(95.5% 0.025 195);
  --st-approved-line:    oklch(80% 0.060 195);
  --st-approved-rider:   oklch(58% 0.110 195);
  --st-quoting:          oklch(46% 0.150 350);
  --st-quoting-tint:     oklch(95.5% 0.028 350);
  --st-quoting-line:     oklch(81% 0.075 350);
  --st-quoting-rider:    oklch(58% 0.180 350);

  /* Tinta de nota (DOP, dicas): nunca compete com o destaque. */
  --note-ink:  oklch(42% 0.010 165);
  --note-line: oklch(72% 0.012 165);
}

[data-theme="dark"] {
  --bg:      oklch(19% 0.009 170);
  --surface: oklch(23.5% 0.010 170);
  --fg:      oklch(95% 0.006 170);
  --muted:   oklch(73% 0.012 170);
  --border:  oklch(33% 0.012 170);
  --border-input: oklch(53% 0.014 170);
  --rule:    oklch(46% 0.050 240);
  --pauta:   repeating-linear-gradient(to bottom, transparent 0 27px, oklch(46% 0.050 240 / 0.28) 27px 28px);
  --tray:    oklch(16.5% 0.009 170);

  --steel:        oklch(14.5% 0.012 170);
  --steel-raised: oklch(22% 0.014 170);
  --steel-line:   oklch(27% 0.014 170);
  --steel-ink:    oklch(94% 0.006 170);
  --steel-muted:  oklch(70% 0.014 170);
  --insert:       oklch(90% 0.008 165);
  --insert-ink:   oklch(17% 0.012 165);

  --accent:             oklch(74% 0.110 258);
  --accent-solid:       oklch(74% 0.110 258);
  --accent-solid-hover: oklch(83% 0.085 258);
  --on-accent:          oklch(17% 0.030 258);
  --on-accent-soft:     oklch(30% 0.060 258);
  --accent-soft:        oklch(29% 0.050 258);
  --accent-line:        oklch(46% 0.080 258);
  --fg-soft:            oklch(29% 0.011 170);
  --fg-softer:          oklch(26% 0.010 170);
  --tile:               oklch(30% 0.010 170);
  --disabled-ink:       oklch(46% 0.010 170);
  --faint-ink:          oklch(66% 0.012 170);
  --toggle-off:         oklch(53% 0.012 170);
  --shadow-tray:        inset 0 1px 3px oklch(0% 0 0 / 0.40);
  --shadow-lift:        0 1px 1px oklch(0% 0 0 / 0.35), 0 10px 22px -6px oklch(0% 0 0 / 0.55);
  --shadow-sheet:       0 -2px 6px oklch(0% 0 0 / 0.3), 0 -18px 44px oklch(0% 0 0 / 0.45);
  --shadow-frame:       0 1px 2px oklch(0% 0 0 / 0.3), 0 14px 38px oklch(0% 0 0 / 0.35);

  --st-enviada:          oklch(84% 0.120 82);
  --st-enviada-tint:     oklch(30% 0.050 75);
  --st-enviada-line:     oklch(45% 0.080 75);
  --st-enviada-rider:    oklch(80% 0.150 80);
  --st-separacao:        oklch(84% 0.120 82);
  --st-separacao-tint:   oklch(30% 0.050 75);
  --st-separacao-line:   oklch(45% 0.080 75);
  --st-pronta:           oklch(82% 0.120 152);
  --st-pronta-tint:      oklch(29% 0.045 152);
  --st-pronta-line:      oklch(43% 0.070 152);
  --st-pronta-rider:     oklch(70% 0.150 150);
  --st-retirada:         oklch(78% 0.010 170);
  --st-retirada-tint:    oklch(28% 0.008 170);
  --st-retirada-line:    oklch(40% 0.010 170);
  --st-retirada-rider:   oklch(66% 0.010 170);
  --st-devolvida:        oklch(82% 0.090 305);
  --st-devolvida-tint:   oklch(30% 0.060 305);
  --st-devolvida-line:   oklch(45% 0.090 305);
  --st-devolvida-rider:  oklch(68% 0.150 305);
  --st-atraso:           oklch(80% 0.120 27);
  --st-atraso-tint:      oklch(30% 0.060 27);
  --st-atraso-line:      oklch(45% 0.090 27);
  --st-atraso-rider:     oklch(66% 0.170 27);
  --st-approved:         oklch(82% 0.080 195);
  --st-approved-tint:    oklch(29% 0.040 195);
  --st-approved-line:    oklch(43% 0.060 195);
  --st-approved-rider:   oklch(70% 0.110 195);
  --st-quoting:          oklch(82% 0.090 350);
  --st-quoting-tint:     oklch(30% 0.055 350);
  --st-quoting-line:     oklch(45% 0.085 350);
  --st-quoting-rider:    oklch(68% 0.150 350);

  --note-ink:  oklch(78% 0.008 170);
  --note-line: oklch(46% 0.010 170);
}

/* O aço (trilho, cabeçalho e menu inferior) é outra superfície: os tokens de texto e fio mudam dentro dele, e a ligação
   com o Radzen logo abaixo é repetida nesses blocos para que os componentes de dentro leiam os tokens do aço.
   Tokens com var() são resolvidos onde são declarados, por isso a ligação não herda sozinha. */
.rz-sidebar, .rz-header, .rz-footer {
  --fg: var(--steel-ink);
  --muted: var(--steel-muted);
  --border: var(--steel-line);
  --surface: var(--steel);
  --fg-soft: var(--steel-raised);
  --fg-softer: var(--steel-raised);
  --accent: var(--steel-ink);
  --note-ink: var(--steel-muted);
  --note-line: var(--steel-muted);
  color: var(--steel-ink);
}

/* ─── Ligação com o Radzen ─────────────────────────────────────────────────── */
:root, [data-theme="dark"], .rz-sidebar, .rz-header, .rz-footer {
  --rz-primary: var(--accent-solid);
  --rz-primary-light: var(--accent-soft);
  --rz-primary-lighter: var(--accent-soft);
  --rz-on-primary: var(--on-accent);
  --rz-text-color: var(--fg);
  --rz-text-secondary-color: var(--muted);
  --rz-body-background-color: var(--bg);
  --rz-base-background-color: var(--surface);
  --rz-base-50: var(--fg-softer);
  --rz-base-100: var(--fg-soft);
  --rz-base-200: var(--border);
  --rz-base-300: var(--border);
  /* 400 e 600 faltavam na escala: o 600 alimenta --rz-text-tertiary-color (resumo e tamanho de página do pager,
     entre outras 25 regras) e ficava no cinza #757575 do Material, que reprova no escuro. O 400 é o texto
     desabilitado, que a WCAG isenta e por isso pode continuar apagado. */
  --rz-base-400: var(--disabled-ink);
  --rz-base-500: var(--muted);
  --rz-base-600: var(--muted);
  --rz-base-700: var(--fg);
  --rz-base-800: var(--fg);
  --rz-base-900: var(--fg);
  --rz-border: 1px solid var(--border);
  --rz-border-radius: 6px;
  --rz-font-family: var(--font-body);

  --rz-info: var(--accent-solid);
  --rz-info-light: var(--accent-line);
  --rz-info-lighter: var(--accent-soft);
  --rz-info-dark: var(--accent-solid-hover);
  --rz-info-darker: var(--accent-solid-hover);
  --rz-on-info: var(--on-accent);
  --rz-success: var(--st-pronta);
  --rz-success-light: var(--st-pronta-line);
  --rz-success-lighter: var(--st-pronta-tint);
  --rz-success-dark: var(--st-pronta);
  --rz-success-darker: var(--st-pronta);
  --rz-on-success: var(--surface);
  --rz-warning: var(--st-enviada);
  --rz-warning-light: var(--st-enviada-line);
  --rz-warning-lighter: var(--st-enviada-tint);
  --rz-warning-dark: var(--st-enviada);
  --rz-warning-darker: var(--st-enviada);
  --rz-on-warning: var(--surface);
  --rz-danger: var(--st-atraso);
  --rz-danger-light: var(--st-atraso-line);
  --rz-danger-lighter: var(--st-atraso-tint);
  --rz-danger-dark: var(--st-atraso);
  --rz-danger-darker: var(--st-atraso);
  --rz-on-danger: var(--surface);

  /* Anel de foco: o Radzen tem um sistema completo (--rz-<componente>-focus-outline), e quase todo componente já
     aponta para --rz-outline-focus. A exceção era o campo, que vinha com --rz-input-focus-outline:
     var(--rz-outline-normal), e --rz-outline-normal é `none`: campo, seletor de casa e busca ficavam sem marca
     nenhuma de foco (WCAG 2.4.7). Apontar o campo para o mesmo anel resolve na origem, e a cor sai de --accent
     (não de --rz-primary) para o anel virar tinta clara dentro do aço, onde --accent já é reapontado. */
  --rz-outline-width: 3px;
  --rz-outline-color: var(--accent);
  --rz-outline-offset: 2px;
  --rz-input-focus-outline: var(--rz-outline-focus);
  --rz-input-focus-outline-offset: 2px;

  --rz-button-border-radius: 6px;
  --rz-button-size-md: 48px;
  --rz-button-text-transform: none;
  --rz-button-shadow: none;
  --rz-button-hover-shadow: none;
  --rz-button-focus-shadow: none;
  --rz-input-background-color: var(--surface);
  --rz-input-color: var(--fg);
  --rz-input-value-color: var(--fg);
  --rz-input-placeholder-color: var(--muted);
  --rz-input-border: 1px solid var(--border-input);
  --rz-input-hover-border: 1px solid var(--muted);
  /* Alvo de toque do campo: 48 px, como em todo botão. O md do Radzen vem com 2,5rem (40 px), e a altura do
     campo sai desta variável (o line-height dele é calculado a partir dela), então trocar o tamanho md muda
     campo, seletor e busca de uma vez, incluindo a etiqueta da casa no cabeçalho. */
  --rz-input-size-md: 3rem;
  --rz-input-focus-border: 1px solid var(--accent-solid);
  --rz-input-focus-shadow: 0 0 0 3px var(--accent-soft);
  --rz-dialog-background-color: var(--surface);
  --rz-panel-background-color: var(--surface);
  --rz-grid-background-color: var(--surface);
  --rz-grid-header-background-color: var(--fg-softer);
  --rz-grid-header-color: var(--muted);
  --rz-grid-cell-color: var(--fg);
  --rz-grid-hover-background-color: var(--accent-soft);
  --rz-grid-hover-color: var(--fg);
  --rz-grid-selected-background-color: var(--accent-soft);
  --rz-grid-selected-color: var(--fg);
  --rz-grid-stripe-background-color: var(--surface);
  --rz-grid-stripe-odd-background-color: var(--surface);
  --rz-grid-header-font-size: 11px;
  --rz-grid-header-font-weight: 650;
  --rz-grid-header-text-transform: uppercase;
  --rz-grid-cell-padding: 10px 12px;
  --rz-grid-header-cell-padding: 10px 12px;
  --rz-grid-bottom-cell-border: 1px solid var(--border);
  --rz-grid-right-cell-border: none;
  --rz-grid-header-cell-border: none;
  --rz-grid-header-cell-border-bottom: 3px double var(--rule);
  --rz-switch-background-color: var(--toggle-off);
  --rz-switch-checked-background-color: var(--accent-solid);
  --rz-switch-circle-background-color: var(--surface);
  --rz-switch-checked-circle-background-color: var(--surface);
  --rz-checkbox-checked-background-color: var(--accent-solid);
  --rz-checkbox-checked-border: 1px solid var(--accent-solid);
  --rz-checkbox-checked-hover-background-color: var(--accent-solid-hover);
  --rz-checkbox-checked-hover-border: 1px solid var(--accent-solid-hover);
  --rz-checkbox-checked-color: var(--on-accent);
  --rz-checkbox-checked-icon-background-color: transparent;

  /* Texto (RadzenText): H4 título da página, H5 título de seção, Subtitle1 nome de item, Body1 texto,
     Body2 texto de apoio, Overline etiqueta de gaveta (estreita, caixa alta), Caption unidade e detalhe. */
  --rz-text-font-family: var(--font-body);
  --rz-text-title-color: var(--fg);
  --rz-text-h4-font-size: 30px;
  --rz-text-h4-font-weight: 760;
  --rz-text-h4-letter-spacing: -0.015em;
  --rz-text-h4-line-height: 1.15;
  --rz-text-h4-margin-block-end: 0;
  --rz-text-h5-font-size: 19px;
  --rz-text-h5-font-weight: 700;
  --rz-text-h5-letter-spacing: -0.01em;
  --rz-text-h5-line-height: 1.3;
  --rz-text-h5-margin-block-end: 0;
  /* H6 fica no padrão do Radzen: é a variável do título dos alertas. Título de cartão usa Subtitle1 ou H5. */
  --rz-text-subtitle1-font-size: 16px;
  --rz-text-subtitle1-font-weight: 650;
  --rz-text-subtitle1-letter-spacing: -0.005em;
  --rz-text-subtitle1-line-height: 1.3;
  --rz-text-subtitle1-margin-block-end: 0;
  --rz-text-subtitle1-color: var(--fg);
  --rz-text-subtitle2-font-size: 14px;
  --rz-text-subtitle2-font-weight: 600;
  --rz-text-subtitle2-letter-spacing: 0;
  --rz-text-subtitle2-margin-block-end: 0;
  --rz-text-subtitle2-color: var(--fg);
  --rz-text-body1-font-size: 16px;
  --rz-text-body1-letter-spacing: 0;
  --rz-text-body1-margin-block-end: 0;
  --rz-text-body1-color: var(--fg);
  --rz-text-body2-font-size: 14px;
  --rz-text-body2-letter-spacing: 0;
  --rz-text-body2-margin-block-end: 0;
  --rz-text-body2-color: var(--muted);
  --rz-text-overline-font-size: 11.5px;
  --rz-text-overline-letter-spacing: 0.07em;
  --rz-text-overline-line-height: 1.4;
  --rz-text-overline-margin-block-end: 0;
  --rz-text-overline-color: var(--muted);
  --rz-text-caption-font-size: 12px;
  --rz-text-caption-letter-spacing: 0;
  --rz-text-caption-line-height: 1.5;
  --rz-text-caption-margin-block-end: 0;
  --rz-text-caption-color: var(--muted);

  /* Chip (RadzenBadge): etiqueta retangular de canto curto, como o cavaleiro de sinal. */
  --rz-badge-font-size: 12.5px;
  --rz-badge-font-weight: 650;
  --rz-badge-letter-spacing: 0;
  --rz-badge-line-height: 1.4;
  --rz-badge-text-transform: none;
  --rz-badge-padding: 3px 8px;
  --rz-badge-border-radius: 4px;
  --rz-badge-pill-padding: 4px 10px;
  --rz-badge-pill-border-radius: 4px;

  /* Cartão = ficha de índice: canto curto, fio fino, sem sombra parada. */
  --rz-card-padding: 22px;
  --rz-card-border-radius: 6px;
  --rz-card-border: 1px solid var(--border);
  --rz-card-shadow: none;
  --rz-card-background-color: var(--surface);
  --rz-card-flat-background-color: var(--fg-softer);

  /* Estrutura: trilho de aço de 248 px, cabeçalho de aço de 64 px e menu inferior de aço. */
  --rz-layout-background-color: var(--bg);
  --rz-layout-body-padding: 0;
  --rz-sidebar-width: 248px;
  --rz-sidebar-background-color: var(--steel);
  --rz-sidebar-color: var(--steel-ink);
  --rz-sidebar-border-inline-end: none;
  --rz-header-background-color: var(--steel);
  --rz-header-color: var(--steel-ink);
  --rz-header-min-height: 64px;
  --rz-header-shadow: none;
  --rz-header-border: none;
  --rz-footer-background-color: var(--steel);
  --rz-footer-color: var(--steel-ink);
  --rz-footer-border: none;
  --rz-footer-padding: 0;

  /* Trilho: cada gaveta é um porta-etiqueta; a ativa leva a etiqueta clara. Alvo de 46 px. */
  --rz-panel-menu-font-size: 15px;
  --rz-panel-menu-font-weight: 500;
  --rz-panel-menu-item-color: var(--steel-ink);
  --rz-panel-menu-item-background-color: transparent;
  --rz-panel-menu-item-hover-background-color: var(--steel-raised);
  --rz-panel-menu-item-hover-color: var(--steel-ink);
  --rz-panel-menu-item-active-background-color: var(--insert);
  --rz-panel-menu-item-active-color: var(--insert-ink);
  --rz-panel-menu-item-border: none;
  --rz-panel-menu-item-border-radius: 4px;
  --rz-panel-menu-item-padding-block: 11px;
  --rz-panel-menu-item-padding-inline: 12px;
  --rz-panel-menu-item-margin-block: 0;
  --rz-panel-menu-icon-color: var(--steel-muted);
  --rz-panel-menu-icon-font-size: 20px;
  --rz-panel-menu-icon-width: 20px;
  --rz-panel-menu-icon-height: 20px;
  --rz-panel-menu-icon-margin-inline: 0 12px;

  /* Barra de progresso da janela de pedido: 6 px, a régua do mês. */
  --rz-progressbar-height: 6px;
  --rz-progressbar-border-radius: 2px;
  --rz-progressbar-background-color: var(--border);
  --rz-progressbar-value-background-color: var(--accent-solid);

  /* Ficha em branco (esqueleto): a linha ainda sem texto é o ladrilho claro da ficha, e a onda que passa por ela
     é a tinta azul de seleção, no mesmo sentido da leitura. O canto é o das marcas finas, 2 px. */
  --rz-skeleton-background-color: var(--fg-soft);
  --rz-skeleton-animation-color: var(--accent-soft);
  --rz-skeleton-border-radius: 2px;
  --rz-skeleton-animation-duration: 1.5s;

  --rz-alert-border-radius: 6px;
  --rz-dialog-border-radius: 8px;
  --rz-input-border-radius: 6px;
  --rz-datalist-padding: 0;
  --rz-datalist-item-margin-block: 0;
  --rz-datalist-item-margin-inline: 0;
  --rz-datalist-item-padding: 16px;
  --rz-datalist-border-radius: 6px;
  --rz-datalist-border: 1px solid var(--border);
  /* Escolha de uma opção (RadzenSelectBar) e página atual da grade: a etiqueta em tinta cheia, como o filtro ativo. */
  --rz-selectbar-background-color: var(--surface);
  --rz-selectbar-color: var(--fg);
  --rz-selectbar-border: 1px solid var(--border);
  --rz-selectbar-border-radius: 4px;
  --rz-selectbar-selected-background-color: var(--fg);
  --rz-selectbar-selected-color: var(--surface);
  --rz-selectbar-selected-border: 1px solid var(--fg);
  --rz-pager-button-border-radius: 4px;
  --rz-pager-numeric-button-selected-background-color: var(--fg);
  --rz-pager-numeric-button-selected-color: var(--surface);
  --rz-pager-numeric-button-hover-background-color: var(--fg-soft);
  --rz-tabs-tab-selected-color: var(--fg);
  --rz-tabs-tab-selected-top-border-color: var(--accent-solid);
  /* Link na cor do texto: voltar, “ver todas” e protocolo são secundários; o destaque fica para a ação. */
  --rz-link-color: var(--fg);
  --rz-link-hover-color: var(--fg);
  --rz-link-hover-text-decoration: none;
}

/* ─── Base dos elementos ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; accent-color: var(--accent-solid); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-line); color: var(--fg); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, select, textarea { font: inherit; color: inherit; caret-color: var(--accent-solid); }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--font-display); }
/* Títulos da página em largura semiestreita: a etiqueta de gaveta em tamanho grande. */
.rz-text-h4 { font-stretch: 88%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* O título que o Blazor foca ao navegar (FocusOnNavigate, tabindex -1) não é alvo de teclado: sem anel. */
[tabindex="-1"]:focus { outline: none; }
/* Dentro do aço o anel usa a tinta clara: --accent já é reapontado lá em cima, mas o afastamento precisa caber
   no caixilho de metal da etiqueta ativa. */
/* O --rz-panel-menu-focus-outline do Radzen mira o link de cada item, mas quem recebe o Tab e o <ul> do grupo
   (o menu tem foco rotativo por setas): sem esta regra o trilho e a unica parada de teclado sem marca nenhuma. */
.rz-panel-menu:focus-visible { outline: var(--rz-outline-focus); outline-offset: 2px; }
.rz-header .rz-dropdown:focus-within, .rz-sidebar .rz-panel-menu:focus-visible { outline-offset: 4px; }
[hidden] { display: none !important; }
html { scrollbar-color: var(--disabled-ink) transparent; }

/* ─── Estrutura (RadzenLayout) ─────────────────────────────────────────────── */
/* Sobrescritas globais onde o Radzen não expõe variável (D2). */
:root, [data-theme="dark"] { --rz-panel-menu-item-active-indicator: transparent; }
/* A página rola no documento, não dentro do .rz-body: captura de página inteira, âncoras e a verificação
   de rolagem lateral dependem disso. */
.rz-layout { height: auto; min-height: 100dvh; overflow: visible; }
/* O trilho é fixo na tela; a coluna dele continua em aço até o fim da página, sem faixa clara embaixo. */
.rz-layout:has(> .rz-sidebar) { background: linear-gradient(to right, var(--steel) var(--rz-sidebar-width), var(--bg) var(--rz-sidebar-width)); }
.rz-layout .rz-body { overflow: visible; transform: none; min-width: 0; background: var(--bg); }
.rz-layout .rz-sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; scrollbar-color: var(--steel-line) transparent; }
/* O Radzen força width:100vw até 768 px; com barra de rolagem vertical isso estoura a largura da tela. */
@media (max-width: 768px) {
  .rz-layout .rz-header, .rz-layout .rz-footer, .rz-layout .rz-body { width: auto; }
}
/* Porta-etiqueta: o item ativo é a etiqueta clara num caixilho de metal (fio de 1 px por fora), em peso 650. */
.rz-panel-menu .rz-navigation-item-wrapper-active { box-shadow: 0 0 0 1px var(--steel-line), 0 0 0 3px var(--steel-raised); font-weight: 650; }
.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon { color: var(--insert-ink); }
.rz-panel-menu { display: flex; flex-direction: column; gap: 4px; background: transparent; }

/* ─── Regras globais ───────────────────────────────────────────────────────── */
/* Alvo de toque de 48 px em todo botão; texto sem caixa alta nem espaçamento extra. Botão com Style próprio muda a altura. */
.rz-button { min-width: 48px; min-height: 48px; letter-spacing: 0; text-transform: none; font-weight: 600; transition: background-color 150ms ease-out, transform 150ms ease-out; }
.rz-button:active:not(:disabled) { transform: translateY(1px); }
/* Fechar diálogo e escolher arquivo não usam .rz-button nem expõem o alvo por variável do Radzen.
   O ícone conserva seu tamanho; quem cresce é a área acionável. */
.rz-dialog-titlebar, .rz-dialog-side-titlebar { align-items: center; }
.rz-dialog-titlebar-close, .rz-dialog-side-titlebar-close {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; flex-shrink: 0;
}
input[type="file"] { min-height: 48px; max-width: 100%; font-size: 16px; }
input[type="file"]::file-selector-button {
  min-height: 48px; padding: 0 12px; margin-inline-end: 12px;
  font: inherit; color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-input); border-radius: 6px; cursor: pointer;
}
input[type="file"]:disabled::file-selector-button { color: var(--disabled-ink); cursor: default; }
/* O botão do calendário tem agora 48 px, sem aumentar o glifo nem cobrir a data digitada. */
.rz-datepicker:has(.rz-datepicker-trigger) > .rz-inputtext { padding-inline-end: 60px; }
.rz-datepicker-field-button.rz-button:active:not(:disabled) { transform: translateY(-50%); }
/* Alvo de toque do link de navegação: os mesmos 48 px do botão. Voltar, “ver todas”, protocolo e anexo são alvos
   soltos, não links no meio de uma frase, e ficavam entre 21 e 24 px de altura — abaixo do mínimo de 24 px da
   WCAG 2.5.8 e longe dos 48 px que o sistema promete. A tinta, o peso e o fluxo não mudam: o link só passa a
   ocupar a altura do alvo. Ficam de fora o link que embrulha uma ficha (a ficha inteira já é o alvo), o logo e o
   menu inferior do celular, que têm alvo próprio. */
.rz-link:not(:has(.rz-card)):not(:has(img)):not(:has(.rz-stack)) {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
/* Na grade o link fica no mínimo da WCAG (24 px) em vez de 48: a linha da grade é varredura de desktop e 48 px por
   célula engordariam a tabela em cerca de 25 px por linha. Abaixo de md a fila já é a gaveta de fichas, onde o
   mesmo protocolo é um link de 48 px. */
.rz-grid-table .rz-link:not(:has(.rz-card)):not(:has(img)):not(:has(.rz-stack)) { min-height: 24px; }

/* Cartão nunca estoura a coluna em que está. O contornado é a ficha: cartão de índice claro sobre a gaveta (o Radzen o
   deixa transparente e não expõe variável para isso). */
.rz-card { max-width: 100%; }
.rz-card.rz-variant-outlined { background: var(--surface); }
/* Ficha que é link ou botão (o contador que filtra): puxada da gaveta ao passar o mouse ou focar, com sombra física só
   nela. O botão entra pelo elemento, sem classe: quem envolve uma ficha se comporta como ficha. */
.rz-link:has(> .rz-card) { text-decoration: none; }
:is(.rz-link, button) > .rz-card { transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms cubic-bezier(.2, .8, .2, 1), border-color 180ms; }
:is(.rz-link, button):is(:hover, :focus-visible) > .rz-card { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  :is(.rz-link, button) > .rz-card, .rz-button { transition: none; }
  :is(.rz-link, button):is(:hover, :focus-visible) > .rz-card { transform: none; }
}
:root, [data-theme="dark"] { --rz-grid-border-radius: 6px; }
/* Números tabulares nas grades: colunas de quantidade e data alinham. */
.rz-grid-table td, .rz-grid-table th { font-variant-numeric: tabular-nums; }
/* Célula da grade quebra por palavra em vez de cortar no meio: o nome do material é lido inteiro no desktop. */
.rz-grid-table td .rz-cell-data { white-space: normal; overflow-wrap: break-word; }
/* D3: diálogo com 20 px de respiro abaixo de sm. */
@media (max-width: 575px) {
  :root, [data-theme="dark"] { --rz-dialog-content-padding: 20px; }
}

/* ─── Texto ────────────────────────────────────────────────────────────────── */
/* Etiqueta de gaveta (Overline): Archivo estreita em caixa alta, peso 650. O Radzen só expõe uma família para todo o texto. */
.rz-text-overline { font-stretch: 78%; font-weight: 650; }
.rz-grid-table thead th { font-stretch: 82%; letter-spacing: 0.06em; }
/* D3: ficha com 18 px de respiro abaixo de sm; cartão com Style próprio não muda. */
@media (max-width: 575px) {
  :root, [data-theme="dark"] { --rz-card-padding: 18px; }
}
/* D3: título da página com 26 px abaixo de md. */
@media (max-width: 767px) {
  :root, [data-theme="dark"] { --rz-text-h4-font-size: 26px; }
}

/* ─── Chips (RadzenBadge com Shade.Lighter) ────────────────────────────────── */
/* Tinta, fundo e fio de cada estado vêm dos tokens --st-*; o destaque azul nunca vira estado.
   Os alertas com Shade.Lighter usam as mesmas tintas. */
:root, [data-theme="dark"] {
  --rz-base-lighter: var(--fg-softer);
  --rz-on-base-lighter: var(--muted);
  --rz-on-info-lighter: var(--accent);
  --rz-on-success-lighter: var(--st-pronta);
  --rz-on-warning-lighter: var(--st-enviada);
  --rz-on-danger-lighter: var(--st-atraso);
}
.rz-badge.rz-shade-lighter { box-shadow: inset 0 0 0 1px var(--border); }
.rz-badge-info.rz-shade-lighter { box-shadow: inset 0 0 0 1px var(--accent-line); }
.rz-badge-success.rz-shade-lighter { box-shadow: inset 0 0 0 1px var(--st-pronta-line); }
.rz-badge-warning.rz-shade-lighter { box-shadow: inset 0 0 0 1px var(--st-enviada-line); }
.rz-badge-danger.rz-shade-lighter { box-shadow: inset 0 0 0 1px var(--st-atraso-line); }
/* Selos DOP e Teste (RoleBadge contornado): tinta de nota e fio tracejado, como anotação à mão na ficha. */
.rz-badge.rz-variant-outlined.rz-badge-base.rz-shade-lighter {
  background-color: var(--fg-softer); color: var(--note-ink); box-shadow: none; border: 1px dashed var(--note-line);
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.02em;
}