/*
 * Cores e fonte do Cerrado Design System aplicadas ao tema do Radzen.
 * Tokens copiados de omni/cerrado-design-system (theme.css e globals.css), commit 2720637.
 * Só cores e fonte: estrutura e comportamento continuam os do Radzen.
 * Modo escuro (DK1): tokens no fim do arquivo, sob data-tema="escuro" e data-tema="sistema" com prefers-color-scheme: dark.
 */
:root {
    --cds-font-family: 'Inter', system-ui, sans-serif;
    --cds-body-color-light: #f5f5f5;
    --cds-color-neutral: #809aa8;
    --cds-color-neutral-wash: #e9f0f3;
    --cds-color-neutral-weak: #cae0ec;
    --cds-color-neutral-light: #a8c5d4;
    --cds-color-neutral-medium: #748e9d;
    --cds-color-neutral-strong: #52626b;
    --cds-color-primary: #19569d;
    --cds-color-primary-wash: #f2f6fb;
    --cds-color-primary-weak: #e0e9f5;
    --cds-color-primary-light: #0095e5;
    --cds-color-primary-medium: #1f6ec7;
    --cds-color-primary-strong: #0a2c53;
    --cds-color-secondary: #FF5C00;
    --cds-color-secondary-weak: #FFC6A6;
    --cds-color-secondary-light: #FD8A47;
    --cds-color-secondary-medium: #FF7424;
    --cds-color-secondary-strong: #9E3A00;
    --cds-color-success: #14b97e;
    --cds-color-success-wash: #f0faf5;
    --cds-color-success-weak: #b8f2de;
    --cds-color-success-light: #1aeda1;
    --cds-color-success-medium: #0ead74;
    --cds-color-success-strong: #0e835a;
    --cds-color-alert: #f9ad00;
    --cds-color-alert-wash: #fffbed;
    --cds-color-alert-weak: #fff3c7;
    --cds-color-alert-light: #f9d966;
    --cds-color-alert-medium: #d69601;
    --cds-color-alert-strong: #be9500;
    --cds-color-alert-dark: #927200;
    --cds-color-critical: #f30058;
    --cds-color-critical-wash: #fdf5f5;
    --cds-color-critical-weak: #ffd3d3;
    --cds-color-critical-light: #f45d8b;
    --cds-color-critical-medium: #ca004a;
    --cds-color-critical-strong: #b10041;
    --cds-color-purple: #b100d4;
    --cds-color-purple-wash: #e8ccee;
    --cds-color-purple-weak: #d15ae9;
    --cds-color-purple-light: #9d00bd;
    --cds-color-purple-medium: #7a0092;
    --cds-color-purple-strong: #540064;
    --cds-color-petrol: #00879b;
    --cds-color-petrol-wash: #e6fafd;
    --cds-color-petrol-weak: #00b2ce;
    --cds-color-petrol-light: #008ba0;
    --cds-color-petrol-medium: #006c7c;
    --cds-color-petrol-strong: #004550;
    --cds-color-magenta: #c3005c;
    --cds-color-magenta-wash: #f8c1db;
    --cds-color-magenta-weak: #e7006c;
    --cds-color-magenta-light: #ac0050;
    --cds-color-magenta-medium: #8d0042;
    --cds-color-magenta-strong: #680030;
    --cds-color-disabled: #ced6db;
    --cds-color-white: #ffffff;
    --cds-color-black: #000000;
    --cds-color-grey: #747d86;
    --cds-color-grey-light: #e3e3e3;
    --cds-color-offwhite: #edf0f3;
    --cds-color-offblack: #2b2f33;
    --cds-color-offblue: var(--cds-color-primary-wash);
    --cds-body-background: #edf1f5;
    --cds-text-neutral: var(--cds-color-neutral);
    --cds-text-neutral-light: var(--cds-color-neutral-medium);
    --cds-text-primary: var(--cds-color-primary);
    --cds-text-primary-light: var(--cds-color-primary-medium);
    --cds-text-success: var(--cds-color-success);
    --cds-text-success-light: var(--cds-color-success-medium);
    --cds-text-alert: var(--cds-color-alert);
    --cds-text-alert-light: var(--cds-color-alert-medium);
    --cds-text-disabled: #a2afb7;
    --cds-text-strong: #ffffff;
    --cds-text-mid: #d4dfeb;
    --cds-text-light: #b4c6d8;
    --cds-text-white: var(--cds-color-white);
    --cds-text-black: #2B2F33;
    --cds-text-grey: #5D656D;
    --cds-text-offwhite: #e4e8ec;
    --cds-text-offblack: #2b2f33;
    --cds-body-color: var(--cds-body-background);
    --cds-form-selected-border: #abc1da;
    --cds-form-outer-glow: 0 0 0 3px #6b839c40;
    --cds-panel-shadow: 0 0 4px #00000020;
    --cds-shadow-strong: 10px 10px 4px #00000030;

    /* Botões e sombra do diálogo (theme.css), só os que o tema usa (C5-P7) */
    --cds-btn-primary: var(--cds-color-primary);
    --cds-btn-primary-hover: var(--cds-color-primary-medium);

    /* Tabelas (globals.css) */
    --cds-table-header-blue-background: #f0f8ff;
    --cds-table-row-odd: #fcfcfd;
    --cds-table-row-even: var(--cds-color-white);
    --cds-table-row-hover: #e6f0ff;
    --cds-table-columns-divider: #d7dce1;
    --cds-table-header-columns-divider: #a6b3c1;

    /* Semânticos do Adaptive Omni (DK0) com o valor claro de hoje. */
    --cds-bg-app: #edf1f5;
    --cds-bg-surface: #ffffff;
    --cds-bg-offwhite: #edf0f3;
    --cds-bg-offblue: #f2f6fb;
    --cds-bg-page-header: #e9ebed;
    --cds-bg-topbar: #1f6ec7;
    --cds-bg-menu-hover: #ebf2f9;
    --cds-bg-form: #edf0f3;
    --cds-bg-form-light: #f6f7f9;
    --cds-bg-form-strong: #e5e9ed;
    --cds-bg-linha-selecionada: #e6f0ff;
    --cds-fg1: #2b2f33;
    --cds-fg2: #5d656d;
    --cds-fg-disabled: #a2afb7;
    --cds-fg-link: #19569d;
    --cds-fg-topbar: #ffffff;
    --cds-brand: #1f6ec7;
    --cds-brand-on: #ffffff;
    --cds-brand-text: #19569d;
    --cds-brand-soft: #f2f6fb;
    --cds-border: #ced6db;
    --cds-border-strong: #a6b3c1;
    --cds-border-divider: #d7dce1;
    --cds-border-focus: #abc1da;
    --cds-success-text: #0e835a;
    --cds-alert-text: #9a6b00;
    --cds-critical-text: #b10041;
    --cds-info-text: #19569d;
    --cds-secondary-text: #9e3a00;
    --cds-seq-brand-0: #e9eef3;
    --cds-seq-brand-1: #cfe0f3;
    --cds-seq-brand-2: #8db6e3;
    --cds-seq-brand-3: #3d7fc6;
    --cds-seq-brand-4: #0e3d71;
    /* Cores próprias da lib, sem par exato no Cerrado, com o valor claro de hoje (DK1). */
    --cds-border-soft: #e9ebed; /* divisória dos cartões do painel */
    --cds-bg-bolha: #e9eaed; /* bolha e item de conversa (era o --rz-base-200 do Radzen) */
    --cds-borda-painel: #dfe3e8; /* borda dos painéis de conversa, chamada e assistente */
    --cds-borda-suporte: #d0d7de; /* borda do painel de suporte */
    --cds-alert-soft: #fff4dc; /* selo amarelo (pendentes, tarefas) */
    --cds-secondary-soft: #fff0e6; /* selo laranja (cartão pessoal) */
    --cds-aviso-fundo: #fff8e1; /* caixa de aviso */
    --cds-aviso-borda: #6b4e00; /* borda do aviso de tela compartilhada */
    --cds-aviso-texto: #8a6d00; /* texto de aviso */
    --cds-aviso-texto-forte: #6b4b00; /* texto da caixa de aviso */
    --cds-fg-forte: #1f2328; /* texto do aviso de tela compartilhada */
    --cds-pendente-texto: #b45309; /* contador de pendentes da grade */
    --cds-erro-texto: #b00020; /* erro nos cartões e no editor de painéis */
    --cds-movel-erro-texto: #c62828; /* erro nas telas do /m */
    --cds-grade-linha-selecionada: #e8f0fa; /* linha selecionada da grade de manutenção */
    --cds-grade-linha-alterada: #fffaf0; /* linha alterada da grade de manutenção */
    --cds-presenca-desconectado: #9aa5b1; /* presença: desconectado */
    --cds-presenca-online: #2e7d32; /* presença: conectado */
    --cds-presenca-ausente: #f9a825; /* presença: ausente */
    --cds-presenca-em-chamada: #c62828; /* presença: em chamada */
    --cds-topo-busca-fundo: rgba(0, 0, 0, 0.15); /* botão da busca na barra do topo */
    --cds-topo-busca-fundo-hover: rgba(0, 0, 0, 0.22); /* botão da busca, ao passar o mouse */
    --cds-topo-busca-texto: var(--cds-color-primary-weak); /* texto e tecla da busca na barra do topo */
    --cds-topo-tecla-borda: rgba(255, 255, 255, 0.35); /* borda da tecla do atalho na busca da barra do topo */
    --cds-topo-contorno: rgba(255, 255, 255, 0.28); /* borda do contexto (empresa e data) na barra do topo */
    --cds-topo-divisor: rgba(255, 255, 255, 0.3); /* divisores da barra do topo */
    --cds-topo-hover: rgba(255, 255, 255, 0.14); /* ícones e menus da barra do topo, ao passar o mouse */
    --cds-topo-logotipo-fundo: var(--cds-color-white); /* caixa do logotipo na barra do topo */
    --cds-menu-faixa-fundo: var(--cds-color-primary-strong); /* faixa dos módulos do menu lateral */
    --cds-login-marca-inicio: var(--cds-color-primary); /* painel da marca no login, início do degradê */
    --cds-login-marca-fim: var(--cds-color-primary-strong); /* painel da marca no login, fim do degradê */
    --cds-login-marca-texto: var(--cds-color-white); /* texto do painel da marca */
    --cds-login-marca-texto2: var(--cds-color-primary-weak); /* subtítulo do painel da marca */
    --cds-login-marca-rodape: var(--cds-color-neutral-light); /* rodapé do painel da marca */
}

/* html:root tem especificidade maior que o :root do tema Radzen, que é carregado depois. */
html:root {
    --rz-text-font-family: var(--cds-font-family);
    --rz-body-background-color: var(--cds-body-background);
    --rz-text-color: var(--cds-text-black);
    --rz-text-secondary-color: var(--cds-text-grey);
    --rz-text-disabled-color: var(--cds-text-disabled);

    /* Campo desabilitado é informação para ler (consulta, registro travado): o Radzen usava o texto terciário com opacidade 0,5, contraste
       de 1,96:1 sobre o fundo. O fundo offwhite marca que não é editável; o texto cinza dá 5,17:1 (Q83). */
    --rz-input-disabled-opacity: 1;
    --rz-input-disabled-color: var(--cds-text-grey);
    --rz-input-disabled-background-color: var(--cds-color-offwhite);
    --rz-input-disabled-border: 1px solid var(--cds-color-disabled);
    --rz-input-disabled-placeholder-color: var(--cds-color-neutral-strong);

    /* Cada cor com o texto que vai sobre ela (--rz-on-*), com no mínimo 4,5:1 (Q83, C5-P1 e C5-P4). Quando o tom base do CDS não dá 4,5:1
       com branco, o fundo preenchido usa o tom mais forte da escala (success-strong 4,76:1, critical-medium 5,82:1, petrol-medium 6,11:1,
       secondary-strong 6,86:1); o amarelo continua o do CDS, com texto offblack (7,07:1). Os tons lighter são os wash do CDS, com o texto
       medium ou strong da escala; no verde e no amarelo nenhum tom da escala chega a 4,5:1 sobre o wash (success-strong 4,46:1,
       alert-dark 4,38:1), e o texto é o offblack. */
    --rz-primary: var(--cds-color-primary);
    --rz-primary-light: var(--cds-color-primary-medium);
    --rz-primary-lighter: var(--cds-color-primary-weak);
    --rz-primary-dark: var(--cds-color-primary-strong);
    --rz-primary-darker: var(--cds-color-primary-strong);
    --rz-on-primary-lighter: var(--cds-color-primary);

    --rz-secondary: var(--cds-color-secondary-strong);
    --rz-secondary-light: var(--cds-color-secondary-light);
    --rz-secondary-lighter: var(--cds-color-secondary-weak);
    --rz-secondary-dark: var(--cds-color-secondary-strong);
    --rz-secondary-darker: var(--cds-color-secondary-strong);
    --rz-on-secondary-light: var(--cds-text-offblack);
    --rz-on-secondary-lighter: var(--cds-color-secondary-strong);

    --rz-info: var(--cds-color-petrol-medium);
    --rz-info-light: var(--cds-color-petrol-weak);
    --rz-info-lighter: var(--cds-color-petrol-wash);
    --rz-info-dark: var(--cds-color-petrol-strong);
    --rz-info-darker: var(--cds-color-petrol-strong);
    --rz-on-info-light: var(--cds-text-offblack);
    --rz-on-info-lighter: var(--cds-color-petrol-medium);

    --rz-success: var(--cds-color-success-strong);
    --rz-success-light: var(--cds-color-success-weak);
    --rz-success-lighter: var(--cds-color-success-wash);
    --rz-success-dark: var(--cds-color-success-strong);
    --rz-success-darker: var(--cds-color-success-strong);
    --rz-on-success-light: var(--cds-text-offblack);
    --rz-on-success-lighter: var(--cds-text-offblack);

    --rz-warning: var(--cds-color-alert);
    --rz-warning-light: var(--cds-color-alert-weak);
    --rz-warning-lighter: var(--cds-color-alert-wash);
    --rz-warning-dark: var(--cds-color-alert-medium);
    --rz-warning-darker: var(--cds-color-alert-strong);
    --rz-on-warning: var(--cds-text-offblack);
    --rz-on-warning-light: var(--cds-text-offblack);
    --rz-on-warning-lighter: var(--cds-text-offblack);
    --rz-on-warning-dark: var(--cds-text-offblack);
    --rz-on-warning-darker: var(--cds-text-offblack);

    --rz-danger: var(--cds-color-critical-medium);
    --rz-danger-light: var(--cds-color-critical-weak);
    --rz-danger-lighter: var(--cds-color-critical-wash);
    --rz-danger-dark: var(--cds-color-critical-strong);
    --rz-danger-darker: var(--cds-color-critical-strong);
    --rz-on-danger-light: var(--cds-color-critical-strong);
    --rz-on-danger-lighter: var(--cds-color-critical-medium);

    /* Texto de exemplo dentro do campo: o padrão do Radzen (#8d8e90) dá 3,28:1 (C5-P2). */
    --rz-input-placeholder-color: var(--cds-text-grey);

    /* Contorno de foco: o primary-medium do Radzen vira o primary do CDS (7,34:1 sobre branco), C5-P5. */
    --rz-outline-color: var(--cds-color-primary);
}

html body {
    font-family: var(--cds-font-family);
    background-color: var(--cds-body-background);
    /* O tema standard do Radzen desenha uma imagem decorativa no fundo. */
    background-image: none;
    color: var(--cds-text-black);
}

/*
 * Formato, espaçamento e texto do Cerrado (buttons.css, forms.css, card.css, typography.css).
 * Os seletores começam com html para vencer as variáveis que o Radzen define nos próprios componentes.
 */
html:root {
    --rz-body-font-size: 13px;

    --rz-text-h1-font-size: 64px;
    --rz-text-h2-font-size: 48px;
    --rz-text-h3-font-size: 32px;
    --rz-text-h4-font-size: 24px;
    --rz-text-h5-font-size: 20px;
    --rz-text-h6-font-size: 18px;
    --rz-text-h1-font-weight: 700;
    --rz-text-h2-font-weight: 700;
    --rz-text-h3-font-weight: 700;
    --rz-text-h4-font-weight: 700;
    --rz-text-h5-font-weight: 700;
    --rz-text-h6-font-weight: 700;
    --rz-text-h1-letter-spacing: 0;
    --rz-text-h2-letter-spacing: 0;
    --rz-text-h3-letter-spacing: 0;
    --rz-text-h4-letter-spacing: 0;
    --rz-text-h5-letter-spacing: 0;
    --rz-text-h6-letter-spacing: 0;

    --rz-text-subtitle1-font-size: 16px;
    --rz-text-subtitle1-line-height: 24px;
    --rz-text-subtitle1-font-weight: 600;
    --rz-text-subtitle1-letter-spacing: 0;
    --rz-text-subtitle2-font-size: 14px;
    --rz-text-subtitle2-line-height: 22px;
    --rz-text-subtitle2-font-weight: 600;
    --rz-text-subtitle2-letter-spacing: 0;

    --rz-text-body1-font-size: 16px;
    --rz-text-body1-line-height: 24px;
    --rz-text-body1-letter-spacing: 0;
    --rz-text-body2-font-size: 13px;
    --rz-text-body2-line-height: 15px;
    --rz-text-body2-letter-spacing: 0;
    --rz-text-caption-font-size: 12px;
    --rz-text-caption-line-height: 18px;
    --rz-text-caption-letter-spacing: 0;
    --rz-text-overline-font-size: 12px;
    --rz-text-overline-line-height: 16px;
    --rz-text-overline-font-weight: 700;

    --rz-text-button-text-transform: none;
}

/* Botão: button.cds-btn + cds-btn-rounded + cds-btn-primary */
html .rz-button {
    --rz-button-border-radius: 5px;
    font-family: var(--cds-font-family);
    font-weight: 400;
    letter-spacing: 0.3px;
    text-transform: none;
    box-shadow: none;
    --rz-button-hover-gradient: none;
    --rz-button-active-gradient: none;
    --rz-button-focus-gradient: none;
}

/* Tamanhos (C5-P8). Médio: 34px do button.cds-btn (6px 16px, 14/20). O padding valia para todos os tamanhos e anulava o Small do Radzen. */
html .rz-button.rz-button-md:not(.rz-button-icon-only) {
    padding: 6px 16px;
}

html .rz-button.rz-button-md {
    min-height: 34px;
    min-width: 34px;
    font-size: 14px;
    line-height: 20px;
}

html .rz-button.rz-button-md .rz-button-box {
    line-height: 20px;
}

/* Small: button.cds-btn-small (26px, 4px 12px, texto 12/16, ícone 16px). */
html .rz-button.rz-button-sm {
    min-height: 26px;
    min-width: 26px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.01em;
}

html .rz-button.rz-button-sm.rz-button-icon-only {
    padding: 4px;
}

html .rz-button.rz-button-sm .rz-button-box {
    line-height: 16px;
    gap: 4px;
}

html .rz-button.rz-button-sm .rzi {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

/* ExtraSmall: menor que o Small (20px), com o texto do Small. */
html .rz-button.rz-button-xs {
    font-size: 12px;
    line-height: 16px;
}

/* Ações do cabeçalho da página no tamanho do cds-btn-small (page-header.md, Botões de ação), também nas páginas que não pedem o Small, C5-P16. */
html .cabecalho-pagina-acoes .rz-button.rz-button-md {
    min-height: 26px;
    min-width: 26px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.01em;
}

html .cabecalho-pagina-acoes .rz-button.rz-button-md.rz-button-icon-only {
    padding: 4px;
}

html .cabecalho-pagina-acoes .rz-button.rz-button-md .rz-button-box {
    line-height: 16px;
}

html .cabecalho-pagina-acoes .rz-button.rz-button-md .rzi {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

/* O Radzen usa .rz-button.rz-primary.rz-shade-default; o mesmo seletor com html à frente vence. Só o botão preenchido:
   o contornado e o de texto continuam sem fundo. A cor do texto vem junto (MXS-P1): o RadzenTheme sem pré-renderização carrega a folha do
   Radzen depois da primeira pintura, e até lá o botão do login no escuro ficava com o texto branco do color-scheme dark (2,11:1). */
html .rz-button.rz-primary.rz-shade-default.rz-variant-filled {
    background-color: var(--cds-color-primary-medium);
    color: var(--rz-on-primary);
}

html .rz-button.rz-primary.rz-shade-default.rz-variant-filled:not(.rz-state-disabled):hover,
html .rz-button.rz-primary.rz-shade-default.rz-variant-filled:not(.rz-state-disabled):active {
    background-color: var(--cds-color-primary);
}

/* Mês, Semana e Dia do agendador (DK-P2, Q491): o Radzen desenha a visão como botão primário preenchido, e a regra acima punha o fundo
   primary-medium sob o texto da visão (2,64:1 no claro). Voltam as variáveis da visão do Radzen: sem fundo com a cor do texto, e a selecionada
   no primary-lighter. Ao passar o mouse, a não selecionada ganha o fundo da selecionada. */
html .rz-scheduler-nav-views .rz-button.rz-primary.rz-shade-default.rz-variant-filled {
    background-color: var(--rz-scheduler-view-button-background-color);
    color: var(--rz-scheduler-view-button-color);
}

html .rz-scheduler-nav-views .rz-button.rz-primary.rz-shade-default.rz-variant-filled:not(.rz-state-disabled):hover,
html .rz-scheduler-nav-views .rz-button.rz-primary.rz-shade-default.rz-variant-filled:not(.rz-state-disabled):active {
    background-color: var(--rz-scheduler-view-selected-background-color);
    color: var(--rz-scheduler-view-button-color);
}

html .rz-scheduler-nav-views .rz-button.rz-primary.rz-shade-default.rz-variant-filled.rz-state-active,
html .rz-scheduler-nav-views .rz-button.rz-primary.rz-shade-default.rz-variant-filled.rz-state-active:not(.rz-state-disabled):hover {
    background-color: var(--rz-scheduler-view-selected-background-color);
    color: var(--rz-scheduler-view-selected-color);
}

/* Contornados (button.cds-btn-outlined-*): borda e texto na cor, 600; ao passar o mouse, preenchidos com texto branco. As cores do CDS que não
   dão 4,5:1 sobre branco trocam pelo tom mais forte da escala: o verde (#14b97e, 2,54:1) pelo success-strong, o crítico (#f30058, 4,24:1) pelo
   critical-medium e o neutro (#809aa8, 2,96:1) pelo neutral-strong. O neutro é o ButtonStyle.Base. */
html .rz-button.rz-variant-outlined.rz-shade-default {
    font-weight: 600;
}

html .rz-button.rz-variant-outlined.rz-base.rz-shade-default {
    color: var(--cds-color-neutral-strong);
    box-shadow: inset 0 0 0 1px var(--cds-color-neutral-strong);
    background-color: transparent;
}

html .rz-button.rz-variant-outlined.rz-primary.rz-shade-default:not(.rz-state-disabled):hover,
html .rz-button.rz-variant-outlined.rz-primary.rz-shade-default:not(.rz-state-disabled):active {
    color: var(--cds-color-white);
    background-color: var(--cds-btn-primary-hover);
    box-shadow: inset 0 0 0 1px var(--cds-btn-primary-hover);
}

html .rz-button.rz-variant-outlined.rz-success.rz-shade-default:not(.rz-state-disabled):hover,
html .rz-button.rz-variant-outlined.rz-success.rz-shade-default:not(.rz-state-disabled):active {
    color: var(--cds-color-white);
    background-color: var(--cds-color-success-strong);
}

html .rz-button.rz-variant-outlined.rz-danger.rz-shade-default:not(.rz-state-disabled):hover,
html .rz-button.rz-variant-outlined.rz-danger.rz-shade-default:not(.rz-state-disabled):active {
    color: var(--cds-color-white);
    background-color: var(--cds-color-critical-medium);
}

html .rz-button.rz-variant-outlined.rz-base.rz-shade-default:not(.rz-state-disabled):hover,
html .rz-button.rz-variant-outlined.rz-base.rz-shade-default:not(.rz-state-disabled):active {
    color: var(--cds-color-white);
    background-color: var(--cds-color-neutral-strong);
}

/* Foco (C5-P5): o primary-weak do button.cds-btn-primary:focus some sobre branco (1,22:1); o primary dá 7,34:1. */
html .rz-button:focus-visible,
html .rz-splitbutton .rz-button:focus-visible {
    outline: var(--cds-color-primary) solid 2px;
    outline-offset: 1px;
}

/* Campo: .cds-form-control */
html .rz-textbox,
html .rz-inputtext {
    --rz-input-border-radius: 8px;
    font-family: var(--cds-font-family);
    height: 38px;
    padding: 8px;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.005em;
    color: var(--cds-text-grey);
    background-color: var(--cds-color-white);
    border: 1px solid var(--cds-color-neutral-medium);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Foco com o glow do .cds-form-control:focus; a borda do CDS (#abc1da, 1,85:1) troca pelo primary, que dá 7,34:1 (C5-P5). */
html .rz-textbox:focus,
html .rz-inputtext:focus {
    border: 1px solid var(--cds-color-primary);
    outline: 0;
    box-shadow: var(--cds-form-outer-glow);
}

/* O texto selecionado da lista usa rz-inputtext; dentro da lista ele não tem caixa própria. */
html .rz-dropdown .rz-dropdown-label.rz-inputtext {
    height: auto;
    padding: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Rótulo: .cds-form-group label */
html .rz-label {
    font-size: 13px;
    font-weight: 400;
    line-height: 13px;
    padding-left: 4px;
    color: var(--cds-text-grey);
}

/* Obrigatório: " *" em critical-strong depois do rótulo (forms.css, .cds-form-group:has(input[required]) label::after), C5-P18. O texto
   alternativo vazio (/ "") tira o asterisco do nome acessível do campo, que continua o rótulo ("Denominação", não "Denominação *"). */
html .rz-label.campo-obrigatorio::after {
    content: " *" / "";
    font-size: 18px;
    line-height: 14px;
    font-weight: 600;
    color: var(--cds-color-critical-strong);
}

/* Linha recusada na gravação da grade de manutenção (L764): fundo critical-wash (as cores das listras da grade) e o erro em critical-strong. */
html .rz-grid-table tr[data-linha-erro] {
    --rz-grid-stripe-background-color: var(--cds-color-critical-wash);
    --rz-grid-stripe-odd-background-color: var(--cds-color-critical-wash);
}

html .texto-erro-linha {
    color: var(--cds-color-critical-strong);
}

/* Grupo de campos: .cds-section.group (globals.css). Borda offwhite, raio 8px, padding 8px e legenda 13px/600 (.cds-section h3), C5-P11. */
html:root {
    --rz-fieldset-border: 1px solid var(--cds-color-offwhite);
    --rz-fieldset-border-radius: 8px;
    --rz-fieldset-legend-color: var(--cds-text-black);
    --rz-fieldset-legend-font-size: 13px;
    --rz-fieldset-legend-padding-inline: 4px;
    --rz-fieldset-legend-margin-inline: 4px 0;
}

html .rz-fieldset-legend {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Campo com rótulo (RadzenFormField): a caixa do .cds-form-control (raio 8px), o foco com o glow do CDS e o rótulo do .cds-form-group label
   (13px, text-grey), C5-P12. A borda de foco é o primary (C5-P5). A borda dos campos, do checkbox e do radio desmarcados é o neutral-medium
   (3,44:1 sobre branco), não o #ced6db do CDS (1,47:1), para a borda funcional chegar a 3:1 (Q86). */
html:root {
    --rz-input-border: 1px solid var(--cds-color-neutral-medium);
    --rz-input-border-block-end: 1px solid var(--cds-color-neutral-medium);
    --rz-input-border-radius: 8px;
    --rz-input-focus-border: 1px solid var(--cds-color-primary);
    --rz-input-focus-shadow: var(--cds-form-outer-glow);
    --rz-form-field-focus-shadow: var(--cds-form-outer-glow);
    --rz-form-field-label-color: var(--cds-text-grey);
}

html .rz-form-field .rz-form-field-label {
    font-size: 13px;
    color: var(--rz-form-field-label-color);
}

/* Etiqueta: .cds-tag (tags.css) com o .cds-rounded (raio 3px): 2px 6px, 11px, sem caixa alta. O fundo preenchido usa as cores do Radzen,
   que já dão 4,5:1 com o texto (C5-P1), C5-P13. */
html:root {
    --rz-badge-border-radius: 3px;
    --rz-badge-padding: 2px 6px;
    --rz-badge-font-size: 11px;
    --rz-badge-font-weight: 400;
    --rz-badge-line-height: 14px;
    --rz-badge-letter-spacing: 0.2px;
    --rz-badge-text-transform: none;
}

/* Paginação: .cds-pagination (buttons.css, button.cds-btn-pagination): botões de 30px, raio 6px, 12px/600, fundo do corpo e texto offblack;
   ao passar o mouse, primary-medium com texto branco; a página atual em primary sobre o primary-weak; o resumo em neutral-strong, 13px/500. */
html:root {
    --rz-pager-numeric-button-background-color: var(--cds-body-background);
    --rz-pager-numeric-button-color: var(--cds-text-offblack);
    --rz-pager-numeric-button-hover-background-color: var(--cds-color-primary-medium);
    --rz-pager-numeric-button-hover-color: var(--cds-color-white);
    --rz-pager-numeric-button-selected-background-color: var(--cds-color-primary-weak);
    --rz-pager-numeric-button-selected-color: var(--cds-color-primary);
    --rz-pager-numeric-button-min-width: 30px;
    --rz-pager-numeric-button-padding: 0 4px;
    --rz-pager-numeric-button-selected-padding: 0 4px;
    --rz-pager-button-border-radius: 6px;
    --rz-pager-back-button-background-color: var(--cds-body-background);
    --rz-pager-back-button-color: var(--cds-color-neutral-strong);
    --rz-pager-next-button-background-color: var(--cds-body-background);
    --rz-pager-next-button-color: var(--cds-color-neutral-strong);
    --rz-pager-summary-color: var(--cds-color-neutral-strong);
    --rz-pager-summary-font-size: 13px;
}

html .rz-pager .rz-pager-element {
    min-height: 30px;
    height: 30px;
    font-size: 12px;
    font-weight: 600;
}

html .rz-pager .rz-pager-summary {
    font-weight: 500;
}

/* Card: .cds-card */
html .rz-card {
    --rz-card-padding: 8px;
    --rz-card-border-radius: 8px;
    --rz-card-shadow: var(--cds-panel-shadow);
    border: 1px solid var(--cds-color-disabled);
}

/* Links: o standard usa a cor secundária (laranja). */
html:root {
    --rz-link-color: var(--cds-color-primary);
    --rz-link-hover-color: var(--cds-color-primary-medium);
}

/* Barra do topo: .cds-top-bar (top-bar.css) no azul do tema, com o menu de módulos como .cds-sub-menu (texto branco, sublinhado
   no item aberto) e os submenus como .cds-menu-dropdown-content (fundo branco, item em destaque no azul claro, largura mínima de 200px). A sombra é a --cds-widget-outer-shadow, que o
   menu-dropdown.css traz comentada como alternativa: a --cds-shadow-strong, deslocada 10px, vira uma faixa cinza sob o submenu. */
html:root {
    --cds-top-bar-background: var(--cds-bg-topbar);
    --cds-top-bar-shadow: 0px 2px 2px #305d7d40;
    --cds-main-menu-hover-background: #ebf2f9;
    --cds-widget-outer-shadow: 0px 2px 3px #16517b40;
    --rz-header-background-color: var(--cds-top-bar-background);
    --rz-header-color: var(--cds-text-strong);
    --rz-header-shadow: var(--cds-top-bar-shadow);
    --rz-header-border: none;
    --rz-header-min-height: 46px;
}

/* Botões claros na barra azul: transparentes com texto branco; ao passar o mouse, o azul do botão primário. */
html .rz-header .rz-button.rz-light,
html .rz-header .rz-splitbutton .rz-light {
    background-color: transparent;
    color: var(--cds-text-strong);
    box-shadow: none;
}

html .rz-header .rz-button.rz-light:not(.rz-state-disabled):hover,
html .rz-header .rz-splitbutton .rz-light:not(.rz-state-disabled):hover {
    background-color: var(--cds-btn-primary);
    color: var(--cds-color-white);
}

/* Sem a borda à esquerda que o Radzen põe no menu do usuário. */
html .rz-header .rz-profile-menu {
    background-color: transparent;
    border: none;
}

html .rz-header .rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper,
html .rz-header .rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper .rz-text-body2,
html .rz-header .rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper .rzi {
    color: var(--cds-text-strong);
}

/* Barra do topo do lote FTB (D1, maquete FTB-maquete.dc.html): marca à esquerda, o campo "Buscar programa" no centro, o item de contexto
   com borda, os ícones de 34 px com contador e os menus Ajuda e do usuário (iniciais). Os menus abertos seguem o .cds-menu-dropdown-content. */
.barra-topo-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 12px 0 14px;
}

.barra-topo-linha > .barra-topo-marca {
    flex: none;
}

.barra-topo-centro {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

html .rz-header .rz-button.barra-topo-busca {
    width: 100%;
    max-width: 440px;
    height: 34px;
    padding: 0 10px;
    border-radius: 7px;
    /* Campo mais escuro que a barra: o texto claro fica acima de 4,5:1 (PadroesCerradoTests). */
    background-color: var(--cds-topo-busca-fundo);
    color: var(--cds-topo-busca-texto);
    font-weight: 400;
    text-transform: none;
}

html .rz-header .rz-button.barra-topo-busca:not(.rz-state-disabled):hover {
    background-color: var(--cds-topo-busca-fundo-hover);
}

html .rz-header .rz-button.barra-topo-busca .rz-button-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.barra-topo-busca .rzi {
    font-size: 18px;
}

.barra-topo-busca-texto {
    flex: 1;
    text-align: left;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.barra-topo-tecla {
    padding: 1px 5px;
    border: 1px solid var(--cds-topo-tecla-borda);
    border-radius: 3px;
    font: 500 11px var(--cds-font-family);
    color: var(--cds-topo-busca-texto);
}

.barra-topo-acoes {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.barra-topo-divisor {
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background: var(--cds-topo-divisor);
}

/* Ícones da barra: todos de 34 px, com o contador no canto (branco; laranja nos alertas com atraso). */
.barra-topo-icone {
    position: relative;
    display: inline-flex;
}

html .rz-header .barra-topo-icone .rz-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 5px;
}

html .rz-header .barra-topo-icone .rz-button:not(.rz-state-disabled):hover,
html .rz-header .rz-profile-menu.barra-topo-ajuda > .rz-navigation-item:hover,
html .rz-header .rz-profile-menu.barra-topo-perfil > .rz-navigation-item:hover,
html .rz-header .rz-profile-menu.barra-topo-contexto > .rz-navigation-item:hover {
    background-color: var(--cds-topo-hover);
}

html .rz-header .barra-topo-icone .rz-button .rzi {
    font-size: 20px;
}

.barra-topo-contador {
    position: absolute;
    top: 1px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--cds-color-white);
    color: var(--cds-color-primary-strong);
    font: 700 10px/16px var(--cds-font-family);
    text-align: center;
    pointer-events: none;
}

.barra-topo-contador.atraso {
    background: var(--cds-color-secondary);
    color: var(--cds-color-white);
}

/* Item de contexto: empresa e data de trabalho com borda clara, afastado dos ícones e com mais folga dentro (MX-A12). */
html .rz-header .rz-profile-menu.barra-topo-contexto {
    margin: 0 8px;
}

html .rz-header .rz-profile-menu.barra-topo-contexto > .rz-navigation-item {
    border: 1px solid var(--cds-topo-contorno);
    border-radius: 5px;
}

html .rz-header .rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper {
    display: flex;
    align-items: center;
    min-height: 34px;
}

.barra-topo-contexto-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.barra-topo-contexto-item .rzi {
    font-size: 15px;
}

.barra-topo-contexto-empresa {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.barra-topo-contexto-divisor {
    width: 1px;
    height: 16px;
    background: var(--cds-topo-divisor);
}

html .rz-header .barra-topo-ajuda .rzi {
    font-size: 20px;
}

.barra-topo-iniciais {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--cds-color-primary-weak);
    color: var(--cds-color-primary-strong);
    font: 700 12px var(--cds-font-family);
}

/* Partes dos menus abertos: título de seção, separador, cabeçalho do usuário e a dica à direita (Trocar, Alterar). */
.barra-topo-menu-titulo {
    padding: 8px 16px 4px;
    font: 600 11px var(--cds-font-family);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cds-text-grey);
    list-style: none;
}

.barra-topo-menu-separador {
    height: 1px;
    margin: 6px 0;
    background: var(--cds-color-disabled);
    list-style: none;
}

.barra-topo-menu-cabecalho {
    display: flex;
    flex-direction: column;
    padding: 10px 16px 8px;
    list-style: none;
}

.barra-topo-menu-nome {
    font: 600 14px var(--cds-font-family);
    color: var(--cds-text-offblack, #2b2f33);
}

.barra-topo-menu-conta {
    font: 400 12px var(--cds-font-family);
    color: var(--cds-text-grey);
}

.barra-topo-menu-texto {
    flex: 1;
}

.barra-topo-menu-tecla {
    margin-left: 12px;
    padding: 1px 5px;
    border: 1px solid var(--cds-color-grey-light);
    border-radius: 3px;
    background: var(--cds-color-offwhite);
    font: 500 11px var(--cds-font-family);
    color: var(--cds-text-grey);
}

@media (max-width: 600px) {
    .barra-topo-centro {
        flex: 0 0 auto;
        margin-left: auto;
    }

    html .rz-header .rz-button.barra-topo-busca {
        width: 34px;
        padding: 0;
        background-color: transparent;
        justify-content: center;
    }

    .barra-topo-busca-texto,
    .barra-topo-tecla {
        display: none;
    }
}

/* Menus da linha do programa (D5 e D6 do lote FTB). O ⋮ da esquerda e o da direita são RadzenProfileMenu (.menu-linha) com aparência de
   botão de 26 px; o Exportar é RadzenSplitButton que abre o menu pelo botão inteiro (AlwaysOpenPopup), sem a seta separada e com a seta para
   baixo depois do texto. */
.navegador-exportar .rz-splitbutton-menubutton {
    display: none !important;
}

html .navegador-exportar.rz-splitbutton > .rz-button:first-child {
    border-radius: var(--rz-button-border-radius);
}

html .rz-profile-menu.menu-linha {
    display: inline-flex;
    background-color: transparent;
    border: none;
    padding: 0;
}

html .rz-profile-menu.menu-linha > .rz-navigation-item {
    border-radius: var(--rz-button-border-radius);
}

html .rz-profile-menu.menu-linha > .rz-navigation-item > .rz-navigation-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    color: var(--cds-color-neutral-strong);
}

html .rz-profile-menu.menu-linha > .rz-navigation-item > .rz-navigation-item-wrapper .rzi {
    font-size: 18px;
}

html .rz-profile-menu.menu-linha > .rz-navigation-item:hover {
    background-color: var(--cds-color-offwhite);
}

html .rz-profile-menu.menu-linha > .rz-navigation-item:hover > .rz-navigation-item-wrapper {
    color: var(--cds-color-primary);
}

/* O ⋮ da direita tem a borda dos botões Base contornados ao lado (Exportar, Excluir). */
html .rz-profile-menu.navegador-mais > .rz-navigation-item {
    box-shadow: inset 0 0 0 var(--rz-border-width, 1px) var(--cds-color-neutral);
}

html .rz-profile-menu.menu-linha .rz-navigation-menu {
    min-width: 200px;
    z-index: 1001;
}

.menu-linha-texto.desabilitado {
    opacity: 0.5;
}

html .rz-profile-menu.menu-linha .rz-navigation-item:has(.menu-linha-texto.desabilitado) {
    cursor: default;
}

.navegador-exportar > .rz-button:first-child .rz-button-box::after {
    content: "keyboard_arrow_down";
    margin-left: 4px;
    font-family: var(--rz-icon-font-family);
    font-feature-settings: "liga";
    font-size: 16px;
    line-height: 1;
}

/* Busca de programa (D7 do lote FTB): mais acessados em 5 colunas, a linha marcada pelas setas, o "aproximado" em destaque e as dicas do
   teclado no rodapé. */
.busca-programa {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.busca-programa-secao {
    font: 600 11px var(--cds-font-family);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cds-text-grey);
    margin-bottom: -6px;
}

.busca-programa-atalhos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

html .busca-programa-atalhos .rz-button.busca-programa-atalho {
    justify-content: flex-start;
    min-width: 0;
    font-weight: 400;
    text-transform: none;
}

html .busca-programa-atalhos .busca-programa-atalho .rz-button-box {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.busca-programa-tecla,
.busca-programa-dicas kbd {
    padding: 1px 5px;
    border: 1px solid var(--cds-color-disabled);
    border-radius: 3px;
    background: var(--cds-color-offwhite);
    font: 500 11px var(--cds-font-family);
    color: var(--cds-text-grey);
}

.busca-programa-atalho-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.busca-programa-resultados .rz-data-row {
    cursor: pointer;
}

/* A grade pinta as linhas pares e ímpares com prioridade alta: a marcada precisa do !important. */
html .busca-programa-resultados tr.busca-programa-marcado > td {
    background-color: var(--cds-color-primary-weak) !important;
}

.busca-programa-nome {
    font-weight: 500;
}

.busca-programa-menu {
    color: var(--cds-text-grey);
}

.busca-programa-onde-ficava {
    display: block;
    color: var(--cds-text-grey);
}

.busca-programa-origem {
    font-size: 12px;
    color: var(--cds-text-grey);
}

.busca-programa-origem.aproximado {
    color: var(--cds-alert-text);
}

.busca-programa-dicas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--cds-text-grey);
}

@media (max-width: 600px) {
    .busca-programa-atalhos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .busca-programa-dicas {
        display: none;
    }
}

/* Avaliar programa (D5): estrelas em alert (amarelo); o X de limpar só com avaliação registrada. */
html .avaliacao-programa .rz-rating {
    --rz-rating-color: var(--cds-color-neutral);
    --rz-rating-selected-color: var(--cds-color-alert);
    --rz-rating-ban-icon-color: var(--cds-color-neutral);
    --rz-rating-font-size: 28px;
}

html .avaliacao-programa .rz-rating.sem-avaliacao .rz-rating-cancel {
    display: none;
}

/* Abas, grupos de campos e corpo da página: o padrão do Radzen somava margens em cada nível. */
html:root {
    --rz-tabs-padding: 12px;
    --rz-fieldset-padding: 8px;
    /* Cada página já tem a margem de 12px do .cds-page-header-wrapper; o corpo do layout somava outros 16px. */
    --rz-layout-body-padding: 0;
}

/* Tabela: table.cds-table (table/table.css). Cabeçalho azul-claro em 13px/700, linhas alternadas, hover e seleção #e6f0ff,
   divisória das linhas e rodapé no mesmo azul do cabeçalho; a tabela fica num cartão branco (.cds-table-card). */
html:root {
    --rz-grid-header-background-color: var(--cds-table-header-blue-background);
    --rz-grid-header-sorted-background-color: var(--cds-table-header-blue-background);
    --rz-grid-header-color: var(--cds-text-offblack);
    --rz-grid-header-font-size: 13px;
    --rz-grid-header-font-weight: 700;
    --rz-grid-header-line-height: 15px;
    /* Sem divisórias verticais e sem a borda #a6b3c1 do cabeçalho: só a borda inferior das linhas, #d7dce1 (tbody tr do table.css), C5-P6. */
    --rz-grid-header-cell-border: none;
    --rz-grid-header-cell-border-bottom: 1px solid var(--cds-table-columns-divider);
    --rz-grid-cell-color: var(--cds-text-offblack);
    --rz-grid-cell-font-size: 13px;
    --rz-grid-cell-line-height: 15px;
    --rz-grid-cell-padding: 8px;
    --rz-grid-cell-border: none;
    --rz-grid-bottom-cell-border: 1px solid var(--cds-table-columns-divider);
    --rz-grid-right-cell-border: none;
    --rz-grid-stripe-background-color: var(--cds-table-row-odd);
    --rz-grid-stripe-odd-background-color: var(--cds-table-row-even);
    --rz-grid-hover-background-color: var(--cds-table-row-hover);
    --rz-grid-hover-color: var(--cds-text-offblack);
    --rz-grid-selected-background-color: var(--cds-table-row-hover);
    --rz-grid-selected-color: var(--cds-text-offblack);
    --rz-grid-foot-background-color: var(--cds-table-header-blue-background);
    --rz-grid-foot-cell-color: var(--cds-text-offblack);
    --rz-grid-background-color: var(--cds-color-white);
    --rz-grid-border-radius: 8px;
    --rz-grid-shadow: var(--cds-panel-shadow);
    --rz-grid-sort-icon-color: var(--cds-color-grey);
}

/* Linha de 32px como a da cds-table (td e th com 8px em cima e embaixo), também na densidade compacta que as grades da lib usam, C5-P6.
   O seletor precisa do .rz-data-grid para vencer o do Radzen, que define as variáveis no próprio componente. */
html .rz-data-grid.rz-density-compact {
    --rz-grid-cell-padding: 8px;
    --rz-grid-cell-line-height: 15px;
    --rz-grid-header-cell-padding: 8px 0;
}

html .rz-data-grid {
    overflow: hidden;
}

/* Navegador: o cabeçalho de conteúdo (quantidade de registros e agrupamento) e a grade num cartão só, como o .cds-content-header-card sobre o
   .cds-table-card (globals.css), C5-P19. */
.navegador-conteudo {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border-radius: 8px;
    background-color: var(--cds-color-white);
    box-shadow: var(--cds-panel-shadow);
}

.navegador-conteudo > .navegador-conteudo-cabecalho {
    padding: 8px;
}

.navegador-conteudo > .navegador-area {
    padding: 0 8px 8px 8px;
}

html .navegador-conteudo .rz-data-grid {
    --rz-grid-shadow: none;
    --rz-grid-border-radius: 3px;
}

/* Números: .cds-cell-numeral (alinhado à direita, 700) com algarismos de largura fixa (font-variant-numeric: tabular-nums,
   como os valores do AGO), para as casas decimais ficarem alinhadas na coluna. */
html .rz-grid-table td,
html .rz-grid-table th {
    font-variant-numeric: tabular-nums;
}

html .rz-grid-table .celula-numero {
    font-weight: 700;
}

/* Caixa de marcação: input[type="checkbox"].cds-form-control (20px, raio 3px; marcada com o primary-medium). */
html:root {
    --rz-checkbox-border-radius: 3px;
    --rz-checkbox-checked-background-color: var(--cds-color-primary-medium);
    --rz-checkbox-checked-border: 2px solid var(--cds-color-primary-medium);
    --rz-checkbox-checked-hover-background-color: var(--cds-color-primary-medium);
    --rz-checkbox-checked-color: var(--cds-color-white);
    --rz-checkbox-checked-icon-background-color: var(--cds-color-primary-medium);
}

/* Na tabela: checkbox .small (16px). */
html .rz-grid-table .rz-chkbox {
    --rz-checkbox-width: 16px;
    --rz-checkbox-height: 16px;
    --rz-checkbox-icon-width: 12px;
    --rz-checkbox-icon-height: 12px;
    --rz-checkbox-icon-font-size: 12px;
}

/* MX-B4 (Q671, nested-interactive): a caixa e o botão de opção do Radzen são o div com role checkbox ou radio, que recebe o foco e o nome; o
   input nativo dentro dele (aria-hidden, tabindex -1) ainda podia receber o foco dos leitores de tela. Fora do leiaute ele sai da árvore de
   acessibilidade e do foco, e o rótulo com for continua marcando a caixa pelo clique. */
html .rz-chkbox > .rz-helper-hidden-accessible,
html .rz-radiobutton > .rz-helper-hidden-accessible {
    display: none;
}

/* Abas: button.cds-tab-btn (tabs/tabs.css). 14px/500 em neutral-strong; a ativa em primary, 700, fundo offblue e borda inferior. */
html:root {
    --rz-tabs-tab-background-color: transparent;
    --rz-tabs-tab-color: var(--cds-color-neutral-strong);
    --rz-tabs-tab-font-size: 14px;
    --rz-tabs-tab-font-weight: 500;
    --rz-tabs-tab-line-height: 18px;
    --rz-tabs-tab-padding-block: 8px;
    --rz-tabs-tab-padding-inline: 12px;
    /* Hover do button.cds-tab-btn: fundo offblue e borda inferior primary-weak (C5-P9). */
    --rz-tabs-tab-hover-background-color: var(--cds-color-offblue);
    --rz-tabs-tab-hover-color: var(--cds-color-primary);
    --rz-tabs-tab-selected-background-color: var(--cds-color-offblue);
    --rz-tabs-tab-selected-color: var(--cds-color-primary);
    --rz-tabs-tab-selected-top-border-color: transparent;
    --rz-tabs-border: 1px solid var(--cds-color-grey-light);
}

html .rz-tabview .rz-tabview-nav li {
    border-radius: 3px 3px 0 0;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}

html .rz-tabview .rz-tabview-nav li.rz-tabview-selected {
    border-bottom: 2px solid var(--cds-color-primary);
    font-weight: 700;
}

html .rz-tabview .rz-tabview-nav li:not(.rz-tabview-selected):not(.rz-state-disabled):hover {
    border-bottom-color: var(--cds-color-primary-weak);
}

/* Abas do formulário num cartão: .cds-main-tab-content (tabs.css), fundo branco, padding 8px, raio 8px e sombra; a faixa das abas com a
   borda inferior do .cds-tab-buttons-wrapper e o conteúdo sem borda própria, C5-P19. O rodapé de totais fica no mesmo cartão, abaixo do
   conteúdo das abas e separado por uma linha (Q674, MX6b-Q4): a sombra é do .cartao-formulario, que envolve os dois. */
html .cartao-formulario {
    border-radius: 8px;
    background-color: var(--cds-color-white);
    box-shadow: var(--cds-panel-shadow);
}

html .abas-formulario.rz-tabview {
    padding: 8px;
    border-radius: 8px;
    background-color: var(--cds-color-white);
}

html .rodape-formulario {
    padding: 8px;
    border-top: 1px solid var(--cds-color-grey-light);
}

html .abas-formulario > .rz-tabview-nav {
    border-bottom: 1px solid var(--cds-color-grey-light);
}

html .abas-formulario > .rz-tabview-panels {
    border: none;
    box-shadow: none;
}

/* Formulário com muitas abas (ex.: Cadastro de Parceiros do RZ, 35 abas): a faixa quebra em linhas e a página não passa da largura da tela. */
html .rz-tabview .rz-tabview-nav {
    flex-wrap: wrap;
}

html .rz-tabview .rz-tabview-nav li {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Cabeçalho da página: cds-page-header (page-header.css, breadcrumb.css). Cartão branco com sombra; trilha em cinza com a página
   ativa em primary; título da ficha em 18px/600 primary; ações à direita, alinhadas pela base. */
.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: var(--cds-color-white);
    box-shadow: var(--cds-panel-shadow);
}

/* Faixa de pesquisa: linha inteira abaixo da trilha e das ações, separada por um traço; só ela quebra linha. */
.cabecalho-pagina-pesquisa {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    flex-basis: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--cds-color-disabled);
}

.cabecalho-pagina-conteudo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
}

.cabecalho-pagina-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    flex: 1;
}

.trilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    font-size: 14px;
    /* O cinza do breadcrumb.css (#747d86) dá 4,18:1 sobre branco; o text-grey dá 5,92:1 (Q83). */
    color: var(--cds-text-grey);
}

.trilha-passo {
    font-weight: 500;
}

.trilha-ativo {
    font-weight: 600;
    color: var(--cds-color-primary);
}

html .trilha .trilha-seta {
    font-size: 14px;
    color: var(--cds-color-grey);
}

.trilha-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--cds-color-neutral-strong);
    cursor: pointer;
}

.trilha-voltar:hover {
    background-color: var(--cds-color-offwhite);
    color: var(--cds-color-primary);
}

.titulo-pagina {
    margin: 0;
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--cds-color-primary);
}

/* Variante ficha do cabeçalho (page-header.css: icon-container, main-content-overline, main-content-title e details-row), C5-P17. */
.cabecalho-ficha {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.cabecalho-ficha-icone {
    display: flex;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    background: var(--cds-color-primary-wash);
    border-radius: 8px;
}

html .cabecalho-ficha-icone .rzi {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--cds-color-primary-medium);
}

.cabecalho-ficha-conteudo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cabecalho-ficha-sobretitulo {
    font-size: 10px;
    line-height: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--cds-color-neutral-strong);
}

.cabecalho-ficha-titulo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.cabecalho-ficha-metadados {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 400;
    color: var(--cds-color-neutral-strong);
}

.cabecalho-ficha-metadados > span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cabecalho-ficha-metadados > .cabecalho-ficha-divisor {
    padding: 0 12px;
}

html .cabecalho-ficha-metadados .rzi {
    font-size: 12px;
    width: 12px;
    height: 12px;
    color: var(--cds-color-neutral);
}

/* Lista de seleção: .cds-select (forms.css). Mesma caixa do campo de texto: 38px, borda neutral-medium (Q86), raio 8px, texto 13px cinza. */
html .rz-dropdown,
html .rz-multiselect {
    min-height: 38px;
    border: 1px solid var(--cds-color-neutral-medium);
    border-radius: 8px;
    background-color: var(--cds-color-white);
    box-shadow: none;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.005em;
    color: var(--cds-text-grey);
}

html .rz-dropdown .rz-dropdown-label,
html .rz-multiselect .rz-multiselect-label {
    padding-inline: 8px;
    color: var(--cds-text-grey);
}

html .rz-dropdown .rz-dropdown-trigger,
html .rz-multiselect .rz-multiselect-trigger {
    color: var(--cds-color-grey);
}

html .rz-dropdown.rz-state-focused,
html .rz-dropdown:focus-within,
html .rz-multiselect:focus-within {
    border: 1px solid var(--cds-color-primary);
    outline: 0;
    box-shadow: var(--cds-form-outer-glow);
}

/* Campo desabilitado: fundo offwhite do input.cds-form-control:disabled; texto cinza no lugar do neutral do CDS (2,58:1), Q83. */
html .rz-textbox:disabled,
html .rz-inputtext:disabled,
html .rz-textarea:disabled,
html .rz-dropdown.rz-state-disabled,
html .rz-numeric.rz-state-disabled,
html .rz-datepicker.rz-state-disabled {
    background-color: var(--cds-color-offwhite);
    color: var(--cds-text-grey);
    cursor: default;
}

/* Campo numérico: alinhado à direita com algarismos de largura fixa, como os números da tabela. O fim do texto não pode ficar sob as
   setas de aumentar e diminuir (32px; o Radzen reserva só 20px), senão o valor e o "De"/"Até" do Filtro Inteligente saem cortados. */
html .rz-numeric input,
html input.campo-numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

html .rz-numeric:has(.rz-numeric-button) input {
    padding-inline-end: 36px;
}

/* Diálogo: .cds-modal (modal.css). Fundo rgba(24,26,34,.4), cartão branco de raio 8px, título 17px/600 primary com divisória,
   conteúdo com 16px. */
html:root {
    --rz-dialog-mask-background-color: rgb(24, 26, 34);
    --rz-dialog-border-radius: 8px;
    --rz-dialog-shadow: var(--cds-shadow-strong);
    --rz-dialog-background-color: var(--cds-color-white);
    --rz-dialog-title-background-color: var(--cds-color-white);
    --rz-dialog-title-color: var(--cds-color-primary);
    --rz-dialog-title-font-size: 17px;
    --rz-dialog-title-font-weight: 600;
    --rz-dialog-title-letter-spacing: 0;
    --rz-dialog-title-line-height: 22px;
    --rz-dialog-title-padding-block: 16px;
    --rz-dialog-title-padding-inline: 16px;
    --rz-dialog-title-border: 1px solid var(--cds-color-disabled);
    --rz-dialog-content-padding: 16px;
    --rz-dialog-close-color: var(--cds-color-neutral-strong);
    --rz-dialog-close-hover-color: var(--cds-color-primary);
}

html .rz-dialog-mask {
    opacity: 0.4;
}

/* Alerta: .cds-alert-container.card (alerts.css), C5-P10. Fundo wash, borda 1px no tom light, raio 8px, texto 13px e o ícone numa caixa de
   24px no tom weak. Vale para o Flat e o Filled (o shell usa o Flat). Texto e ícone no tom da escala que dá contraste: o crítico usa o
   critical-medium do CDS (5,42:1); o neutro, padrão do Info e dos outros estilos (o CDS não tem alerta de informação), o neutral-strong (5,49:1);
   no amarelo e no verde nenhum tom da escala dá 4,5:1 sobre o wash (alert-medium 2,47:1, alert-dark 4,38:1; success-medium 2,72:1,
   success-strong 4,46:1), e o texto é o offblack, com o ícone em alert-dark e success-strong. */
html .rz-alert:not(.rz-variant-outlined):not(.rz-variant-text) {
    --alerta-fundo: var(--cds-color-neutral-wash);
    --alerta-borda: var(--cds-color-neutral-light);
    --alerta-caixa: var(--cds-color-neutral-weak);
    --alerta-texto: var(--cds-color-neutral-strong);
    --alerta-icone: var(--cds-color-neutral-strong);
    --alerta-sombra: 2px 2px 4px #003d8d20;
    --rz-alert-gap: 12px;
    --rz-alert-padding: 8px;
    --rz-alert-border-radius: 8px;
    --rz-alert-icon-size: 18px;
    --rz-alert-icon-margin: 0;
    --rz-alert-message-margin: 2px 0;
    align-items: center;
    border: 1px solid var(--alerta-borda);
    background-color: var(--alerta-fundo);
    box-shadow: var(--alerta-sombra);
    --rz-alert-background-color: var(--alerta-fundo);
    --rz-alert-color: var(--alerta-texto);
    --rz-alert-title-color: var(--alerta-texto);
    --rz-alert-icon-color: var(--alerta-icone);
    font-size: 13px;
    line-height: 18px;
}

html .rz-alert:not(.rz-variant-outlined):not(.rz-variant-text) .rz-alert-item {
    align-items: center;
}

html .rz-alert:not(.rz-variant-outlined):not(.rz-variant-text) .rz-alert-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background-color: var(--alerta-caixa);
}

html .rz-alert.rz-warning:not(.rz-variant-outlined):not(.rz-variant-text) {
    --alerta-fundo: var(--cds-color-alert-wash);
    --alerta-borda: var(--cds-color-alert-light);
    --alerta-caixa: var(--cds-color-alert-weak);
    --alerta-texto: var(--cds-text-offblack);
    --alerta-icone: var(--cds-color-alert-dark);
    --alerta-sombra: 2px 2px 4px #88710020;
}

html .rz-alert.rz-danger:not(.rz-variant-outlined):not(.rz-variant-text) {
    --alerta-fundo: var(--cds-color-critical-wash);
    --alerta-borda: var(--cds-color-critical-light);
    --alerta-caixa: var(--cds-color-critical-weak);
    --alerta-texto: var(--cds-color-critical-medium);
    --alerta-icone: var(--cds-color-critical-medium);
    --alerta-sombra: 2px 2px 4px #80000020;
}

html .rz-alert.rz-success:not(.rz-variant-outlined):not(.rz-variant-text) {
    --alerta-fundo: var(--cds-color-success-wash);
    --alerta-borda: var(--cds-color-success-light);
    --alerta-caixa: var(--cds-color-success-weak);
    --alerta-texto: var(--cds-text-offblack);
    --alerta-icone: var(--cds-color-success-strong);
    --alerta-sombra: 2px 2px 4px #007e1920;
}

html .rz-alert.rz-primary:not(.rz-variant-outlined):not(.rz-variant-text) {
    --alerta-fundo: var(--cds-color-primary-wash);
    --alerta-borda: var(--cds-color-primary-weak);
    --alerta-caixa: var(--cds-color-primary-weak);
    --alerta-texto: var(--cds-color-primary);
    --alerta-icone: var(--cds-color-primary);
    --alerta-sombra: 2px 2px 4px #003d8d20;
}

/* Aviso: .alert-toast (alert-toast.css). Cartão branco com sombra, texto offblack e só o ícone na cor da gravidade. */
html:root {
    --rz-notification-border-radius: 8px;
    --rz-notification-padding: 16px;
    --rz-notification-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --rz-notification-success-background-color: var(--cds-color-white);
    --rz-notification-success-color: var(--cds-color-offblack);
    --rz-notification-success-icon-color: var(--cds-color-success);
    --rz-notification-warning-background-color: var(--cds-color-white);
    --rz-notification-warning-color: var(--cds-color-offblack);
    --rz-notification-warning-icon-color: var(--cds-color-alert);
    --rz-notification-error-background-color: var(--cds-color-white);
    --rz-notification-error-color: var(--cds-color-offblack);
    --rz-notification-error-icon-color: var(--cds-color-critical);
    --rz-notification-info-background-color: var(--cds-color-white);
    --rz-notification-info-color: var(--cds-color-offblack);
    --rz-notification-info-icon-color: var(--cds-color-primary);
}

/* Ações do programa ao lado da trilha: .cds-content-favorites-btn-group (page-header.css). */
.acoes-programa {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

/* Botão de ícone como o button.cds-modal-close-btn: ícone neutral-strong (o "texto" Light do Radzen parecia desabilitado);
   ao passar o mouse, primary sobre offwhite. A estrela de favorito marcada continua amarela. */
html .acoes-programa .rz-button.rz-variant-text {
    color: var(--cds-color-neutral-strong);
    background-color: transparent;
    padding: 4px;
}

html .acoes-programa .rz-button.rz-variant-text:not(.rz-state-disabled):hover {
    color: var(--cds-color-primary);
    background-color: var(--cds-color-offwhite);
}

html .acoes-programa .rz-button.favorito-ativo {
    color: var(--cds-color-alert);
}

/* Checkbox desabilitado: a borda clara sumia no fundo (Q83). */
html .rz-chkbox-box.rz-state-disabled {
    border-color: var(--cds-color-neutral-strong);
}

/* Menu lateral (plano S, S1; D6 do lote F4), como o protótipo do S0: faixa de 56 px em primary-strong com os ícones dos módulos e painel
   branco de 280 px. Recolhido, o painel abre por cima do conteúdo; fixado, o menu ocupa os 336 px e empurra o conteúdo. Abaixo de 600 px a
   faixa some e o menu vira gaveta, aberta pelo botão da barra do topo, com os módulos em linha no alto. */
.corpo-menu {
    display: flex;
    height: 100%;
    min-height: 0;
}

.corpo-menu > .area-programas {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-lateral {
    position: relative;
    flex: none;
    width: 56px;
    z-index: 30;
}

.menu-lateral.fixado {
    width: 336px;
}

.menu-lateral-faixa {
    position: absolute;
    inset: 0 auto 0 0;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    box-sizing: border-box;
    background-color: var(--cds-menu-faixa-fundo);
}

.menu-lateral-modulos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    margin: 6px 0;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.menu-lateral-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}

.menu-lateral-icone .rzi {
    font-size: 22px;
}

.menu-lateral-icone:hover,
.menu-lateral-icone.aberto {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--cds-text-strong);
}

.menu-lateral-icone:focus-visible {
    outline: 2px solid var(--cds-text-strong);
    outline-offset: -2px;
}

.menu-lateral-fixar[aria-pressed="true"] {
    color: var(--cds-color-secondary-light);
}

.menu-lateral-fixar[aria-pressed="true"] .rzi {
    font-variation-settings: 'FILL' 1;
}

/* O nome do módulo só aparece na gaveta; na faixa ele fica no title. */
.menu-lateral-modulo-nome,
.menu-lateral-fechar-gaveta {
    display: none;
}

.menu-lateral-painel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 56px;
    width: 280px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: var(--cds-color-white);
    border-right: 1px solid var(--cds-color-grey-light);
    box-shadow: var(--cds-widget-outer-shadow);
}

.menu-lateral.fixado .menu-lateral-painel {
    box-shadow: none;
}

.menu-lateral-busca {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin: 10px 10px 4px;
    padding: 0 8px;
    border: 1px solid var(--cds-color-grey-light);
    border-radius: 6px;
    color: var(--cds-color-neutral-strong);
}

.menu-lateral-busca:focus-within {
    border-color: var(--cds-color-primary-medium);
    box-shadow: 0 0 0 1px var(--cds-color-primary-medium);
}

.menu-lateral-busca input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--cds-text-offblack);
}

.menu-lateral-titulo {
    flex: none;
    padding: 8px 14px 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cds-color-primary-strong);
}

.menu-lateral-arvore,
.menu-lateral-arvore ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-lateral-arvore {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 6px 8px;
    font-size: 13px;
}

.menu-lateral-arvore ul {
    padding-left: 12px;
}

.menu-lateral-pasta-titulo,
.menu-lateral-item > a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    color: var(--cds-text-offblack);
}

.menu-lateral-pasta-titulo .rzi,
.menu-lateral-item > a .rzi {
    flex: none;
    font-size: 18px;
    color: var(--cds-color-primary);
}

.menu-lateral-secao > .menu-lateral-pasta-titulo {
    font-weight: 600;
    color: var(--cds-color-neutral-strong);
}

.menu-lateral-pasta-titulo:hover,
.menu-lateral-item > a:hover {
    background-color: var(--cds-main-menu-hover-background);
    color: var(--cds-text-primary);
}

.menu-lateral-arvore [role=treeitem]:focus {
    outline: none;
}

.menu-lateral-arvore [role=treeitem]:focus-visible > .menu-lateral-pasta-titulo,
.menu-lateral-arvore [role=treeitem]:focus-visible > a {
    outline: 2px solid var(--cds-color-primary-light);
    outline-offset: -2px;
    background-color: var(--cds-main-menu-hover-background);
}

.menu-lateral-item-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menu-lateral-item-texto small {
    font-size: 11px;
    color: var(--cds-color-neutral-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-lateral-cliente {
    flex: none;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 16px;
    color: var(--cds-color-neutral-strong);
    background-color: var(--cds-color-grey-light);
}

.menu-lateral-titulo-modulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.menu-lateral-enxuto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    color: var(--cds-color-neutral-strong);
    cursor: pointer;
}

.menu-lateral-ver-todos button {
    margin: 0 0 4px 30px;
    padding: 2px 4px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 12px;
    color: var(--cds-text-primary);
    cursor: pointer;
}

.menu-lateral-ver-todos button:hover {
    text-decoration: underline;
}

.menu-lateral-onde-ficava {
    font-style: italic;
}

.menu-lateral-vazio {
    margin: 4px 14px;
    font-size: 13px;
    color: var(--cds-color-neutral-strong);
}

.menu-lateral-acao {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin: 4px 6px 10px;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--cds-text-primary);
    cursor: pointer;
}

.menu-lateral-acao:hover {
    background-color: var(--cds-main-menu-hover-background);
}

/* Fundo transparente do painel aberto pelo clique: o clique fora fecha. */
.menu-lateral-fundo {
    position: fixed;
    inset: 0;
    z-index: 25;
}

.barra-topo-gaveta {
    display: none;
}

@media (max-width: 600px) {
    .menu-lateral,
    .menu-lateral.fixado {
        display: none;
    }

    .menu-lateral.gaveta-aberta {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, calc(100vw - 40px));
        z-index: 1001;
        background-color: var(--cds-color-white);
        box-shadow: var(--cds-widget-outer-shadow);
    }

    .menu-lateral.gaveta-aberta .menu-lateral-faixa {
        position: static;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 4px;
    }

    .menu-lateral.gaveta-aberta .menu-lateral-modulos {
        flex-direction: row;
        flex-wrap: wrap;
        order: 5;
        width: 100%;
        margin: 4px 0 0;
        padding: 4px 0 0;
        overflow: visible;
    }

    .menu-lateral.gaveta-aberta .menu-lateral-fechar-gaveta {
        display: inline-flex;
        order: 4;
        margin-left: auto;
    }

    .menu-lateral.gaveta-aberta .menu-lateral-fixar {
        display: none;
    }

    .menu-lateral.gaveta-aberta .menu-lateral-painel {
        position: static;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        box-shadow: none;
        border-right: none;
    }

    .menu-lateral-fundo.gaveta {
        z-index: 1000;
        background-color: rgba(0, 0, 0, 0.32);
    }

    .barra-topo-gaveta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        margin-left: -8px;
        padding: 0;
        border: none;
        border-radius: 4px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .barra-topo-gaveta .rzi {
        font-size: 24px;
    }

    .barra-topo-gaveta:focus-visible {
        outline: 2px solid var(--cds-text-strong);
        outline-offset: -2px;
    }
}

/* Abas de programas (C6.1): .cds-tab-buttons-wrapper e .cds-tab-btn (tabs/tabs.css) logo abaixo da barra do topo. A aba ativa fica
   em primary, com a borda de baixo de 2px; o X fecha a aba. O conteúdo de cada aba ocupa a altura que sobra. */
.area-programas {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
}

.barra-abas {
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* Celular (C6.4): rola de lado pelo toque sem arrastar a página junto. */
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    background-color: var(--cds-color-white);
    border-bottom: 1px solid var(--cds-color-grey-light);
}

.barra-abas-item {
    display: flex;
    align-items: center;
    flex: none;
    max-width: 240px;
    margin-bottom: -1px;
    border-radius: 3px 3px 0 0;
    border-bottom: 2px solid transparent;
    color: var(--cds-color-neutral-strong);
    transition: color 150ms, background-color 150ms, border-color 150ms;
    /* O toque longo abre o menu da aba (app.js), sem selecionar o texto nem abrir o menu do navegador. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.barra-abas-item:hover {
    background: var(--cds-color-offblue);
    border-bottom-color: var(--cds-color-primary-weak);
}

.barra-abas-item.ativa {
    background: var(--cds-color-offblue);
    color: var(--cds-color-primary);
    border-bottom-color: var(--cds-color-primary);
}

.barra-abas-titulo {
    overflow: hidden;
    padding: 6px 4px 6px 12px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: var(--cds-font-family);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.barra-abas-item.ativa .barra-abas-titulo {
    font-weight: 700;
}

/* Fechar e "mais" com alvo de 24x24 px (WCAG 2.5.8, MX-B4, Q671), sem encolher com o título longo; o ícone continua com 16 px. */
.barra-abas-fechar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--cds-color-neutral-medium);
    cursor: pointer;
}

.barra-abas-fechar .rzi {
    font-size: 16px;
}

.barra-abas-fechar:hover {
    background: var(--cds-color-primary-weak);
    color: var(--cds-color-primary-strong);
}

/* "Mais" da aba: abre o menu da aba pelo teclado; aparece na aba ativa, ao passar o mouse e com o foco. */
.barra-abas-mais {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--cds-color-neutral-medium);
    cursor: pointer;
    opacity: 0;
}

.barra-abas-mais .rzi {
    font-size: 16px;
}

.barra-abas-item.ativa .barra-abas-mais,
.barra-abas-item:hover .barra-abas-mais,
.barra-abas-mais:focus-visible,
.barra-abas-mais[aria-expanded="true"] {
    opacity: 1;
}

.barra-abas-mais:hover {
    background: var(--cds-color-primary-weak);
    color: var(--cds-color-primary-strong);
}

.menu-aba-fundo {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.menu-aba {
    position: fixed;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 4px 0;
    border: 1px solid var(--cds-color-grey-light);
    border-radius: 4px;
    background: var(--cds-color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.menu-aba-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--cds-color-neutral-strong);
    font-family: var(--cds-font-family);
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    cursor: pointer;
}

.menu-aba-item .rzi {
    font-size: 16px;
    color: var(--cds-color-neutral-medium);
}

.menu-aba-item:hover:not(:disabled),
.menu-aba-item:focus-visible {
    background: var(--cds-color-offblue);
    color: var(--cds-color-primary);
    outline: none;
}

.menu-aba-item:disabled {
    color: var(--cds-color-neutral-medium);
    cursor: default;
}

.lista-pendencias {
    margin: 0;
    padding-left: 20px;
    font-family: var(--cds-font-family);
    font-size: 14px;
    font-weight: 500;
}

.barra-abas-titulo:focus-visible,
.barra-abas-mais:focus-visible,
.barra-abas-fechar:focus-visible {
    outline: 2px solid var(--cds-color-primary-light);
    outline-offset: -2px;
}

/* O conteúdo das abas e o da rota ocupam a mesma célula, embaixo da barra. A aba escondida fica na célula com o mesmo tamanho da exibida,
   invisível, por baixo e inerte (L892): a grade virtual dela mede a área e desenha as linhas enquanto escondida, e a troca de aba só troca a
   classe. overflow: clip não deixa o conteúdo dela aumentar a rolagem da página. */
.conteudo-aba,
.conteudo-rota {
    grid-row: 2;
    grid-column: 1;
    min-height: 0;
    min-width: 0;
}

.conteudo-aba-escondida {
    position: relative;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    overflow: clip;
    pointer-events: none;
}

/* O Radzen põe visibility: visible no conteúdo do expander aberto, que apareceria através da aba escondida e contaria como visível para
   leitores de tela e para o Playwright (:visible, papéis). */
.conteudo-aba-escondida .rz-expander.rz-state-expanded > .rz-expander-content {
    visibility: hidden;
}

/* Toque (celular, tablet e app instalado, C6.4): fechar e "mais" com área de toque de 44 px (WCAG 2.5.5); o ícone continua do mesmo tamanho. */
@media (pointer: coarse) {
    .barra-abas-titulo {
        min-height: 44px;
    }

    .barra-abas-fechar,
    .barra-abas-mais {
        width: 44px;
        height: 44px;
        margin-right: 0;
    }

    .barra-abas-fechar .rzi,
    .barra-abas-mais .rzi {
        font-size: 20px;
    }

    /* Sem mouse não há passar por cima: o "mais" só ocupa lugar na aba ativa; nas outras, o menu abre pelo toque longo. */
    .barra-abas-item:not(.ativa) .barra-abas-mais:not([aria-expanded="true"]) {
        display: none;
    }
}

/* Tela estreita: mais abas cabem na largura. */
@media (max-width: 600px) {
    .barra-abas {
        padding: 4px 4px 0;
    }

    .barra-abas-item {
        max-width: 180px;
    }
}

/*
 * Modo escuro (plano DK, lote DK1; Q450, Q451, Q461). Tokens do tema Escuro do Cerrado (omni/cerrado-design-system, theme-escuro.css,
 * commit dfec359 do DK0) e o mapeamento das variáveis do Radzen. Liga com data-tema="escuro" no <html>, ou data-tema="sistema" com
 * prefers-color-scheme: dark.
 * Os dois ficam sob @media screen: impressão e PDF da tela saem sempre no claro (DK3).
 * Sem atributo, ou com data-tema="claro", fica o claro. Os dois blocos abaixo têm as mesmas declarações (TemaEscuroCssTests confere).
 */
@media screen {
    html:root[data-tema="escuro"] {
        color-scheme: dark;
        /* Escala do Cerrado (DK0): um valor escuro para cada --cds-color-*. */
        --cds-color-neutral: #8ea3b3;
        --cds-color-neutral-wash: #1a232b;
        --cds-color-neutral-weak: #26313b;
        --cds-color-neutral-light: #7d93a3;
        --cds-color-neutral-medium: #a3b3c1;
        --cds-color-neutral-strong: #c3d0db;
        --cds-color-primary: #5aa7f0;
        --cds-color-primary-wash: #17222e;
        --cds-color-primary-weak: #1d3a5c;
        --cds-color-primary-light: #4db8ff;
        --cds-color-primary-medium: #78b8f4;
        --cds-color-primary-strong: #8cc6f7;
        --cds-color-secondary: #ff7424;
        --cds-color-secondary-weak: #3d2416;
        --cds-color-secondary-light: #fd8a47;
        --cds-color-secondary-medium: #ff8a45;
        --cds-color-secondary-strong: #ffb28a;
        --cds-color-success: #26c08a;
        --cds-color-success-wash: #10241d;
        --cds-color-success-weak: #153b2d;
        --cds-color-success-light: #1aeda1;
        --cds-color-success-medium: #2fd39a;
        --cds-color-success-strong: #7fe3c0;
        --cds-color-alert: #f9ad00;
        --cds-color-alert-wash: #2a2410;
        --cds-color-alert-weak: #3d3212;
        --cds-color-alert-light: #f9d966;
        --cds-color-alert-medium: #d69601;
        --cds-color-alert-strong: #ffc233;
        --cds-color-alert-dark: #ffd36b;
        --cds-color-critical: #ff4f8a;
        --cds-color-critical-wash: #2a1520;
        --cds-color-critical-weak: #4a1c2e;
        --cds-color-critical-light: #f45d8b;
        --cds-color-critical-medium: #ff6b9a;
        --cds-color-critical-strong: #ff9ab9;
        --cds-color-purple: #d15ae9;
        --cds-color-purple-wash: #2a1730;
        --cds-color-purple-weak: #3b1f45;
        --cds-color-purple-light: #c86fe6;
        --cds-color-purple-medium: #e08af0;
        --cds-color-purple-strong: #ecb3f7;
        --cds-color-petrol: #1fb5cc;
        --cds-color-petrol-wash: #0e2529;
        --cds-color-petrol-weak: #12383f;
        --cds-color-petrol-light: #2ac6dd;
        --cds-color-petrol-medium: #5cd3e6;
        --cds-color-petrol-strong: #8ee3ef;
        --cds-color-magenta: #ff4f9a;
        --cds-color-magenta-wash: #2a1220;
        --cds-color-magenta-weak: #4a1834;
        --cds-color-magenta-light: #f06aa8;
        --cds-color-magenta-medium: #ff7ab3;
        --cds-color-magenta-strong: #ffa8cf;
        --cds-color-disabled: #2a3540;
        --cds-color-white: #151c23;
        --cds-color-black: #ffffff;
        --cds-color-grey: #8a96a3;
        --cds-color-grey-light: #26313b;
        --cds-color-offwhite: #1b242d;
        --cds-color-offblack: #e8eef3;
        /* Semânticos do Adaptive Omni. */
        --cds-bg-app: #0d1217;
        --cds-bg-surface: #151c23;
        --cds-bg-offwhite: #1b242d;
        --cds-bg-offblue: #17222e;
        --cds-bg-page-header: #121920;
        --cds-bg-topbar: #151c23;
        --cds-bg-menu-hover: #1f2a35;
        --cds-bg-form: #1b242d;
        --cds-bg-form-light: #182029;
        --cds-bg-form-strong: #232e39;
        --cds-bg-linha-selecionada: #1d3a5c;
        --cds-fg1: #e8eef3;
        --cds-fg2: #a3b3c1;
        --cds-fg-disabled: #5b6b79;
        --cds-fg-link: #5aa7f0;
        --cds-fg-topbar: #e8eef3;
        --cds-brand: #5aa7f0;
        --cds-brand-on: #0b1a2b;
        --cds-brand-text: #8cc6f7;
        --cds-brand-soft: #1f3040;
        --cds-border: #26313b;
        --cds-border-strong: #5b6b79;
        --cds-border-divider: #222c36;
        --cds-border-focus: #3d86cc;
        --cds-success-text: #2fd39a;
        --cds-alert-text: #ffc233;
        --cds-critical-text: #ff6b9a;
        --cds-info-text: #5aa7f0;
        --cds-secondary-text: #ff9a5c;
        --cds-seq-brand-0: #1f2932;
        --cds-seq-brand-1: #1d3d5e;
        --cds-seq-brand-2: #2a5f92;
        --cds-seq-brand-3: #3d86cc;
        --cds-seq-brand-4: #8cc6f7;
        /* Aliases com cor própria. */
        --cds-body-color-light: #121920;
        --cds-body-background: var(--cds-bg-app);
        --cds-text-disabled: #5b6b79;
        --cds-text-strong: #e8eef3;
        --cds-text-mid: #c3d0db;
        --cds-text-light: #a3b3c1;
        --cds-text-black: #e8eef3;
        --cds-text-grey: #a3b3c1;
        --cds-text-offwhite: #1b242d;
        --cds-text-offblack: #e8eef3;
        --cds-form-selected-border: #3d86cc;
        --cds-form-outer-glow: 0 0 0 3px #5aa7f066;
        --cds-panel-shadow: 0 0 0 1px #26313b;
        --cds-shadow-strong: 10px 10px 4px #00000066;
        --cds-table-header-blue-background: #1b242d;
        --cds-table-row-odd: #182029;
        --cds-table-row-hover: #1f2a35;
        --cds-table-columns-divider: #222c36;
        --cds-table-header-columns-divider: #5b6b79;
        --cds-top-bar-background: var(--cds-bg-topbar);
        --cds-top-bar-shadow: 0 1px 0 #26313b;
        --cds-main-menu-hover-background: var(--cds-bg-menu-hover);
        --cds-widget-outer-shadow: 0px 4px 12px #00000080;
        /* Cores próprias da lib. */
        --cds-border-soft: #222c36;
        --cds-bg-bolha: #1f2a35;
        --cds-borda-painel: #26313b;
        --cds-borda-suporte: #26313b;
        --cds-alert-soft: #3d3212;
        --cds-secondary-soft: #3d2416;
        --cds-aviso-fundo: #2a2410;
        --cds-aviso-borda: #ffc233;
        --cds-aviso-texto: #ffc233;
        --cds-aviso-texto-forte: #ffd36b;
        --cds-fg-forte: #e8eef3;
        --cds-pendente-texto: #ffc233;
        --cds-erro-texto: #ff9ab9;
        --cds-movel-erro-texto: #ff9ab9;
        --cds-grade-linha-selecionada: #1d3a5c;
        --cds-grade-linha-alterada: #2a2216;
        --cds-presenca-desconectado: #8195a6;
        --cds-presenca-online: #2fd39a;
        --cds-presenca-ausente: #ffc233;
        --cds-presenca-em-chamada: #ff6b9a;
        --cds-topo-busca-fundo: #1b242d;
        --cds-topo-busca-fundo-hover: #232e39;
        --cds-topo-busca-texto: #a3b3c1;
        --cds-menu-faixa-fundo: #121920;
        --cds-login-marca-inicio: #17222e;
        --cds-login-marca-fim: #0d1217;
        --cds-login-marca-texto: #e8eef3;
        --cds-login-marca-texto2: #a3b3c1;
        --cds-login-marca-rodape: #8195a6;
        /* Radzen: escala base com os cinzas do Omni e as variáveis que o tema standard-dark troca. */
        --rz-base-50: #1b242d;
        --rz-base-100: #1f2a35;
        --rz-base-200: #26313b;
        --rz-base-300: #3a4652;
        --rz-base-400: #5b6b79;
        --rz-base-500: #5b6b79;
        --rz-base-600: #3a4652;
        --rz-base-700: #26313b;
        --rz-base-800: #151c23;
        --rz-base-900: #0d1217;
        --rz-base: var(--rz-base-600);
        --rz-base-background-color: var(--cds-bg-surface);
        --rz-base-dark: var(--rz-base-700);
        --rz-base-darker: #000000;
        --rz-base-light: var(--rz-base-200);
        --rz-base-lighter: #ffffff;
        --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700);
        --rz-border-focus: var(--rz-border-width) solid var(--rz-base-500);
        --rz-border-hover: var(--rz-border-width) solid var(--rz-base-500);
        --rz-border-normal: var(--rz-border-width) solid var(--rz-base-600);
        --rz-button-base-background-color: var(--rz-base-700);
        --rz-button-base-color: var(--cds-text-black);
        --rz-card-flat-background-color: var(--cds-bg-offwhite);
        --rz-chart-axis-color: var(--rz-base-600);
        --rz-chat-message-assistant-background-color: var(--rz-base-dark);
        --rz-chat-message-assistant-color: var(--rz-on-base-dark);
        --rz-chip-background-color: var(--rz-base-600);
        --rz-colorpicker-handle-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3), 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.08);
        --rz-colorpicker-item-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
        --rz-colorpicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-datalist-border: var(--rz-border-base-700);
        --rz-datalist-item-border: var(--rz-border-base-700);
        --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-dark);
        --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary-dark);
        --rz-datepicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-dropdown-filter-border: var(--rz-border-base-700);
        --rz-editor-toolbar-background-color: var(--rz-base-700);
        --rz-fieldset-toggle-background-color: var(--rz-base-700);
        --rz-form-field-filled-background-color: var(--rz-base-700);
        --rz-form-field-filled-hover-background-color: var(--rz-base-600);
        --rz-form-field-label-focus-color: var(--rz-primary-light);
        --rz-gravatar-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
        --rz-grid-clear-filter-button-background-color: var(--rz-base);
        --rz-grid-clear-filter-button-color: var(--rz-on-base);
        --rz-grid-data-border-shadow: 0 1px 0 0 var(--rz-base-600), 0 -1px 0 0 var(--rz-base-600);
        --rz-grid-detail-template-background-color: var(--cds-bg-app);
        --rz-grid-filter-background-color: var(--rz-base-700);
        --rz-grid-filter-buttons-background-color: var(--rz-base-700);
        --rz-grid-frozen-cell-background-color: var(--cds-bg-surface);
        --rz-grid-frozen-cell-border: var(--rz-border-base-700);
        --rz-grid-group-header-item-border: var(--rz-border-base-700);
        --rz-listbox-filter-border: var(--rz-border-base-700);
        --rz-login-register-background-color: var(--cds-bg-app);
        --rz-menu-item-selected-color: var(--rz-on-primary-lighter);
        --rz-menu-top-item-background-color: transparent;
        --rz-menu-top-item-selected-color: var(--rz-on-primary-lighter);
        --rz-on-base: #ffffff;
        --rz-on-base-light: var(--rz-base-900);
        --rz-on-base-lighter: var(--rz-base-900);
        --rz-on-primary-light: #000000;
        --rz-overlay-background-color: var(--cds-bg-surface);
        --rz-overlay-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-panel-hover-color: var(--rz-primary-light);
        --rz-panel-menu-icon-color: var(--rz-text-color);
        --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-base-700);
        --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900);
        --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-700);
        --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-base-700);
        --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-900);
        --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-700);
        --rz-panel-menu-item-active-background-color: var(--rz-base-700);
        --rz-panel-menu-item-active-indicator: var(--cds-color-primary);
        --rz-panel-menu-item-background-color: var(--rz-base-800);
        --rz-panel-menu-item-border: var(--rz-border-base-800);
        --rz-panel-menu-item-color: var(--rz-text-color);
        --rz-panel-menu-item-hover-background-color: var(--rz-base-700);
        --rz-panel-toggle-icon-background-color: var(--rz-base-700);
        --rz-profile-menu-border: var(--rz-base-800);
        --rz-profile-menu-top-item-background-color: transparent;
        --rz-progressbar-background-color: var(--rz-base-700);
        --rz-radio-circle-background-color: var(--rz-primary-light);
        --rz-radio-circle-hover-background-color: var(--rz-primary);
        --rz-range-nav-handle-background-color: var(--rz-base-600);
        --rz-rating-focus-color: var(--rz-primary-light);
        --rz-scheduler-border-color: var(--rz-base-600);
        --rz-scheduler-header-background-color: var(--rz-base-700);
        --rz-scheduler-highlight-background-color: var(--rz-info-lighter);
        --rz-scheduler-minor-border-color: var(--rz-base-700);
        --rz-scheduler-other-month-background-color: var(--rz-base-700);
        --rz-scheduler-prev-next-button-background-color: var(--rz-base-600);
        --rz-scheduler-toolbar-background-color: var(--rz-base-700);
        --rz-scheduler-weekend-background-color: var(--rz-base-700);
        --rz-scheduler-weekend-color: var(--rz-text-tertiary-color);
        --rz-scrollbar-color: rgba(109, 111, 116, 0.5);
        --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18);
        --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.14), 0px 9px 20px rgba(0, 0, 0, 0.14), 0px 22px 64px rgba(0, 0, 0, 0.3);
        --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14);
        --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.14), 0px 8px 20px rgba(0, 0, 0, 0.21);
        --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.14), 0px 4px 6px rgba(0, 0, 0, 0.14), 0px 12px 24px rgba(0, 0, 0, 0.22);
        --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.14), 0px 5px 8px rgba(0, 0, 0, 0.14), 0px 14px 28px rgba(0, 0, 0, 0.23);
        --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.14), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 16px 32px rgba(0, 0, 0, 0.24);
        --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.14), 0px 7px 12px rgba(0, 0, 0, 0.14), 0px 18px 40px rgba(0, 0, 0, 0.25);
        --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.14), 0px 8px 16px rgba(0, 0, 0, 0.14), 0px 20px 48px rgba(0, 0, 0, 0.26);
        --rz-sidebar-background-color: var(--cds-bg-surface);
        --rz-sidebar-border-inline-end: var(--rz-border-base-700);
        --rz-sidebar-toggle-border: var(--rz-border-base-700);
        --rz-sidebar-toggle-color: var(--rz-text-color);
        --rz-sidebar-toggle-hover-color: var(--rz-text-title-color);
        --rz-skeleton-animation-color: var(--rz-base-500);
        --rz-skeleton-background-color: var(--rz-base-600);
        --rz-slider-border: var(--rz-border-normal);
        --rz-slider-disabled-handle-background-color: var(--rz-base-800);
        --rz-slider-disabled-handle-border: 0.25rem solid var(--rz-base-600);
        --rz-slider-disabled-range-background-color: var(--rz-base-600);
        --rz-slider-disabled-range-border: var(--rz-border-base-600);
        --rz-slider-handle-background-color: var(--rz-base-800);
        --rz-splitter-bar-background-color: var(--rz-base-700);
        --rz-splitter-bar-background-color-active: var(--rz-primary);
        --rz-splitter-bar-color: var(--rz-text-secondary-color);
        --rz-splitter-bar-color-active: var(--rz-on-primary);
        --rz-spreadsheet-cell-border: var(--rz-border-base-700);
        --rz-spreadsheet-header-background-color: var(--rz-base-800);
        --rz-spreadsheet-splitter-background-color: var(--rz-base-700);
        --rz-steps-number-background-color: var(--rz-base-700);
        --rz-switch-background-color: var(--rz-base-600);
        --rz-switch-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14);
        --rz-tabs-tab-focus-color: var(--rz-text-color);
        --rz-timeline-line-color: var(--rz-base-600);
        --rz-timespanpicker-popup-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-toc-horizontal-link-selected-color: var(--rz-primary-light);
        --rz-toc-link-hover-color: var(--rz-primary);
        --rz-toc-link-selected-color: var(--rz-primary-light);
        --rz-toc-link-selected-indicator-color: var(--rz-primary-light);
        --rz-tooltip-background-color: var(--rz-base-700);
        --rz-tooltip-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.14), 0px 8px 20px rgba(0, 0, 0, 0.21);
        --rz-upload-button-bar-background-color: var(--rz-base-700);
        --rz-upload-cancel-background-color: var(--rz-base-600);
        --rz-upload-choose-active-background-color: var(--rz-base-900);
        --rz-upload-choose-active-color: var(--rz-text-color);
        --rz-upload-choose-background-color: var(--rz-base);
        --rz-upload-choose-color: var(--rz-on-base);
        --rz-upload-choose-hover-background-color: var(--rz-base-700);
        --rz-upload-choose-hover-color: var(--rz-text-color);
        --rz-virtual-keyboard-key-action-background-color: var(--rz-base-700);
        --rz-virtual-keyboard-key-active-background-color: var(--rz-base-700);
        --rz-virtual-keyboard-key-background-color: var(--rz-base-600);
        --rz-virtual-keyboard-key-hover-background-color: var(--rz-base-500);
        --rz-virtual-keyboard-panel-background-color: var(--rz-base-900);
        /* Texto sobre os preenchimentos, que no escuro são tons claros: a superfície escura. */
        --rz-on-primary: var(--cds-color-white);
        --rz-on-primary-dark: var(--cds-color-white);
        --rz-on-primary-darker: var(--cds-color-white);
        --rz-on-secondary: var(--cds-color-white);
        --rz-on-secondary-dark: var(--cds-color-white);
        --rz-on-secondary-darker: var(--cds-color-white);
        --rz-on-info: var(--cds-color-white);
        --rz-on-info-dark: var(--cds-color-white);
        --rz-on-info-darker: var(--cds-color-white);
        --rz-on-success: var(--cds-color-white);
        --rz-on-success-dark: var(--cds-color-white);
        --rz-on-success-darker: var(--cds-color-white);
        --rz-on-danger: var(--cds-color-white);
        --rz-on-danger-dark: var(--cds-color-white);
        --rz-on-danger-darker: var(--cds-color-white);
        --rz-on-warning: var(--cds-color-white);
        --rz-on-warning-dark: var(--cds-color-white);
        --rz-on-warning-darker: var(--cds-color-white);
        --rz-on-primary-light: var(--cds-color-white);
        --rz-on-secondary-light: var(--cds-color-white);
        --rz-series-17: #5b86ff;
        --rz-text-title-color: var(--cds-fg1);
        --rz-text-tertiary-color: #8195a6;
        --rz-grid-filter-color: var(--cds-fg2);
    }
}

@media screen and (prefers-color-scheme: dark) {
    html:root[data-tema="sistema"] {
        color-scheme: dark;
        /* Escala do Cerrado (DK0): um valor escuro para cada --cds-color-*. */
        --cds-color-neutral: #8ea3b3;
        --cds-color-neutral-wash: #1a232b;
        --cds-color-neutral-weak: #26313b;
        --cds-color-neutral-light: #7d93a3;
        --cds-color-neutral-medium: #a3b3c1;
        --cds-color-neutral-strong: #c3d0db;
        --cds-color-primary: #5aa7f0;
        --cds-color-primary-wash: #17222e;
        --cds-color-primary-weak: #1d3a5c;
        --cds-color-primary-light: #4db8ff;
        --cds-color-primary-medium: #78b8f4;
        --cds-color-primary-strong: #8cc6f7;
        --cds-color-secondary: #ff7424;
        --cds-color-secondary-weak: #3d2416;
        --cds-color-secondary-light: #fd8a47;
        --cds-color-secondary-medium: #ff8a45;
        --cds-color-secondary-strong: #ffb28a;
        --cds-color-success: #26c08a;
        --cds-color-success-wash: #10241d;
        --cds-color-success-weak: #153b2d;
        --cds-color-success-light: #1aeda1;
        --cds-color-success-medium: #2fd39a;
        --cds-color-success-strong: #7fe3c0;
        --cds-color-alert: #f9ad00;
        --cds-color-alert-wash: #2a2410;
        --cds-color-alert-weak: #3d3212;
        --cds-color-alert-light: #f9d966;
        --cds-color-alert-medium: #d69601;
        --cds-color-alert-strong: #ffc233;
        --cds-color-alert-dark: #ffd36b;
        --cds-color-critical: #ff4f8a;
        --cds-color-critical-wash: #2a1520;
        --cds-color-critical-weak: #4a1c2e;
        --cds-color-critical-light: #f45d8b;
        --cds-color-critical-medium: #ff6b9a;
        --cds-color-critical-strong: #ff9ab9;
        --cds-color-purple: #d15ae9;
        --cds-color-purple-wash: #2a1730;
        --cds-color-purple-weak: #3b1f45;
        --cds-color-purple-light: #c86fe6;
        --cds-color-purple-medium: #e08af0;
        --cds-color-purple-strong: #ecb3f7;
        --cds-color-petrol: #1fb5cc;
        --cds-color-petrol-wash: #0e2529;
        --cds-color-petrol-weak: #12383f;
        --cds-color-petrol-light: #2ac6dd;
        --cds-color-petrol-medium: #5cd3e6;
        --cds-color-petrol-strong: #8ee3ef;
        --cds-color-magenta: #ff4f9a;
        --cds-color-magenta-wash: #2a1220;
        --cds-color-magenta-weak: #4a1834;
        --cds-color-magenta-light: #f06aa8;
        --cds-color-magenta-medium: #ff7ab3;
        --cds-color-magenta-strong: #ffa8cf;
        --cds-color-disabled: #2a3540;
        --cds-color-white: #151c23;
        --cds-color-black: #ffffff;
        --cds-color-grey: #8a96a3;
        --cds-color-grey-light: #26313b;
        --cds-color-offwhite: #1b242d;
        --cds-color-offblack: #e8eef3;
        /* Semânticos do Adaptive Omni. */
        --cds-bg-app: #0d1217;
        --cds-bg-surface: #151c23;
        --cds-bg-offwhite: #1b242d;
        --cds-bg-offblue: #17222e;
        --cds-bg-page-header: #121920;
        --cds-bg-topbar: #151c23;
        --cds-bg-menu-hover: #1f2a35;
        --cds-bg-form: #1b242d;
        --cds-bg-form-light: #182029;
        --cds-bg-form-strong: #232e39;
        --cds-bg-linha-selecionada: #1d3a5c;
        --cds-fg1: #e8eef3;
        --cds-fg2: #a3b3c1;
        --cds-fg-disabled: #5b6b79;
        --cds-fg-link: #5aa7f0;
        --cds-fg-topbar: #e8eef3;
        --cds-brand: #5aa7f0;
        --cds-brand-on: #0b1a2b;
        --cds-brand-text: #8cc6f7;
        --cds-brand-soft: #1f3040;
        --cds-border: #26313b;
        --cds-border-strong: #5b6b79;
        --cds-border-divider: #222c36;
        --cds-border-focus: #3d86cc;
        --cds-success-text: #2fd39a;
        --cds-alert-text: #ffc233;
        --cds-critical-text: #ff6b9a;
        --cds-info-text: #5aa7f0;
        --cds-secondary-text: #ff9a5c;
        --cds-seq-brand-0: #1f2932;
        --cds-seq-brand-1: #1d3d5e;
        --cds-seq-brand-2: #2a5f92;
        --cds-seq-brand-3: #3d86cc;
        --cds-seq-brand-4: #8cc6f7;
        /* Aliases com cor própria. */
        --cds-body-color-light: #121920;
        --cds-body-background: var(--cds-bg-app);
        --cds-text-disabled: #5b6b79;
        --cds-text-strong: #e8eef3;
        --cds-text-mid: #c3d0db;
        --cds-text-light: #a3b3c1;
        --cds-text-black: #e8eef3;
        --cds-text-grey: #a3b3c1;
        --cds-text-offwhite: #1b242d;
        --cds-text-offblack: #e8eef3;
        --cds-form-selected-border: #3d86cc;
        --cds-form-outer-glow: 0 0 0 3px #5aa7f066;
        --cds-panel-shadow: 0 0 0 1px #26313b;
        --cds-shadow-strong: 10px 10px 4px #00000066;
        --cds-table-header-blue-background: #1b242d;
        --cds-table-row-odd: #182029;
        --cds-table-row-hover: #1f2a35;
        --cds-table-columns-divider: #222c36;
        --cds-table-header-columns-divider: #5b6b79;
        --cds-top-bar-background: var(--cds-bg-topbar);
        --cds-top-bar-shadow: 0 1px 0 #26313b;
        --cds-main-menu-hover-background: var(--cds-bg-menu-hover);
        --cds-widget-outer-shadow: 0px 4px 12px #00000080;
        /* Cores próprias da lib. */
        --cds-border-soft: #222c36;
        --cds-bg-bolha: #1f2a35;
        --cds-borda-painel: #26313b;
        --cds-borda-suporte: #26313b;
        --cds-alert-soft: #3d3212;
        --cds-secondary-soft: #3d2416;
        --cds-aviso-fundo: #2a2410;
        --cds-aviso-borda: #ffc233;
        --cds-aviso-texto: #ffc233;
        --cds-aviso-texto-forte: #ffd36b;
        --cds-fg-forte: #e8eef3;
        --cds-pendente-texto: #ffc233;
        --cds-erro-texto: #ff9ab9;
        --cds-movel-erro-texto: #ff9ab9;
        --cds-grade-linha-selecionada: #1d3a5c;
        --cds-grade-linha-alterada: #2a2216;
        --cds-presenca-desconectado: #8195a6;
        --cds-presenca-online: #2fd39a;
        --cds-presenca-ausente: #ffc233;
        --cds-presenca-em-chamada: #ff6b9a;
        --cds-topo-busca-fundo: #1b242d;
        --cds-topo-busca-fundo-hover: #232e39;
        --cds-topo-busca-texto: #a3b3c1;
        --cds-menu-faixa-fundo: #121920;
        --cds-login-marca-inicio: #17222e;
        --cds-login-marca-fim: #0d1217;
        --cds-login-marca-texto: #e8eef3;
        --cds-login-marca-texto2: #a3b3c1;
        --cds-login-marca-rodape: #8195a6;
        /* Radzen: escala base com os cinzas do Omni e as variáveis que o tema standard-dark troca. */
        --rz-base-50: #1b242d;
        --rz-base-100: #1f2a35;
        --rz-base-200: #26313b;
        --rz-base-300: #3a4652;
        --rz-base-400: #5b6b79;
        --rz-base-500: #5b6b79;
        --rz-base-600: #3a4652;
        --rz-base-700: #26313b;
        --rz-base-800: #151c23;
        --rz-base-900: #0d1217;
        --rz-base: var(--rz-base-600);
        --rz-base-background-color: var(--cds-bg-surface);
        --rz-base-dark: var(--rz-base-700);
        --rz-base-darker: #000000;
        --rz-base-light: var(--rz-base-200);
        --rz-base-lighter: #ffffff;
        --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-700);
        --rz-border-focus: var(--rz-border-width) solid var(--rz-base-500);
        --rz-border-hover: var(--rz-border-width) solid var(--rz-base-500);
        --rz-border-normal: var(--rz-border-width) solid var(--rz-base-600);
        --rz-button-base-background-color: var(--rz-base-700);
        --rz-button-base-color: var(--cds-text-black);
        --rz-card-flat-background-color: var(--cds-bg-offwhite);
        --rz-chart-axis-color: var(--rz-base-600);
        --rz-chat-message-assistant-background-color: var(--rz-base-dark);
        --rz-chat-message-assistant-color: var(--rz-on-base-dark);
        --rz-chip-background-color: var(--rz-base-600);
        --rz-colorpicker-handle-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3), 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.08);
        --rz-colorpicker-item-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
        --rz-colorpicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-context-menu-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-datalist-border: var(--rz-border-base-700);
        --rz-datalist-item-border: var(--rz-border-base-700);
        --rz-datepicker-calendar-selected-hover-background-color: var(--rz-primary-dark);
        --rz-datepicker-calendar-selected-hover-color: var(--rz-on-primary-dark);
        --rz-datepicker-panel-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-dropdown-filter-border: var(--rz-border-base-700);
        --rz-editor-toolbar-background-color: var(--rz-base-700);
        --rz-fieldset-toggle-background-color: var(--rz-base-700);
        --rz-form-field-filled-background-color: var(--rz-base-700);
        --rz-form-field-filled-hover-background-color: var(--rz-base-600);
        --rz-form-field-label-focus-color: var(--rz-primary-light);
        --rz-gravatar-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.3);
        --rz-grid-clear-filter-button-background-color: var(--rz-base);
        --rz-grid-clear-filter-button-color: var(--rz-on-base);
        --rz-grid-data-border-shadow: 0 1px 0 0 var(--rz-base-600), 0 -1px 0 0 var(--rz-base-600);
        --rz-grid-detail-template-background-color: var(--cds-bg-app);
        --rz-grid-filter-background-color: var(--rz-base-700);
        --rz-grid-filter-buttons-background-color: var(--rz-base-700);
        --rz-grid-frozen-cell-background-color: var(--cds-bg-surface);
        --rz-grid-frozen-cell-border: var(--rz-border-base-700);
        --rz-grid-group-header-item-border: var(--rz-border-base-700);
        --rz-listbox-filter-border: var(--rz-border-base-700);
        --rz-login-register-background-color: var(--cds-bg-app);
        --rz-menu-item-selected-color: var(--rz-on-primary-lighter);
        --rz-menu-top-item-background-color: transparent;
        --rz-menu-top-item-selected-color: var(--rz-on-primary-lighter);
        --rz-on-base: #ffffff;
        --rz-on-base-light: var(--rz-base-900);
        --rz-on-base-lighter: var(--rz-base-900);
        --rz-on-primary-light: #000000;
        --rz-overlay-background-color: var(--cds-bg-surface);
        --rz-overlay-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-panel-hover-color: var(--rz-primary-light);
        --rz-panel-menu-icon-color: var(--rz-text-color);
        --rz-panel-menu-item-2nd-level-active-background-color: var(--rz-base-700);
        --rz-panel-menu-item-2nd-level-background-color: var(--rz-base-900);
        --rz-panel-menu-item-2nd-level-hover-background-color: var(--rz-base-700);
        --rz-panel-menu-item-3rd-level-active-background-color: var(--rz-base-700);
        --rz-panel-menu-item-3rd-level-background-color: var(--rz-base-900);
        --rz-panel-menu-item-3rd-level-hover-background-color: var(--rz-base-700);
        --rz-panel-menu-item-active-background-color: var(--rz-base-700);
        --rz-panel-menu-item-active-indicator: var(--cds-color-primary);
        --rz-panel-menu-item-background-color: var(--rz-base-800);
        --rz-panel-menu-item-border: var(--rz-border-base-800);
        --rz-panel-menu-item-color: var(--rz-text-color);
        --rz-panel-menu-item-hover-background-color: var(--rz-base-700);
        --rz-panel-toggle-icon-background-color: var(--rz-base-700);
        --rz-profile-menu-border: var(--rz-base-800);
        --rz-profile-menu-top-item-background-color: transparent;
        --rz-progressbar-background-color: var(--rz-base-700);
        --rz-radio-circle-background-color: var(--rz-primary-light);
        --rz-radio-circle-hover-background-color: var(--rz-primary);
        --rz-range-nav-handle-background-color: var(--rz-base-600);
        --rz-rating-focus-color: var(--rz-primary-light);
        --rz-scheduler-border-color: var(--rz-base-600);
        --rz-scheduler-header-background-color: var(--rz-base-700);
        --rz-scheduler-highlight-background-color: var(--rz-info-lighter);
        --rz-scheduler-minor-border-color: var(--rz-base-700);
        --rz-scheduler-other-month-background-color: var(--rz-base-700);
        --rz-scheduler-prev-next-button-background-color: var(--rz-base-600);
        --rz-scheduler-toolbar-background-color: var(--rz-base-700);
        --rz-scheduler-weekend-background-color: var(--rz-base-700);
        --rz-scheduler-weekend-color: var(--rz-text-tertiary-color);
        --rz-scrollbar-color: rgba(109, 111, 116, 0.5);
        --rz-shadow-1: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18);
        --rz-shadow-10: 0 0 12px 0 rgba(0, 0, 0, 0.14), 0px 9px 20px rgba(0, 0, 0, 0.14), 0px 22px 64px rgba(0, 0, 0, 0.3);
        --rz-shadow-2: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14);
        --rz-shadow-3: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-shadow-4: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.14), 0px 8px 20px rgba(0, 0, 0, 0.21);
        --rz-shadow-5: 0 0 6px 0 rgba(0, 0, 0, 0.14), 0px 4px 6px rgba(0, 0, 0, 0.14), 0px 12px 24px rgba(0, 0, 0, 0.22);
        --rz-shadow-6: 0 0 6px 0 rgba(0, 0, 0, 0.14), 0px 5px 8px rgba(0, 0, 0, 0.14), 0px 14px 28px rgba(0, 0, 0, 0.23);
        --rz-shadow-7: 0 0 8px 0 rgba(0, 0, 0, 0.14), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 16px 32px rgba(0, 0, 0, 0.24);
        --rz-shadow-8: 0 0 8px 0 rgba(0, 0, 0, 0.14), 0px 7px 12px rgba(0, 0, 0, 0.14), 0px 18px 40px rgba(0, 0, 0, 0.25);
        --rz-shadow-9: 0 0 12px 0 rgba(0, 0, 0, 0.14), 0px 8px 16px rgba(0, 0, 0, 0.14), 0px 20px 48px rgba(0, 0, 0, 0.26);
        --rz-sidebar-background-color: var(--cds-bg-surface);
        --rz-sidebar-border-inline-end: var(--rz-border-base-700);
        --rz-sidebar-toggle-border: var(--rz-border-base-700);
        --rz-sidebar-toggle-color: var(--rz-text-color);
        --rz-sidebar-toggle-hover-color: var(--rz-text-title-color);
        --rz-skeleton-animation-color: var(--rz-base-500);
        --rz-skeleton-background-color: var(--rz-base-600);
        --rz-slider-border: var(--rz-border-normal);
        --rz-slider-disabled-handle-background-color: var(--rz-base-800);
        --rz-slider-disabled-handle-border: 0.25rem solid var(--rz-base-600);
        --rz-slider-disabled-range-background-color: var(--rz-base-600);
        --rz-slider-disabled-range-border: var(--rz-border-base-600);
        --rz-slider-handle-background-color: var(--rz-base-800);
        --rz-splitter-bar-background-color: var(--rz-base-700);
        --rz-splitter-bar-background-color-active: var(--rz-primary);
        --rz-splitter-bar-color: var(--rz-text-secondary-color);
        --rz-splitter-bar-color-active: var(--rz-on-primary);
        --rz-spreadsheet-cell-border: var(--rz-border-base-700);
        --rz-spreadsheet-header-background-color: var(--rz-base-800);
        --rz-spreadsheet-splitter-background-color: var(--rz-base-700);
        --rz-steps-number-background-color: var(--rz-base-700);
        --rz-switch-background-color: var(--rz-base-600);
        --rz-switch-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.18), 0px 2px 2px rgba(0, 0, 0, 0.18), 0px 4px 12px 0 rgba(0, 0, 0, 0.14);
        --rz-tabs-tab-focus-color: var(--rz-text-color);
        --rz-timeline-line-color: var(--rz-base-600);
        --rz-timespanpicker-popup-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 16px rgba(0, 0, 0, 0.2);
        --rz-toc-horizontal-link-selected-color: var(--rz-primary-light);
        --rz-toc-link-hover-color: var(--rz-primary);
        --rz-toc-link-selected-color: var(--rz-primary-light);
        --rz-toc-link-selected-indicator-color: var(--rz-primary-light);
        --rz-tooltip-background-color: var(--rz-base-700);
        --rz-tooltip-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.14), 0px 8px 20px rgba(0, 0, 0, 0.21);
        --rz-upload-button-bar-background-color: var(--rz-base-700);
        --rz-upload-cancel-background-color: var(--rz-base-600);
        --rz-upload-choose-active-background-color: var(--rz-base-900);
        --rz-upload-choose-active-color: var(--rz-text-color);
        --rz-upload-choose-background-color: var(--rz-base);
        --rz-upload-choose-color: var(--rz-on-base);
        --rz-upload-choose-hover-background-color: var(--rz-base-700);
        --rz-upload-choose-hover-color: var(--rz-text-color);
        --rz-virtual-keyboard-key-action-background-color: var(--rz-base-700);
        --rz-virtual-keyboard-key-active-background-color: var(--rz-base-700);
        --rz-virtual-keyboard-key-background-color: var(--rz-base-600);
        --rz-virtual-keyboard-key-hover-background-color: var(--rz-base-500);
        --rz-virtual-keyboard-panel-background-color: var(--rz-base-900);
        /* Texto sobre os preenchimentos, que no escuro são tons claros: a superfície escura. */
        --rz-on-primary: var(--cds-color-white);
        --rz-on-primary-dark: var(--cds-color-white);
        --rz-on-primary-darker: var(--cds-color-white);
        --rz-on-secondary: var(--cds-color-white);
        --rz-on-secondary-dark: var(--cds-color-white);
        --rz-on-secondary-darker: var(--cds-color-white);
        --rz-on-info: var(--cds-color-white);
        --rz-on-info-dark: var(--cds-color-white);
        --rz-on-info-darker: var(--cds-color-white);
        --rz-on-success: var(--cds-color-white);
        --rz-on-success-dark: var(--cds-color-white);
        --rz-on-success-darker: var(--cds-color-white);
        --rz-on-danger: var(--cds-color-white);
        --rz-on-danger-dark: var(--cds-color-white);
        --rz-on-danger-darker: var(--cds-color-white);
        --rz-on-warning: var(--cds-color-white);
        --rz-on-warning-dark: var(--cds-color-white);
        --rz-on-warning-darker: var(--cds-color-white);
        --rz-on-primary-light: var(--cds-color-white);
        --rz-on-secondary-light: var(--cds-color-white);
        --rz-series-17: #5b86ff;
        --rz-text-title-color: var(--cds-fg1);
        --rz-text-tertiary-color: #8195a6;
        --rz-grid-filter-color: var(--cds-fg2);
    }
}