/* KD Imóveis — camada de tema Prumo (v1, 2026-10-18). Carregado depois de custom.css; sobrescreve as variáveis --tb-* do Steex/Bootstrap e retema o vocabulário legado. Não editar o Steex compilado. */

/* ============================================================================
   kd-theme.css — parte 01: tokens Prumo + remapeamento Bootstrap/Steex
   ----------------------------------------------------------------------------
   Camada de override SEM build. Carregada por partials/kd_theme_head.html
   DEPOIS de bootstrap.min.css, app.min.css e custom.css (para todos desde
   2026-10-18), por isso o mesmo seletor do Steex basta para vencer.

   Convenções desta parte:
   - Toda cor passa por var(--kd-*). Os únicos hex literais são: as definições
     dos tokens (seção A), os shades do botão primário calculados pelo Bootstrap
     (#af4300 hover, #9b3b00 pressionado) e as cores dentro de data-URI SVG
     (seta do select, knobs do switch, ícones do accordion/btn-close/validação),
     porque var() não resolve dentro de um documento SVG externo — cada um
     está comentado no lugar.
   - !important só onde a regra do Steex/Bootstrap já usa !important
     (utilities .text-* / .link-*:hover / .fw-bolder, FullCalendar, .card-radio).
   - Nada de geometria do shell nesta fase: --tb-header-height,
     --tb-vertical-menu-width* e --tb-footer-height ficam como estão.
   - Especificidade: o claro vai em :root (0,1,0), que vem depois do
     [data-theme=default] do app.css; o escuro acrescenta
     html[data-theme][data-bs-theme=dark] (0,2,1) para vencer os blocos
     (0,2,0) do app.css (--tb-body-bg, --tb-light*, --tb-dark*, --tb-secondary*).
   ============================================================================ */


/* ============================================================================
   A. TOKENS PRUMO (--kd-*)
   44 tokens de cor (claro/escuro), espaço, tamanho, raio, sombra e fontes.
   Fonte: kd-ds/project/tokens.json (sincronizado em 2026-10-17).
   ============================================================================ */

/* A.1 — Tema claro (padrão) */
:root,
[data-bs-theme=light] {
  /* Marca */
  --kd-brand-50: #fff2eb;        /* fundo de seleção (linha selecionada, hover do ghost de marca) */
  --kd-brand-100: #ffe3d1;       /* hover da linha selecionada, fundo da tag de marca */
  --kd-brand-300: #ffb78a;       /* borda de elemento selecionado, conector concluído do stepper */
  --kd-brand-500: #ff914d;       /* laranja do logo: logo, ícone ativo da sidebar, foco no escuro; nunca texto */
  --kd-brand-600: #c24a00;       /* botão primário, $primary, marcados, sublinhado da aba, foco no claro */
  --kd-brand-700: #a84100;       /* marca como texto: links, $link-color */
  --kd-brand-900: #662700;       /* texto sobre brand-50/100, $link-hover-color */
  --kd-brand-fg: #ffffff;        /* texto sobre brand-600 */
  --kd-brand-600-hover: #af4300; /* shade 10% de brand-600 (hover do primário) — calculado pelo Bootstrap */
  --kd-brand-600-active: #9b3b00;/* shade 20% de brand-600 (pressionado) — calculado pelo Bootstrap */

  /* Superfícies */
  --kd-surface-0: #ffffff;       /* cards, tabelas, inputs, modais, dropdowns, toasts, topbar */
  --kd-surface-50: #f5f7f9;      /* fundo da página, hover de linha, rodapé de totais/paginação */
  --kd-surface-100: #eceff3;     /* cabeçalho de tabela, hover de menu/ghost, chips, badge neutro, desabilitado */
  --kd-surface-200: #dfe4ea;     /* fio decorativo 1px: borda de card, divisor de linha, régua das abas */

  /* Bordas funcionais */
  --kd-line: #7a8592;            /* borda de controles (inputs, selects, checkbox, botão secundário) */
  --kd-line-strong: #5a656f;     /* borda em hover, régua do cabeçalho de tabela, $secondary */

  /* Texto */
  --kd-ink: #1b2026;             /* texto principal */
  --kd-ink-muted: #4b5663;       /* texto secundário, cabeçalho de tabela, abas inativas, ghost */
  --kd-ink-subtle: #5f6a77;      /* placeholder, breadcrumb, carimbos de data, zeros */
  --kd-ink-inverse: #ffffff;     /* texto sobre ink e sobre preenchimentos semânticos sólidos */

  /* Sidebar */
  --kd-sidebar-bg: #1c2228;
  --kd-sidebar-fg: #cfd6dd;
  --kd-sidebar-fg-muted: #939ea9;
  --kd-sidebar-active-bg: #2a323b;
  --kd-sidebar-active-fg: #ffffff;

  /* Topbar */
  --kd-topbar-bg: #ffffff;
  --kd-topbar-fg: #1b2026;

  /* Semânticos (cheio = texto/ícone solto; -bg + -fg = badge e alerta) */
  --kd-success: #1a7a4b;
  --kd-success-bg: #e2f3e9;
  --kd-success-fg: #135a36;
  --kd-warning: #6b4c00;
  --kd-warning-bg: #fcf1c6;
  --kd-warning-fg: #5c4100;
  --kd-danger: #c3283d;
  --kd-danger-bg: #fce3e7;
  --kd-danger-fg: #951a2a;
  --kd-info: #2862b8;
  --kd-info-bg: #e4edfa;
  --kd-info-fg: #1e4a8f;

  /* Foco, gráficos e overlay */
  --kd-focus-ring: #c24a00;
  --kd-chart-1: #c24a00;
  --kd-chart-2: #3b74c4;
  --kd-chart-3: #128f78;
  --kd-chart-4: #8d5aa8;
  --kd-chart-5: #6b7684;
  --kd-overlay: #0f1317;

  /* Triplets RGB derivados (para rgba() em overlays/véus; não são tokens do DS) */
  --kd-overlay-rgb: 15, 19, 23;
  --kd-surface-0-rgb: 255, 255, 255;
  --kd-ink-rgb: 27, 32, 38;
  --kd-ink-inverse-rgb: 255, 255, 255;   /* .text-white-50 sobre semânticos sólidos (D.15) */

  /* Espaço — grade de 4px em rem sobre 16px */
  --kd-space-1: 0.25rem;   /* 4px */
  --kd-space-2: 0.5rem;    /* 8px */
  --kd-space-3: 0.75rem;   /* 12px */
  --kd-space-4: 1rem;      /* 16px */
  --kd-space-5: 1.25rem;   /* 20px */
  --kd-space-6: 1.5rem;    /* 24px */
  --kd-space-8: 2rem;      /* 32px */
  --kd-space-10: 2.5rem;   /* 40px */
  --kd-space-12: 3rem;     /* 48px */
  --kd-space-16: 4rem;     /* 64px */

  /* Tamanhos fixos (definidos aqui; aplicados ao shell só na fase 2) */
  --kd-size-control: 36px;
  --kd-size-control-touch: 44px;
  --kd-size-control-portal: 48px;
  --kd-size-row: 40px;
  --kd-size-row-dense: 32px;
  --kd-size-topbar: 56px;
  --kd-size-sidebar: 240px;
  --kd-size-sidebar-rail: 64px;
  --kd-size-content-max: 1600px;
  --kd-size-form-max: 880px;
  --kd-size-portal-max: 1120px;

  /* Raios */
  --kd-radius-0: 0px;
  --kd-radius-1: 0.25rem;  /* 4px: botões, inputs, badges, chips */
  --kd-radius-2: 0.375rem; /* 6px: cards, modais, dropdowns, toasts */
  --kd-radius-3: 0.5rem;   /* 8px: bottom sheet, miniaturas */
  --kd-radius-full: 9999px;

  /* Sombras — nenhuma em repouso */
  --kd-shadow-0: none;
  --kd-shadow-1: 0 1px 2px rgba(15, 19, 23, 0.06), 0 4px 12px rgba(15, 19, 23, 0.10);
  --kd-shadow-2: 0 16px 40px rgba(15, 19, 23, 0.24);
  --kd-shadow-sticky: 0 1px 0 0 var(--kd-surface-200);
  --kd-shadow-focus: 0 0 0 2px var(--kd-surface-0), 0 0 0 4px var(--kd-focus-ring);

  /* Fontes */
  --kd-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --kd-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* A.2 — Tema escuro: mesmos nomes, valores trocados. brand-600, brand-fg e
   brand-500 não mudam; brand-700/900 viram laranja claro (texto, nunca fundo). */
[data-bs-theme=dark] {
  --kd-brand-50: #2b1a0f;
  --kd-brand-100: #3d2414;
  --kd-brand-300: #8a4a22;
  --kd-brand-500: #ff914d;
  --kd-brand-600: #c24a00;
  --kd-brand-700: #ffa46b;
  --kd-brand-900: #ffd3b8;
  --kd-brand-fg: #ffffff;
  --kd-brand-600-hover: #af4300;
  --kd-brand-600-active: #9b3b00;

  --kd-surface-0: #1a1f25;
  --kd-surface-50: #111418;
  --kd-surface-100: #21272e;
  --kd-surface-200: #2d343d;

  --kd-line: #6c7784;
  --kd-line-strong: #8e99a5;

  --kd-ink: #e6eaef;
  --kd-ink-muted: #a7b0bb;
  --kd-ink-subtle: #8a94a0;
  --kd-ink-inverse: #0f1317;

  --kd-sidebar-bg: #0b0e12;
  --kd-sidebar-fg: #c5ccd4;
  --kd-sidebar-fg-muted: #87919d;
  --kd-sidebar-active-bg: #1c2228;
  --kd-sidebar-active-fg: #ffffff;

  --kd-topbar-bg: #1a1f25;
  --kd-topbar-fg: #e6eaef;

  --kd-success: #5ec996;
  --kd-success-bg: #10291e;
  --kd-success-fg: #8ee0b6;
  --kd-warning: #fbeca3;
  --kd-warning-bg: #332810;
  --kd-warning-fg: #f2d27a;
  --kd-danger: #f06b78;
  --kd-danger-bg: #3b1419;
  --kd-danger-fg: #ffa7af;
  --kd-info: #6ea3ed;
  --kd-info-bg: #12233b;
  --kd-info-fg: #a3c5ff;

  --kd-focus-ring: #ff914d;
  --kd-chart-1: #d9631f;
  --kd-chart-2: #3f7fd0;
  --kd-chart-3: #1f9a84;
  --kd-chart-4: #9b6db5;
  --kd-chart-5: #9aa5b3;
  --kd-overlay: #000000;

  --kd-overlay-rgb: 0, 0, 0;
  --kd-surface-0-rgb: 26, 31, 37;
  --kd-ink-rgb: 230, 234, 239;
  --kd-ink-inverse-rgb: 15, 19, 23;

  --kd-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.48);
  --kd-shadow-2: 0 16px 40px rgba(0, 0, 0, 0.64);
  --kd-shadow-sticky: 0 1px 0 0 var(--kd-surface-200);
  --kd-shadow-focus: 0 0 0 2px var(--kd-surface-0), 0 0 0 4px var(--kd-focus-ring);
}


/* ============================================================================
   B. REMAPEAMENTO DO :root DO BOOTSTRAP (prefixo --tb-)
   Os nomes são os de bootstrap.css:15 (claro) e :136 (escuro). Todo triplet
   RGB foi recalculado do hex do token porque .text-* / .bg-* / .border-* / .link-*
   e o próprio <a> só leem os --tb-*-rgb.
   ============================================================================ */

/* B.1 — Claro */
:root,
[data-bs-theme=light] {
  /* Paleta tematizada */
  --tb-primary: var(--kd-brand-600);
  --tb-primary-rgb: 194, 74, 0;
  --tb-primary-text-emphasis: var(--kd-brand-700);
  --tb-primary-bg-subtle: var(--kd-brand-50);
  --tb-primary-border-subtle: var(--kd-brand-300);

  /* $secondary continua cinza: text-secondary, bg-secondary e btn-*-secondary
     são usados centenas de vezes nos templates */
  --tb-secondary: var(--kd-line-strong);
  --tb-secondary-rgb: 90, 101, 111;
  --tb-secondary-text-emphasis: var(--kd-ink-muted);
  --tb-secondary-bg-subtle: var(--kd-surface-100);
  --tb-secondary-border-subtle: var(--kd-surface-200);

  /* Semânticos: emphasis = *-fg, bg-subtle = *-bg; border-subtle = *-bg para o
     alerta ficar sem contorno colorido (Prumo: badge/alerta = só bg + fg) */
  --tb-success: var(--kd-success);
  --tb-success-rgb: 26, 122, 75;
  --tb-success-text-emphasis: var(--kd-success-fg);
  --tb-success-bg-subtle: var(--kd-success-bg);
  --tb-success-border-subtle: var(--kd-success-bg);

  --tb-info: var(--kd-info);
  --tb-info-rgb: 40, 98, 184;
  --tb-info-text-emphasis: var(--kd-info-fg);
  --tb-info-bg-subtle: var(--kd-info-bg);
  --tb-info-border-subtle: var(--kd-info-bg);

  --tb-warning: var(--kd-warning);
  --tb-warning-rgb: 107, 76, 0;
  --tb-warning-text-emphasis: var(--kd-warning-fg);
  --tb-warning-bg-subtle: var(--kd-warning-bg);
  --tb-warning-border-subtle: var(--kd-warning-bg);

  --tb-danger: var(--kd-danger);
  --tb-danger-rgb: 195, 40, 61;
  --tb-danger-text-emphasis: var(--kd-danger-fg);
  --tb-danger-bg-subtle: var(--kd-danger-bg);
  --tb-danger-border-subtle: var(--kd-danger-bg);

  --tb-light: var(--kd-surface-100);
  --tb-light-rgb: 236, 239, 243;
  --tb-light-text-emphasis: var(--kd-ink-muted);
  --tb-light-bg-subtle: var(--kd-surface-50);
  --tb-light-border-subtle: var(--kd-surface-200);

  --tb-dark: var(--kd-ink);
  --tb-dark-rgb: 27, 32, 38;
  --tb-dark-text-emphasis: var(--kd-ink);
  --tb-dark-bg-subtle: var(--kd-surface-100);
  --tb-dark-border-subtle: var(--kd-line);

  /* Corpo e superfícies */
  --tb-body-color: var(--kd-ink);
  --tb-body-color-rgb: 27, 32, 38;
  --tb-body-bg: var(--kd-surface-50);
  --tb-body-bg-rgb: 245, 247, 249;
  --tb-emphasis-color: var(--kd-ink);
  --tb-emphasis-color-rgb: 27, 32, 38;
  --tb-secondary-color: var(--kd-ink-muted);
  --tb-secondary-color-rgb: 75, 86, 99;
  --tb-secondary-bg: var(--kd-surface-0);
  --tb-secondary-bg-rgb: 255, 255, 255;
  --tb-tertiary-color: var(--kd-ink-subtle);
  --tb-tertiary-color-rgb: 95, 106, 119;
  --tb-tertiary-bg: var(--kd-surface-100);
  --tb-tertiary-bg-rgb: 236, 239, 243;
  --tb-heading-color: var(--kd-ink);

  /* Links */
  --tb-link-color: var(--kd-brand-700);
  --tb-link-color-rgb: 168, 65, 0;
  --tb-link-hover-color: var(--kd-brand-900);
  --tb-link-hover-color-rgb: 102, 39, 0;
  --tb-code-color: var(--kd-ink);
  --tb-highlight-color: var(--kd-ink);
  --tb-highlight-bg: var(--kd-warning-bg);

  /* Tipografia base */
  --tb-font-sans-serif: var(--kd-font-sans);
  --tb-font-monospace: var(--kd-font-mono);
  --tb-body-font-family: var(--kd-font-sans);
  --tb-body-font-size: 0.875rem;
  --tb-body-line-height: 1.4286;

  /* Bordas, raios, sombras */
  --tb-border-color: var(--kd-surface-200);
  --tb-border-color-translucent: var(--kd-surface-200);
  --tb-border-radius: 0.25rem;
  --tb-border-radius-sm: 0.25rem;
  --tb-border-radius-lg: 0.375rem;
  --tb-border-radius-xl: 0.5rem;
  --tb-border-radius-xxl: 0.5rem;
  --tb-box-shadow: var(--kd-shadow-1);
  --tb-box-shadow-sm: var(--kd-shadow-1);
  --tb-box-shadow-lg: var(--kd-shadow-2);
  --tb-box-shadow-inset: none;
  --tb-gradient: none;

  /* Foco e validação */
  --tb-focus-ring-width: 2px;
  --tb-focus-ring-opacity: 1;
  --tb-focus-ring-color: var(--kd-focus-ring);
  --tb-form-valid-color: var(--kd-success);
  --tb-form-valid-border-color: var(--kd-success);
  --tb-form-invalid-color: var(--kd-danger);
  --tb-form-invalid-border-color: var(--kd-danger);
}

/* B.2 — Escuro. html[data-theme][data-bs-theme=dark] (0,2,1) é necessário para
   vencer [data-bs-theme=dark]:is([data-theme=default],…) e
   [data-theme=default][data-bs-theme=dark] do app.css, que fixam --tb-body-bg,
   --tb-light*, --tb-dark* e --tb-secondary* em (0,2,0). */
[data-bs-theme=dark],
html[data-theme][data-bs-theme=dark] {
  --tb-primary: var(--kd-brand-600);
  --tb-primary-rgb: 194, 74, 0;
  --tb-primary-text-emphasis: var(--kd-brand-700);
  --tb-primary-bg-subtle: var(--kd-brand-50);
  --tb-primary-border-subtle: var(--kd-brand-300);

  --tb-secondary: var(--kd-line-strong);
  --tb-secondary-rgb: 142, 153, 165;
  --tb-secondary-text-emphasis: var(--kd-ink-muted);
  --tb-secondary-bg-subtle: var(--kd-surface-100);
  --tb-secondary-border-subtle: var(--kd-surface-200);

  --tb-success: var(--kd-success);
  --tb-success-rgb: 94, 201, 150;
  --tb-success-text-emphasis: var(--kd-success-fg);
  --tb-success-bg-subtle: var(--kd-success-bg);
  --tb-success-border-subtle: var(--kd-success-bg);

  --tb-info: var(--kd-info);
  --tb-info-rgb: 110, 163, 237;
  --tb-info-text-emphasis: var(--kd-info-fg);
  --tb-info-bg-subtle: var(--kd-info-bg);
  --tb-info-border-subtle: var(--kd-info-bg);

  --tb-warning: var(--kd-warning);
  --tb-warning-rgb: 251, 236, 163;
  --tb-warning-text-emphasis: var(--kd-warning-fg);
  --tb-warning-bg-subtle: var(--kd-warning-bg);
  --tb-warning-border-subtle: var(--kd-warning-bg);

  --tb-danger: var(--kd-danger);
  --tb-danger-rgb: 240, 107, 120;
  --tb-danger-text-emphasis: var(--kd-danger-fg);
  --tb-danger-bg-subtle: var(--kd-danger-bg);
  --tb-danger-border-subtle: var(--kd-danger-bg);

  --tb-light: var(--kd-surface-100);
  --tb-light-rgb: 33, 39, 46;
  --tb-light-text-emphasis: var(--kd-ink-muted);
  --tb-light-bg-subtle: var(--kd-surface-50);
  --tb-light-border-subtle: var(--kd-surface-200);

  --tb-dark: var(--kd-ink);
  --tb-dark-rgb: 230, 234, 239;
  --tb-dark-text-emphasis: var(--kd-ink);
  --tb-dark-bg-subtle: var(--kd-surface-100);
  --tb-dark-border-subtle: var(--kd-line);

  --tb-body-color: var(--kd-ink);
  --tb-body-color-rgb: 230, 234, 239;
  --tb-body-bg: var(--kd-surface-50);
  --tb-body-bg-rgb: 17, 20, 24;
  --tb-emphasis-color: var(--kd-ink);
  --tb-emphasis-color-rgb: 230, 234, 239;
  --tb-secondary-color: var(--kd-ink-muted);
  --tb-secondary-color-rgb: 167, 176, 187;
  --tb-secondary-bg: var(--kd-surface-0);
  --tb-secondary-bg-rgb: 26, 31, 37;
  --tb-tertiary-color: var(--kd-ink-subtle);
  --tb-tertiary-color-rgb: 138, 148, 160;
  --tb-tertiary-bg: var(--kd-surface-100);
  --tb-tertiary-bg-rgb: 33, 39, 46;
  --tb-heading-color: var(--kd-ink);

  --tb-link-color: var(--kd-brand-700);
  --tb-link-color-rgb: 255, 164, 107;
  --tb-link-hover-color: var(--kd-brand-900);
  --tb-link-hover-color-rgb: 255, 211, 184;
  --tb-code-color: var(--kd-ink);
  --tb-highlight-color: var(--kd-ink);
  --tb-highlight-bg: var(--kd-warning-bg);

  --tb-border-color: var(--kd-surface-200);
  --tb-border-color-translucent: var(--kd-surface-200);
  --tb-box-shadow: var(--kd-shadow-1);
  --tb-box-shadow-sm: var(--kd-shadow-1);
  --tb-box-shadow-lg: var(--kd-shadow-2);
  --tb-box-shadow-inset: none;

  --tb-focus-ring-color: var(--kd-focus-ring);
  --tb-form-valid-color: var(--kd-success);
  --tb-form-valid-border-color: var(--kd-success);
  --tb-form-invalid-color: var(--kd-danger);
  --tb-form-invalid-border-color: var(--kd-danger);

  /* app.css:3966 fixa o rodapé escuro em #191c22/#878a99 */
  --tb-footer-bg: var(--kd-surface-50);
  --tb-footer-color: var(--kd-ink-subtle);
}


/* ============================================================================
   C. REMAPEAMENTO DO TEMA STEEX ([data-theme=default], app.css:10-110)
   Mesmos seletores do app.css (vence por ordem). html[data-theme] entra na
   lista para cobrir um data-theme=material/minimal/… restaurado do
   sessionStorage pelo customizer. Geometria (header 70px, sidebar 250px,
   footer) NÃO muda nesta fase.
   ============================================================================ */

/* C.1 — Fontes, escala, sombras, card, rodapé */
[data-theme=default],
html[data-theme] {
  --tb-font-sans-serif: var(--kd-font-sans);
  --tb-font-monospace: var(--kd-font-mono);

  /* base sobe de 13px para 14px (body do Prumo); títulos ficam explícitos na seção E */
  --tb-font-base: 0.875rem;
  --tb-font-weight-bold: 600;      /* só 400/500/600 são carregados; evita faux-bold */

  /* --tb-shadow-sm era "rgba(#000, .075)" (SCSS vazado, inválido): corrigido */
  --tb-shadow-sm: var(--kd-shadow-1);
  --tb-shadow: var(--kd-shadow-1);
  --tb-shadow-lg: var(--kd-shadow-2);
  --tb-element-shadow: none;
  --tb-card-shadow: none;
  --tb-vertical-menu-box-shadow: none;
  --tb-twocolumn-menu-box-shadow: none;
  --tb-page-title-box-shadow: none;
  --tb-page-title-border: 1px solid var(--kd-surface-200);

  --tb-card-border-width-custom: 1px;
  --tb-card-header-border-width: 1px;
  /* --tb-grid-gutter-width fica no 1.25rem do Steex: a variável entra na geometria
     do shell que esta fase não toca (.page-content, .navbar-header, .footer,
     .page-title-box e a margem dos cards — app.css:1105/1397/1441/1510/4908).
     O gutter de 24px entra na fase 2 junto com header 56px / sidebar 240px. */

  --tb-footer-bg: var(--kd-surface-50);
  --tb-footer-color: var(--kd-ink-subtle);
  --tb-twocolumn-menu-bg: var(--kd-surface-0);
  --tb-boxed-body-bg: var(--kd-surface-50);
}

/* C.2 — Sidebar escura (o app.js força data-sidebar=dark nos dois modos) */
[data-theme=default][data-sidebar=dark],
html[data-theme][data-sidebar=dark] {
  --tb-vertical-menu-bg: var(--kd-sidebar-bg);
  --tb-vertical-menu-border: var(--kd-sidebar-bg);
  --tb-vertical-menu-item-color: var(--kd-sidebar-fg);
  --tb-vertical-menu-item-hover-color: var(--kd-sidebar-active-fg);
  --tb-vertical-menu-item-hover-bg: var(--kd-sidebar-active-bg);
  --tb-vertical-menu-item-active-color: var(--kd-sidebar-active-fg);
  --tb-vertical-menu-item-active-bg: var(--kd-sidebar-active-bg);
  --tb-vertical-menu-sub-item-color: var(--kd-sidebar-fg-muted);
  --tb-vertical-menu-sub-item-hover-color: var(--kd-sidebar-active-fg);
  --tb-vertical-menu-sub-item-active-color: var(--kd-sidebar-active-fg);
  --tb-vertical-menu-title-color: var(--kd-sidebar-fg-muted);
  --tb-twocolumn-menu-iconview-bg: var(--kd-sidebar-bg);
  --tb-vertical-menu-box-shadow: none;
}

/* C.3 — Sidebar "light" recebe os mesmos tokens: a sidebar do Prumo é grafite
   nos dois temas, então a troca do customizer não quebra o visual */
[data-theme=default][data-sidebar=light],
html[data-theme][data-sidebar=light] {
  --tb-vertical-menu-bg: var(--kd-sidebar-bg);
  --tb-vertical-menu-border: var(--kd-sidebar-bg);
  --tb-vertical-menu-item-color: var(--kd-sidebar-fg);
  --tb-vertical-menu-item-hover-color: var(--kd-sidebar-active-fg);
  --tb-vertical-menu-item-hover-bg: var(--kd-sidebar-active-bg);
  --tb-vertical-menu-item-active-color: var(--kd-sidebar-active-fg);
  --tb-vertical-menu-item-active-bg: var(--kd-sidebar-active-bg);
  --tb-vertical-menu-sub-item-color: var(--kd-sidebar-fg-muted);
  --tb-vertical-menu-sub-item-hover-color: var(--kd-sidebar-active-fg);
  --tb-vertical-menu-sub-item-active-color: var(--kd-sidebar-active-fg);
  --tb-vertical-menu-title-color: var(--kd-sidebar-fg-muted);
  --tb-twocolumn-menu-iconview-bg: var(--kd-sidebar-bg);
  --tb-vertical-menu-box-shadow: none;
}

/* C.4 — Topbar clara */
[data-theme=default][data-topbar=light],
html[data-theme][data-topbar=light] {
  --tb-header-bg: var(--kd-topbar-bg);
  --tb-header-item-color: var(--kd-topbar-fg);
  --tb-header-item-sub-color: var(--kd-ink-muted);
  --tb-header-border-color: var(--kd-surface-200);
  --tb-topbar-user-bg: var(--kd-surface-100);
  --tb-topbar-user-color: var(--kd-surface-200);
  --tb-topnav-bg: var(--kd-topbar-bg);
  --tb-topnav-item-color: var(--kd-ink-muted);
  --tb-topnav-item-color-active: var(--kd-brand-700);
  --tb-topnav-sub-item-color: var(--kd-ink-muted);
  --tb-topnav-sub-item-color-active: var(--kd-brand-700);
}

/* C.5 — Topbar escura (o app.js troca data-topbar junto com data-bs-theme):
   mesmos tokens, que já viram sob [data-bs-theme=dark] */
[data-theme=default][data-topbar=dark],
html[data-theme][data-topbar=dark] {
  --tb-header-bg: var(--kd-topbar-bg);
  --tb-header-item-color: var(--kd-topbar-fg);
  --tb-header-item-sub-color: var(--kd-ink-muted);
  --tb-header-border-color: var(--kd-surface-200);
  --tb-topbar-user-bg: var(--kd-surface-100);
  --tb-topbar-user-color: var(--kd-surface-200);
  --tb-topnav-bg: var(--kd-topbar-bg);
  --tb-topnav-item-color: var(--kd-ink-muted);
  --tb-topnav-item-color-active: var(--kd-brand-700);
  --tb-topnav-sub-item-color: var(--kd-ink-muted);
  --tb-topnav-sub-item-color-active: var(--kd-brand-700);
}


/* ============================================================================
   D. HOTSPOTS DE COR LITERAL (inventory-steex.json → literal_hotspots)
   Mesmo seletor do Steex/Bootstrap, redeclarando só a propriedade que trazia
   hex/rgba compilado. Agrupados por família.
   ============================================================================ */

/* D.1 — Cinzas neutros soltos */
.blockquote-footer {
  color: var(--kd-ink-muted);
}
.form-floating > :disabled ~ label,
.form-floating > .form-control:disabled ~ label {
  color: var(--kd-ink-subtle);
}
.app-search span.search-widget-icon {
  color: var(--kd-ink-subtle);
}
[data-layout=vertical][data-sidebar-size=sm-hover] .navbar-menu:hover {
  border-left-color: var(--kd-sidebar-active-bg);
}
.vertical-overlay {
  background-color: rgba(var(--kd-overlay-rgb), 0.56);
}
#page-topbar.topbar-shadow {
  -webkit-box-shadow: none;
          box-shadow: none;
}
/* ícones da topbar escura: repouso ink-muted, hover topbar-fg sobre surface-100
   (mesmo desenho do ghost na topbar clara) */
[data-topbar=dark] .btn-ghost-dark {
  color: var(--kd-ink-muted);
}
[data-topbar=dark] .btn-ghost-dark:hover,
[data-topbar=dark] .btn-ghost-dark:focus,
[data-topbar=dark] .btn-ghost-dark:active {
  color: var(--kd-topbar-fg);
  background-color: var(--kd-surface-100);
}

/* D.2 — Tabela base: hover/zebra/ativo eram rgba(15,17,20,.03) (invisível no escuro) */
.table {
  --tb-table-color: var(--kd-ink);
  --tb-table-border-color: var(--kd-surface-200);
  --tb-table-striped-color: var(--kd-ink);
  --tb-table-striped-bg: var(--kd-surface-50);
  --tb-table-active-color: var(--kd-ink);
  --tb-table-active-bg: var(--kd-brand-50);
  --tb-table-hover-color: var(--kd-ink);
  --tb-table-hover-bg: var(--kd-surface-50);
}

/* D.3 — Variantes .table-* (tints compilados). Prumo não pinta linhas com cor
   semântica — o estado vai no badge —, então as variantes viram pares bg/fg
   neutros em hover (legado). */
.table-primary {
  --tb-table-color: var(--kd-ink);
  --tb-table-bg: var(--kd-brand-50);
  --tb-table-border-color: var(--kd-brand-300);
  --tb-table-striped-bg: var(--kd-brand-100);
  --tb-table-striped-color: var(--kd-ink);
  --tb-table-active-bg: var(--kd-brand-100);
  --tb-table-active-color: var(--kd-ink);
  --tb-table-hover-bg: var(--kd-brand-100);
  --tb-table-hover-color: var(--kd-ink);
}
.table-secondary {
  --tb-table-color: var(--kd-ink);
  --tb-table-bg: var(--kd-surface-100);
  --tb-table-border-color: var(--kd-surface-200);
  --tb-table-striped-bg: var(--kd-surface-200);
  --tb-table-striped-color: var(--kd-ink);
  --tb-table-active-bg: var(--kd-surface-200);
  --tb-table-active-color: var(--kd-ink);
  --tb-table-hover-bg: var(--kd-surface-200);
  --tb-table-hover-color: var(--kd-ink);
}
.table-success {
  --tb-table-color: var(--kd-success-fg);
  --tb-table-bg: var(--kd-success-bg);
  --tb-table-border-color: var(--kd-surface-200);
  --tb-table-striped-bg: var(--kd-success-bg);
  --tb-table-striped-color: var(--kd-success-fg);
  --tb-table-active-bg: var(--kd-success-bg);
  --tb-table-active-color: var(--kd-success-fg);
  --tb-table-hover-bg: var(--kd-success-bg);
  --tb-table-hover-color: var(--kd-success-fg);
}
.table-info {
  --tb-table-color: var(--kd-info-fg);
  --tb-table-bg: var(--kd-info-bg);
  --tb-table-border-color: var(--kd-surface-200);
  --tb-table-striped-bg: var(--kd-info-bg);
  --tb-table-striped-color: var(--kd-info-fg);
  --tb-table-active-bg: var(--kd-info-bg);
  --tb-table-active-color: var(--kd-info-fg);
  --tb-table-hover-bg: var(--kd-info-bg);
  --tb-table-hover-color: var(--kd-info-fg);
}
.table-warning {
  --tb-table-color: var(--kd-warning-fg);
  --tb-table-bg: var(--kd-warning-bg);
  --tb-table-border-color: var(--kd-surface-200);
  --tb-table-striped-bg: var(--kd-warning-bg);
  --tb-table-striped-color: var(--kd-warning-fg);
  --tb-table-active-bg: var(--kd-warning-bg);
  --tb-table-active-color: var(--kd-warning-fg);
  --tb-table-hover-bg: var(--kd-warning-bg);
  --tb-table-hover-color: var(--kd-warning-fg);
}
.table-danger {
  --tb-table-color: var(--kd-danger-fg);
  --tb-table-bg: var(--kd-danger-bg);
  --tb-table-border-color: var(--kd-surface-200);
  --tb-table-striped-bg: var(--kd-danger-bg);
  --tb-table-striped-color: var(--kd-danger-fg);
  --tb-table-active-bg: var(--kd-danger-bg);
  --tb-table-active-color: var(--kd-danger-fg);
  --tb-table-hover-bg: var(--kd-danger-bg);
  --tb-table-hover-color: var(--kd-danger-fg);
}
.table-light {
  --tb-table-color: var(--kd-ink);
  --tb-table-bg: var(--kd-surface-50);
  --tb-table-border-color: var(--kd-surface-200);
  --tb-table-striped-bg: var(--kd-surface-100);
  --tb-table-striped-color: var(--kd-ink);
  --tb-table-active-bg: var(--kd-surface-100);
  --tb-table-active-color: var(--kd-ink);
  --tb-table-hover-bg: var(--kd-surface-100);
  --tb-table-hover-color: var(--kd-ink);
}
/* app.css:3993 [data-bs-theme=dark] .table-light (0,2,0) redeclara cor branca e
   fundo --tb-light em todos os estados, vencendo o .table-light (0,1,0) acima:
   mesmo seletor para fechar a brecha (zebra/hover distintos também no escuro). */
[data-bs-theme=dark] .table-light {
  --tb-table-color: var(--kd-ink);
  --tb-table-bg: var(--kd-surface-50);
  --tb-table-border-color: var(--kd-surface-200);
  --tb-table-striped-bg: var(--kd-surface-100);
  --tb-table-striped-color: var(--kd-ink);
  --tb-table-active-bg: var(--kd-surface-100);
  --tb-table-active-color: var(--kd-ink);
  --tb-table-hover-bg: var(--kd-surface-100);
  --tb-table-hover-color: var(--kd-ink);
}
/* .table-dark usa os tokens da sidebar para continuar escura nos dois temas */
.table-dark {
  --tb-table-color: var(--kd-sidebar-fg);
  --tb-table-bg: var(--kd-sidebar-bg);
  --tb-table-border-color: var(--kd-sidebar-active-bg);
  --tb-table-striped-bg: var(--kd-sidebar-active-bg);
  --tb-table-striped-color: var(--kd-sidebar-active-fg);
  --tb-table-active-bg: var(--kd-sidebar-active-bg);
  --tb-table-active-color: var(--kd-sidebar-active-fg);
  --tb-table-hover-bg: var(--kd-sidebar-active-bg);
  --tb-table-hover-color: var(--kd-sidebar-active-fg);
}
.table-custom-effect tr.table-active {
  border-right-color: var(--kd-brand-600);
}

/* D.4 — Ícones em data-URI SVG. EXCEÇÃO à regra "toda cor via var(--kd-*)":
   var() não resolve dentro de um documento SVG externo, então a cor vai em hex
   literal (%23…), nos dois temas. Valores: ink-muted #4b5663/#a7b0bb (seta do
   select), line #7a8592/#6c7784 (knob do switch), focus-ring #c24a00/#ff914d
   (knob em foco), brand-fg #fff (knob marcado, check e rádio), ink #1b2026/
   #e6eaef (accordion e btn-close), success #1a7a4b/#5ec996 e danger #c3283d/
   #f06b78 (validação). */
.form-select {
  --tb-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234b5663' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .form-select {
  --tb-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a7b0bb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=checkbox] {
  /* %23fff = brand-fg (#ffffff nos dois temas) */
  --tb-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  --tb-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input {
  /* knob desligado = line (#7a8592); antes era rgba(0,0,0,.25) */
  --tb-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237a8592'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  /* o Bootstrap usava fill='var(--tb-primary-border-subtle)' → knob sumia no foco */
  --tb-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c24a00'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  --tb-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
  /* knob desligado no escuro = line escuro (#6c7784) */
  --tb-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236c7784'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .form-switch .form-check-input:focus:not(:checked) {
  /* foco no escuro usa brand-500 (#ff914d), o focus-ring escuro */
  --tb-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ff914d'/%3e%3c/svg%3e");
}

/* Validação: o Bootstrap compilou stroke='var(--tb-danger)'/fill='var(--tb-success)'
   dentro do data-URI → ícone preto/ausente. Hex literal nos dois temas. */
.was-validated .form-control:valid,
.form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231a7a4b' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"] {
  --tb-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231a7a4b' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c3283d'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c3283d' stroke='none'/%3e%3c/svg%3e");
}
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
  --tb-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c3283d'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c3283d' stroke='none'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .was-validated .form-control:valid,
[data-bs-theme=dark] .form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235ec996' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .was-validated .form-select:valid:not([multiple]):not([size]),
[data-bs-theme=dark] .was-validated .form-select:valid:not([multiple])[size="1"],
[data-bs-theme=dark] .form-select.is-valid:not([multiple]):not([size]),
[data-bs-theme=dark] .form-select.is-valid:not([multiple])[size="1"] {
  --tb-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235ec996' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .was-validated .form-control:invalid,
[data-bs-theme=dark] .form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f06b78'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f06b78' stroke='none'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .was-validated .form-select:invalid:not([multiple]):not([size]),
[data-bs-theme=dark] .was-validated .form-select:invalid:not([multiple])[size="1"],
[data-bs-theme=dark] .form-select.is-invalid:not([multiple]):not([size]),
[data-bs-theme=dark] .form-select.is-invalid:not([multiple])[size="1"] {
  --tb-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f06b78'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f06b78' stroke='none'/%3e%3c/svg%3e");
}

/* Accordion: ícone fechado era %230f1114 e o aberto fill='var(--tb-primary-text-emphasis)'
   (não resolve → preto). Os dois ficam em ink. */
.accordion {
  --tb-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b2026'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --tb-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b2026'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --tb-accordion-btn-focus-border-color: var(--kd-focus-ring);
  --tb-accordion-btn-focus-box-shadow: var(--kd-shadow-focus);
}
[data-bs-theme=dark] .accordion-button::after {
  --tb-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6eaef'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --tb-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6eaef'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* btn-close: X em ink (o Bootstrap aplica o filtro invert no escuro) */
.btn-close {
  --tb-btn-close-color: var(--kd-ink);
  --tb-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231b2026'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
  --tb-btn-close-focus-shadow: var(--kd-shadow-focus);
  --tb-btn-close-opacity: 0.6;
  --tb-btn-close-hover-opacity: 1;
}

/* D.5 — Botões sólidos. O app.css já aponta bg/border para var(--tb-x) e o
   hover para var(--tb-x-text-emphasis); como --tb-primary-text-emphasis vira
   brand-700 (#ffa46b no escuro), o hover do primário ficaria claro com texto
   branco — por isso os shades #af4300/#9b3b00 ficam fixos nos dois temas.
   Nos semânticos o hover usa o token *-fg (mais escuro no claro, mais claro
   no escuro) e o texto é ink-inverse, que acompanha o tema. */
.btn {
  --tb-btn-focus-box-shadow: var(--kd-shadow-focus);
  --tb-btn-box-shadow: none;
  --tb-btn-active-shadow: none;
}
.btn-primary {
  --tb-btn-color: var(--kd-brand-fg);
  --tb-btn-bg: var(--kd-brand-600);
  --tb-btn-border-color: var(--kd-brand-600);
  --tb-btn-hover-color: var(--kd-brand-fg);
  --tb-btn-hover-bg: var(--kd-brand-600-hover);
  --tb-btn-hover-border-color: var(--kd-brand-600-hover);
  --tb-btn-focus-shadow-rgb: 194, 74, 0;
  --tb-btn-active-color: var(--kd-brand-fg);
  --tb-btn-active-bg: var(--kd-brand-600-active);
  --tb-btn-active-border-color: var(--kd-brand-600-active);
  --tb-btn-active-shadow: none;
  --tb-btn-disabled-color: var(--kd-brand-fg);
  --tb-btn-disabled-bg: var(--kd-brand-600);
  --tb-btn-disabled-border-color: var(--kd-brand-600);
}
.btn-secondary {
  --tb-btn-color: var(--kd-ink-inverse);
  --tb-btn-bg: var(--kd-line-strong);
  --tb-btn-border-color: var(--kd-line-strong);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-ink-muted);
  --tb-btn-hover-border-color: var(--kd-ink-muted);
  --tb-btn-focus-shadow-rgb: 90, 101, 111;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-ink-muted);
  --tb-btn-active-border-color: var(--kd-ink-muted);
  --tb-btn-active-shadow: none;
  --tb-btn-disabled-color: var(--kd-ink-inverse);
  --tb-btn-disabled-bg: var(--kd-line-strong);
  --tb-btn-disabled-border-color: var(--kd-line-strong);
}
.btn-success {
  --tb-btn-color: var(--kd-ink-inverse);
  --tb-btn-bg: var(--kd-success);
  --tb-btn-border-color: var(--kd-success);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-success-fg);
  --tb-btn-hover-border-color: var(--kd-success-fg);
  --tb-btn-focus-shadow-rgb: 26, 122, 75;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-success-fg);
  --tb-btn-active-border-color: var(--kd-success-fg);
  --tb-btn-disabled-color: var(--kd-ink-inverse);
  --tb-btn-disabled-bg: var(--kd-success);
  --tb-btn-disabled-border-color: var(--kd-success);
}
.btn-info {
  --tb-btn-color: var(--kd-ink-inverse);
  --tb-btn-bg: var(--kd-info);
  --tb-btn-border-color: var(--kd-info);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-info-fg);
  --tb-btn-hover-border-color: var(--kd-info-fg);
  --tb-btn-focus-shadow-rgb: 40, 98, 184;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-info-fg);
  --tb-btn-active-border-color: var(--kd-info-fg);
  --tb-btn-disabled-color: var(--kd-ink-inverse);
  --tb-btn-disabled-bg: var(--kd-info);
  --tb-btn-disabled-border-color: var(--kd-info);
}
.btn-warning {
  --tb-btn-color: var(--kd-ink-inverse);
  --tb-btn-bg: var(--kd-warning);
  --tb-btn-border-color: var(--kd-warning);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-warning-fg);
  --tb-btn-hover-border-color: var(--kd-warning-fg);
  --tb-btn-focus-shadow-rgb: 107, 76, 0;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-warning-fg);
  --tb-btn-active-border-color: var(--kd-warning-fg);
  --tb-btn-disabled-color: var(--kd-ink-inverse);
  --tb-btn-disabled-bg: var(--kd-warning);
  --tb-btn-disabled-border-color: var(--kd-warning);
}
.btn-danger {
  --tb-btn-color: var(--kd-ink-inverse);
  --tb-btn-bg: var(--kd-danger);
  --tb-btn-border-color: var(--kd-danger);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-danger-fg);
  --tb-btn-hover-border-color: var(--kd-danger-fg);
  --tb-btn-focus-shadow-rgb: 195, 40, 61;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-danger-fg);
  --tb-btn-active-border-color: var(--kd-danger-fg);
  --tb-btn-disabled-color: var(--kd-ink-inverse);
  --tb-btn-disabled-bg: var(--kd-danger);
  --tb-btn-disabled-border-color: var(--kd-danger);
}
.btn-light {
  --tb-btn-color: var(--kd-ink);
  --tb-btn-bg: var(--kd-surface-100);
  --tb-btn-border-color: var(--kd-surface-100);
  --tb-btn-hover-color: var(--kd-ink);
  --tb-btn-hover-bg: var(--kd-surface-200);
  --tb-btn-hover-border-color: var(--kd-surface-200);
  --tb-btn-focus-shadow-rgb: 236, 239, 243;
  --tb-btn-active-color: var(--kd-ink);
  --tb-btn-active-bg: var(--kd-surface-200);
  --tb-btn-active-border-color: var(--kd-surface-200);
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-disabled-bg: var(--kd-surface-100);
  --tb-btn-disabled-border-color: var(--kd-surface-100);
}
.btn-dark {
  --tb-btn-color: var(--kd-ink-inverse);
  --tb-btn-bg: var(--kd-ink);
  --tb-btn-border-color: var(--kd-ink);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-ink-muted);
  --tb-btn-hover-border-color: var(--kd-ink-muted);
  --tb-btn-focus-shadow-rgb: 27, 32, 38;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-ink-muted);
  --tb-btn-active-border-color: var(--kd-ink-muted);
  --tb-btn-disabled-color: var(--kd-ink-inverse);
  --tb-btn-disabled-bg: var(--kd-ink);
  --tb-btn-disabled-border-color: var(--kd-ink);
}
/* app.css:3988 fixa texto #fff em .btn-light/.btn-outline-light no escuro */
[data-bs-theme=dark] .btn-light,
[data-bs-theme=dark] .btn-outline-light {
  --tb-btn-color: var(--kd-ink);
  --tb-btn-hover-color: var(--kd-ink);
}

/* D.6 — Botões outline */
.btn-outline-primary {
  --tb-btn-color: var(--kd-brand-600);
  --tb-btn-bg: transparent;
  --tb-btn-border-color: var(--kd-brand-600);
  --tb-btn-hover-color: var(--kd-brand-fg);
  --tb-btn-hover-bg: var(--kd-brand-600);
  --tb-btn-hover-border-color: var(--kd-brand-600);
  --tb-btn-focus-shadow-rgb: 194, 74, 0;
  --tb-btn-active-color: var(--kd-brand-fg);
  --tb-btn-active-bg: var(--kd-brand-600-active);
  --tb-btn-active-border-color: var(--kd-brand-600-active);
  --tb-btn-active-shadow: none;
  --tb-btn-disabled-color: var(--kd-brand-600);
  --tb-btn-disabled-bg: transparent;
  --tb-btn-disabled-border-color: var(--kd-brand-600);
  --tb-gradient: none;
}
/* Secundário do Prumo (padrão para quase tudo): surface-0 + borda line + ink;
   hover surface-100 e borda line-strong */
.btn-outline-secondary {
  --tb-btn-color: var(--kd-ink);
  --tb-btn-bg: var(--kd-surface-0);
  --tb-btn-border-color: var(--kd-line);
  --tb-btn-hover-color: var(--kd-ink);
  --tb-btn-hover-bg: var(--kd-surface-100);
  --tb-btn-hover-border-color: var(--kd-line-strong);
  --tb-btn-focus-shadow-rgb: 90, 101, 111;
  --tb-btn-active-color: var(--kd-ink);
  --tb-btn-active-bg: var(--kd-surface-200);
  --tb-btn-active-border-color: var(--kd-line-strong);
  --tb-btn-active-shadow: none;
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-disabled-bg: var(--kd-surface-100);
  --tb-btn-disabled-border-color: var(--kd-surface-200);
  --tb-gradient: none;
}
.btn-outline-success {
  --tb-btn-color: var(--kd-success);
  --tb-btn-border-color: var(--kd-success);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-success);
  --tb-btn-hover-border-color: var(--kd-success);
  --tb-btn-focus-shadow-rgb: 26, 122, 75;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-success);
  --tb-btn-active-border-color: var(--kd-success);
  --tb-btn-disabled-color: var(--kd-success);
  --tb-btn-disabled-border-color: var(--kd-success);
}
.btn-outline-info {
  --tb-btn-color: var(--kd-info);
  --tb-btn-border-color: var(--kd-info);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-info);
  --tb-btn-hover-border-color: var(--kd-info);
  --tb-btn-focus-shadow-rgb: 40, 98, 184;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-info);
  --tb-btn-active-border-color: var(--kd-info);
  --tb-btn-disabled-color: var(--kd-info);
  --tb-btn-disabled-border-color: var(--kd-info);
}
.btn-outline-warning {
  --tb-btn-color: var(--kd-warning);
  --tb-btn-border-color: var(--kd-warning);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-warning);
  --tb-btn-hover-border-color: var(--kd-warning);
  --tb-btn-focus-shadow-rgb: 107, 76, 0;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-warning);
  --tb-btn-active-border-color: var(--kd-warning);
  --tb-btn-disabled-color: var(--kd-warning);
  --tb-btn-disabled-border-color: var(--kd-warning);
}
.btn-outline-danger {
  --tb-btn-color: var(--kd-danger);
  --tb-btn-border-color: var(--kd-danger);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-danger);
  --tb-btn-hover-border-color: var(--kd-danger);
  --tb-btn-focus-shadow-rgb: 195, 40, 61;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-danger);
  --tb-btn-active-border-color: var(--kd-danger);
  --tb-btn-disabled-color: var(--kd-danger);
  --tb-btn-disabled-border-color: var(--kd-danger);
}
.btn-outline-light {
  --tb-btn-color: var(--kd-ink-muted);
  --tb-btn-border-color: var(--kd-surface-200);
  --tb-btn-hover-color: var(--kd-ink);
  --tb-btn-hover-bg: var(--kd-surface-100);
  --tb-btn-hover-border-color: var(--kd-surface-200);
  --tb-btn-focus-shadow-rgb: 236, 239, 243;
  --tb-btn-active-color: var(--kd-ink);
  --tb-btn-active-bg: var(--kd-surface-100);
  --tb-btn-active-border-color: var(--kd-surface-200);
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-disabled-border-color: var(--kd-surface-200);
}
.btn-outline-dark {
  --tb-btn-color: var(--kd-ink);
  --tb-btn-border-color: var(--kd-ink);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-hover-bg: var(--kd-ink);
  --tb-btn-hover-border-color: var(--kd-ink);
  --tb-btn-focus-shadow-rgb: 27, 32, 38;
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-ink);
  --tb-btn-active-border-color: var(--kd-ink);
  --tb-btn-disabled-color: var(--kd-ink);
  --tb-btn-disabled-border-color: var(--kd-ink);
}
.btn-link {
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-box-shadow: none;
  --tb-btn-focus-shadow-rgb: 194, 74, 0;
}

/* D.7 — Botões subtle e ghost (app.css:4428-4760). Texto sobre tint de marca
   = brand-900; o hover dos subtle semânticos ganha cor explícita porque o
   Steex não define --tb-btn-hover-color (o texto herdava do pai).
   Desabilitado: nem o Steex nem o .btn base declaram --tb-btn-disabled-color/
   -bg/-border-color, e .btn:disabled (bootstrap.css:3359) lê as três — sem
   elas o fundo cai em transparent e a cor herda do pai. Cada variante repete
   o seu par tint/ênfase (a opacidade .65 do Bootstrap faz o resto); o ghost
   fica transparente com texto ink-subtle. */
.btn-subtle-primary {
  --tb-btn-color: var(--kd-brand-900);
  --tb-btn-bg: var(--kd-brand-50);
  --tb-btn-border-color: transparent;
  --tb-btn-hover-color: var(--kd-brand-fg);
  --tb-btn-hover-bg: var(--kd-brand-600);
  --tb-btn-hover-border-color: transparent;
  --tb-btn-focus-shadow-rgb: 194, 74, 0;
  --tb-btn-active-color: var(--kd-brand-fg);
  --tb-btn-active-bg: var(--kd-brand-600-active);
  --tb-btn-active-border-color: transparent;
  --tb-btn-disabled-color: var(--kd-brand-900);
  --tb-btn-disabled-bg: var(--kd-brand-50);
  --tb-btn-disabled-border-color: transparent;
}
.btn-ghost-primary {
  --tb-btn-color: var(--kd-brand-700);
  --tb-btn-bg: transparent;
  --tb-btn-border-color: transparent;
  --tb-btn-hover-color: var(--kd-brand-900);
  --tb-btn-hover-bg: var(--kd-brand-50);
  --tb-btn-hover-border-color: transparent;
  --tb-btn-focus-shadow-rgb: 194, 74, 0;
  --tb-btn-active-color: var(--kd-brand-900);
  --tb-btn-active-bg: var(--kd-brand-100);
  --tb-btn-active-border-color: transparent;
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-disabled-bg: transparent;
  --tb-btn-disabled-border-color: transparent;
}
.btn-subtle-secondary {
  --tb-btn-color: var(--kd-ink);
  --tb-btn-bg: var(--kd-surface-100);
  --tb-btn-border-color: transparent;
  --tb-btn-hover-color: var(--kd-ink);
  --tb-btn-hover-bg: var(--kd-surface-200);
  --tb-btn-hover-border-color: transparent;
  --tb-btn-focus-shadow-rgb: 90, 101, 111;
  --tb-btn-active-color: var(--kd-ink);
  --tb-btn-active-bg: var(--kd-surface-200);
  --tb-btn-active-border-color: transparent;
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-disabled-bg: var(--kd-surface-100);
  --tb-btn-disabled-border-color: transparent;
}
/* Ghost do Prumo: sem borda, texto ink-muted, hover surface-100 e texto ink */
.btn-ghost-secondary,
.btn-ghost-dark {
  --tb-btn-color: var(--kd-ink-muted);
  --tb-btn-bg: transparent;
  --tb-btn-border-color: transparent;
  --tb-btn-hover-color: var(--kd-ink);
  --tb-btn-hover-bg: var(--kd-surface-100);
  --tb-btn-hover-border-color: transparent;
  --tb-btn-focus-shadow-rgb: 75, 86, 99;
  --tb-btn-active-color: var(--kd-ink);
  --tb-btn-active-bg: var(--kd-surface-200);
  --tb-btn-active-border-color: transparent;
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-disabled-bg: transparent;
  --tb-btn-disabled-border-color: transparent;
}
.btn-subtle-success,
.btn-subtle-info,
.btn-subtle-warning,
.btn-subtle-danger {
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-disabled-border-color: transparent;
}
.btn-subtle-success {
  --tb-btn-disabled-color: var(--tb-success-text-emphasis);
  --tb-btn-disabled-bg: var(--tb-success-bg-subtle);
}
.btn-subtle-info {
  --tb-btn-disabled-color: var(--tb-info-text-emphasis);
  --tb-btn-disabled-bg: var(--tb-info-bg-subtle);
}
.btn-subtle-warning {
  --tb-btn-disabled-color: var(--tb-warning-text-emphasis);
  --tb-btn-disabled-bg: var(--tb-warning-bg-subtle);
}
.btn-subtle-danger {
  --tb-btn-disabled-color: var(--tb-danger-text-emphasis);
  --tb-btn-disabled-bg: var(--tb-danger-bg-subtle);
}
.btn-subtle-light,
.btn-ghost-light {
  --tb-btn-color: var(--kd-ink-muted);
  --tb-btn-hover-color: var(--kd-ink);
  --tb-btn-active-color: var(--kd-ink);
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-disabled-border-color: transparent;
}
.btn-subtle-light {
  --tb-btn-disabled-bg: var(--tb-light-bg-subtle);
}
.btn-ghost-light {
  --tb-btn-disabled-bg: transparent;
}
.btn-subtle-dark {
  --tb-btn-hover-color: var(--kd-ink-inverse);
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-disabled-color: var(--tb-dark-text-emphasis);
  --tb-btn-disabled-bg: var(--tb-dark-bg-subtle);
  --tb-btn-disabled-border-color: transparent;
}

/* D.8 — Links utilitários: o Bootstrap compilou RGBA literal com !important
   no hover/focus (bootstrap.css:7594-7672); só se vencem com !important. */
.link-primary:hover,
.link-primary:focus {
  color: var(--kd-brand-900) !important;
  -webkit-text-decoration-color: var(--kd-brand-900) !important;
          text-decoration-color: var(--kd-brand-900) !important;
}
.link-secondary:hover,
.link-secondary:focus {
  color: var(--kd-ink) !important;
  -webkit-text-decoration-color: var(--kd-ink) !important;
          text-decoration-color: var(--kd-ink) !important;
}
.link-success:hover,
.link-success:focus {
  color: var(--kd-success-fg) !important;
  -webkit-text-decoration-color: var(--kd-success-fg) !important;
          text-decoration-color: var(--kd-success-fg) !important;
}
.link-info:hover,
.link-info:focus {
  color: var(--kd-info-fg) !important;
  -webkit-text-decoration-color: var(--kd-info-fg) !important;
          text-decoration-color: var(--kd-info-fg) !important;
}
.link-warning:hover,
.link-warning:focus {
  color: var(--kd-warning-fg) !important;
  -webkit-text-decoration-color: var(--kd-warning-fg) !important;
          text-decoration-color: var(--kd-warning-fg) !important;
}
.link-danger:hover,
.link-danger:focus {
  color: var(--kd-danger-fg) !important;
  -webkit-text-decoration-color: var(--kd-danger-fg) !important;
          text-decoration-color: var(--kd-danger-fg) !important;
}
.link-light:hover,
.link-light:focus {
  color: var(--kd-surface-50) !important;
  -webkit-text-decoration-color: var(--kd-surface-50) !important;
          text-decoration-color: var(--kd-surface-50) !important;
}
.link-dark:hover,
.link-dark:focus {
  color: var(--kd-ink) !important;
  -webkit-text-decoration-color: var(--kd-ink) !important;
          text-decoration-color: var(--kd-ink) !important;
}

/* D.9 — Dropdown escuro e cabeçalho */
.dropdown-menu {
  --tb-dropdown-header-color: var(--kd-ink-subtle);
}
.dropdown-menu-dark {
  --tb-dropdown-color: var(--kd-sidebar-fg);
  --tb-dropdown-bg: var(--kd-sidebar-bg);
  --tb-dropdown-border-color: var(--kd-sidebar-active-bg);
  --tb-dropdown-divider-bg: var(--kd-sidebar-active-bg);
  --tb-dropdown-link-color: var(--kd-sidebar-fg);
  --tb-dropdown-link-hover-color: var(--kd-sidebar-active-fg);
  --tb-dropdown-link-hover-bg: var(--kd-sidebar-active-bg);
  --tb-dropdown-link-active-color: var(--kd-sidebar-active-fg);
  --tb-dropdown-link-active-bg: var(--kd-sidebar-active-bg);
  --tb-dropdown-link-disabled-color: var(--kd-sidebar-fg-muted);
  --tb-dropdown-header-color: var(--kd-sidebar-fg-muted);
}

/* D.10 — Primário consumido por var() mas com texto #fff literal, e os
   componentes que o Prumo tira da marca (paginação, list-group, dropdown) */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--kd-brand-600);
  border-color: var(--kd-brand-600);
}
.nav-pills {
  --tb-nav-pills-border-radius: var(--kd-radius-1);
  --tb-nav-pills-link-active-color: var(--kd-brand-fg);
  --tb-nav-pills-link-active-bg: var(--kd-brand-600);
}
.progress,
.progress-stacked {
  --tb-progress-bg: var(--kd-surface-200);
  --tb-progress-border-radius: var(--kd-radius-1);
  --tb-progress-box-shadow: none;
  --tb-progress-bar-color: var(--kd-brand-fg);
  --tb-progress-bar-bg: var(--kd-brand-600);
}
.progress-bar {
  color: var(--kd-brand-fg);
  background-color: var(--kd-brand-600);
}
/* No escuro brand-600 sobre --tb-progress-bg (surface-200 #2d343d) dá 2,56:1, abaixo
   dos 3:1 de objeto gráfico; brand-500 dá 5,63:1 — mesmo motivo do sublinhado da aba
   e do anel de foco. O rótulo dentro da barra passa a ink-inverse (brand-fg branco
   sobre brand-500 não lê). */
[data-bs-theme=dark] .progress,
[data-bs-theme=dark] .progress-stacked {
  --tb-progress-bar-color: var(--kd-ink-inverse);
  --tb-progress-bar-bg: var(--kd-brand-500);
}
[data-bs-theme=dark] .progress-bar {
  color: var(--kd-ink-inverse);
  background-color: var(--kd-brand-500);
}
/* Paginação: página atual em surface-100 + ink + borda line (a marca não entra aqui) */
.pagination {
  --tb-pagination-font-size: 0.8125rem;
  --tb-pagination-color: var(--kd-ink-muted);
  --tb-pagination-bg: var(--kd-surface-0);
  --tb-pagination-border-color: var(--kd-surface-200);
  --tb-pagination-border-radius: var(--kd-radius-1);
  --tb-pagination-hover-color: var(--kd-ink);
  --tb-pagination-hover-bg: var(--kd-surface-100);
  --tb-pagination-hover-border-color: var(--kd-surface-200);
  --tb-pagination-focus-color: var(--kd-ink);
  --tb-pagination-focus-bg: var(--kd-surface-0);
  --tb-pagination-focus-box-shadow: var(--kd-shadow-focus);
  --tb-pagination-active-color: var(--kd-ink);
  --tb-pagination-active-bg: var(--kd-surface-100);
  --tb-pagination-active-border-color: var(--kd-line);
  --tb-pagination-disabled-color: var(--kd-ink-subtle);
  --tb-pagination-disabled-bg: var(--kd-surface-0);
  --tb-pagination-disabled-border-color: var(--kd-surface-200);
}
.page-link.active,
.active > .page-link {
  color: var(--kd-ink);
  background-color: var(--kd-surface-100);
  border-color: var(--kd-line);
  font-weight: 600;
}
/* List-group: item ativo = seleção (brand-50 + ink + brand-300), não bloco laranja */
.list-group {
  --tb-list-group-color: var(--kd-ink);
  --tb-list-group-bg: var(--kd-surface-0);
  --tb-list-group-border-color: var(--kd-surface-200);
  --tb-list-group-border-radius: var(--kd-radius-2);
  --tb-list-group-action-color: var(--kd-ink);
  --tb-list-group-action-hover-color: var(--kd-ink);
  --tb-list-group-action-hover-bg: var(--kd-surface-50);
  --tb-list-group-action-active-color: var(--kd-ink);
  --tb-list-group-action-active-bg: var(--kd-surface-100);
  --tb-list-group-disabled-color: var(--kd-ink-subtle);
  --tb-list-group-disabled-bg: var(--kd-surface-0);
  --tb-list-group-active-color: var(--kd-ink);
  --tb-list-group-active-bg: var(--kd-brand-50);
  --tb-list-group-active-border-color: var(--kd-brand-300);
}
.list-group-item.active {
  color: var(--kd-ink);
  background-color: var(--kd-brand-50);
  border-color: var(--kd-brand-300);
}
.dropdown-item.active,
.dropdown-item:active {
  color: var(--kd-ink);
  background-color: var(--kd-surface-100);
}

/* D.11 — Anéis de foco. No Steex eram "0 0 1 .25rem rgba(var(--tb-primary), .25)"
   (1 sem unidade + rgba de hex → inválidos, sem anel nenhum). */
.form-control:focus {
  color: var(--kd-ink);
  background-color: var(--kd-surface-0);
  border-color: var(--kd-focus-ring);
  outline: 0;
  -webkit-box-shadow: var(--kd-shadow-focus);
          box-shadow: var(--kd-shadow-focus);
}
.form-select:focus {
  border-color: var(--kd-focus-ring);
  outline: 0;
  -webkit-box-shadow: var(--kd-shadow-focus);
          box-shadow: var(--kd-shadow-focus);
}
.form-check-input:focus {
  border-color: var(--kd-focus-ring);
  outline: 0;
  -webkit-box-shadow: var(--kd-shadow-focus);
          box-shadow: var(--kd-shadow-focus);
}
.nav-link:focus-visible {
  outline: 0;
  -webkit-box-shadow: var(--kd-shadow-focus);
          box-shadow: var(--kd-shadow-focus);
}
.form-range:focus::-webkit-slider-thumb {
  -webkit-box-shadow: var(--kd-shadow-focus);
          box-shadow: var(--kd-shadow-focus);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: var(--kd-shadow-focus);
}
.form-range::-webkit-slider-thumb {
  background-color: var(--kd-brand-600);
}
.form-range::-moz-range-thumb {
  background-color: var(--kd-brand-600);
}

/* D.12 — Steex: alert-label, badges em gradiente (Prumo não tem gradiente →
   cor cheia), card-radio e swiper */
.alert-label-icon.label-arrow .label-icon:after {
  border-right-color: var(--kd-brand-600);
}
.badge-gradient-primary {
  background: var(--kd-brand-600);
}
.badge-gradient-secondary {
  background: var(--kd-line-strong);
}
.badge-gradient-success {
  background: var(--kd-success);
}
.badge-gradient-danger {
  background: var(--kd-danger);
}
.badge-gradient-warning {
  background: var(--kd-warning);
}
.badge-gradient-info {
  background: var(--kd-info);
}
.badge-gradient-dark {
  background: var(--kd-ink);
}
/* a regra do Steex usa !important (app.css:6754); card marcado = brand-50 + borda brand-300 */
.card-radio .form-check-input:checked + .form-check-label {
  border-color: var(--kd-brand-300) !important;
  background-color: var(--kd-brand-50);
}
.card-radio .form-check-input:checked + .form-check-label:before {
  color: var(--kd-brand-600);
}
.card-radio .form-check-label {
  border-color: var(--kd-line);
  border-radius: var(--kd-radius-1);
}
.pagination-custom .swiper-pagination-bullet.swiper-pagination-bullet-active {
  color: var(--kd-ink);
}

/* D.13 — FullCalendar (app.css:9259-9295): o Steex usa !important, logo o
   override também precisa. Texto sobre tint de marca = brand-900. */
.fc-daygrid-event-harness .fc-daygrid-event.bg-primary-subtle .fc-event-title,
.fc-daygrid-event-harness .fc-daygrid-event.bg-primary-subtle .fc-event-main {
  color: var(--kd-brand-900) !important;
}
.fc-timegrid-event-harness .fc-timegrid-event.bg-primary-subtle .fc-event-title {
  color: var(--kd-brand-900) !important;
}
.fc-list-table .fc-list-event.bg-primary-subtle {
  color: var(--kd-brand-900) !important;
}
.fc-list-table .fc-list-event.bg-primary-subtle .fc-list-event-title > a {
  color: var(--kd-brand-900) !important;
}
.fc-list-table .fc-list-event.bg-primary-subtle .fc-list-event-dot {
  border-color: var(--kd-brand-600);
}
.fc-daygrid-event-harness .fc-daygrid-event.bg-secondary-subtle .fc-event-title,
.fc-daygrid-event-harness .fc-daygrid-event.bg-secondary-subtle .fc-event-main {
  color: var(--kd-ink) !important;
}
.fc-timegrid-event-harness .fc-timegrid-event.bg-secondary-subtle .fc-event-title {
  color: var(--kd-ink) !important;
}
.fc-list-table .fc-list-event.bg-secondary-subtle {
  color: var(--kd-ink) !important;
}
.fc-list-table .fc-list-event.bg-secondary-subtle .fc-list-event-title > a {
  color: var(--kd-ink) !important;
}
.fc-list-table .fc-list-event.bg-secondary-subtle .fc-list-event-dot {
  border-color: var(--kd-line-strong);
}

/* D.14 — Choices.js desabilitado (app.css:10735) */
.is-disabled .choices__list--multiple .choices__item {
  background-color: var(--kd-surface-200);
  border: 1px solid var(--kd-surface-200);
  color: var(--kd-ink-muted);
}

/* D.15 — Modo escuro: brand-600 como texto/contorno dá 3,37:1 sobre surface-0
   escuro, e o Bootstrap não redefine --tb-primary(-rgb) sob [data-bs-theme=dark];
   texto de marca passa a brand-700 (#ffa46b). As utilities têm !important. */
[data-bs-theme=dark] .text-primary {
  color: var(--kd-brand-700) !important;
}
[data-bs-theme=dark] .link-primary {
  color: var(--kd-brand-700) !important;
  -webkit-text-decoration-color: var(--kd-brand-700) !important;
          text-decoration-color: var(--kd-brand-700) !important;
}
[data-bs-theme=dark] .link-primary:hover,
[data-bs-theme=dark] .link-primary:focus {
  color: var(--kd-brand-900) !important;
  -webkit-text-decoration-color: var(--kd-brand-900) !important;
          text-decoration-color: var(--kd-brand-900) !important;
}
[data-bs-theme=dark] .border-primary {
  border-color: var(--kd-brand-700) !important;
}
[data-bs-theme=dark] .btn-outline-primary {
  --tb-btn-color: var(--kd-brand-700);
  --tb-btn-border-color: var(--kd-brand-700);
  --tb-btn-disabled-color: var(--kd-brand-700);
  --tb-btn-disabled-border-color: var(--kd-brand-700);
}
[data-bs-theme=dark] .btn-ghost-primary {
  --tb-btn-color: var(--kd-brand-700);
}
/* .text-bg-* compilou color:#fff — sobre os semânticos claros do escuro não lê */
[data-bs-theme=dark] .text-bg-secondary,
[data-bs-theme=dark] .text-bg-success,
[data-bs-theme=dark] .text-bg-info,
[data-bs-theme=dark] .text-bg-warning,
[data-bs-theme=dark] .text-bg-danger,
[data-bs-theme=dark] .text-bg-dark {
  color: var(--kd-ink-inverse) !important;
}
[data-bs-theme=dark] .text-bg-light {
  color: var(--kd-ink) !important;
}
/* .bg-* semântico + .text-white (padrão vivo: card.bg-success > h3.text-white na
   Prestação de Contas, badge.bg-danger.text-white no dashboard e em cobranças).
   No escuro os semânticos são tints claros (success #5ec996 + branco = 2,0:1;
   danger #f06b78 = 2,7:1; .text-white-50 ≈ 1,4:1) — o texto vira ink-inverse.
   !important: .text-white/.text-white-50 são utilities do Bootstrap com !important. */
[data-bs-theme=dark] :is(.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark).text-white,
[data-bs-theme=dark] :is(.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark) .text-white {
  color: var(--kd-ink-inverse) !important;
}
[data-bs-theme=dark] :is(.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark) .text-white-50 {
  color: rgba(var(--kd-ink-inverse-rgb), 0.72) !important;
}


/* ============================================================================
   E. TIPOGRAFIA — IBM Plex Sans 400/500/600, Plex Mono 400
   Escala: h1 22, h2 18, h3 16, h4 14, body 14/20, body-sm/label/table 13,
   caption 12 (piso). Tudo em caixa de frase.
   ============================================================================ */
body {
  font-family: var(--kd-font-sans);
  font-size: 0.875rem;
  line-height: 1.4286;
  color: var(--kd-ink);
  background-color: var(--kd-surface-50);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--kd-font-sans);
  font-weight: 600;
  color: var(--kd-ink);
}
h1, .h1 {
  font-size: 1.375rem;      /* 22px */
  line-height: 1.75rem;     /* 28px */
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-size: 1.125rem;      /* 18px */
  line-height: 1.5rem;      /* 24px */
}
h3, .h3 {
  font-size: 1rem;          /* 16px */
  line-height: 1.375rem;    /* 22px */
}
h4, .h4 {
  font-size: 0.875rem;      /* 14px */
  line-height: 1.25rem;     /* 20px */
}
h5, .h5 {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
h6, .h6 {
  font-size: 0.8125rem;     /* 13px */
  line-height: 1.125rem;    /* 18px */
}

/* Tamanhos derivados de --tb-font-base que precisam de valor próprio */
.card-title {
  font-weight: 600;
}
.modal-title {
  font-size: 1rem;          /* h3: título de modal */
  font-weight: 600;
  color: var(--kd-ink);
}
small {
  font-size: .9286em;       /* 13/14 relativo: dentro de legenda de 12px (.fs-12, .form-text,
                               badge, breadcrumb) continua MENOR que o texto em volta */
}
.small {
  font-size: 0.8125rem;     /* a utility continua absoluta (body-sm 13px) */
}
.form-text {
  font-size: 0.75rem;       /* caption */
  color: var(--kd-ink-muted);
}
.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kd-ink);
}
.col-form-label {
  font-size: 0.8125rem;
  font-weight: 500;
}
/* controles sm em body-sm (o Bootstrap calcula base × .875 = 12,25px) */
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
  font-size: 0.8125rem;
}

/* Tabela: 13/18, cabeçalho 500 em caixa de frase e ink-muted sobre surface-50,
   régua inferior line-strong; números tabulares em toda célula */
.table {
  font-size: 0.8125rem;
  line-height: 1.125rem;
}
.table th {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.table thead th,
.table > thead > tr > th {
  color: var(--kd-ink-muted);
  background-color: var(--kd-surface-50);
}
.table > thead > tr > th {
  border-bottom-color: var(--kd-line-strong);
}
/* o Steex põe um 2º fio (border-top do tbody) logo abaixo da régua do cabeçalho */
.table > :not(:first-child) {
  border-top-width: 0;
}
/* .table-dark mantém o cabeçalho grafite */
.table-dark thead th,
.table-dark > thead > tr > th,
.table > thead.table-dark > tr > th {
  color: var(--kd-sidebar-fg);
  background-color: var(--kd-sidebar-bg);
  border-bottom-color: var(--kd-sidebar-active-bg);
}
.table td,
.table th,
.kd-numeric {
  font-variant-numeric: tabular-nums;
}
.table-sm {
  font-size: 0.8125rem;
}

/* Botões: 14/500 (sm 13) — sem caixa alta */
.btn {
  --tb-btn-font-family: var(--kd-font-sans);
  --tb-btn-font-size: 0.875rem;
  --tb-btn-font-weight: 500;
  --tb-btn-border-radius: var(--kd-radius-1);
  text-transform: none;
  letter-spacing: 0;
}
.btn-sm,
.btn-group-sm > .btn {
  --tb-btn-font-size: 0.8125rem;
  --tb-btn-border-radius: var(--kd-radius-1);
}
.btn-lg,
.btn-group-lg > .btn {
  --tb-btn-font-size: 1rem;
  --tb-btn-border-radius: var(--kd-radius-1);
}

/* Badge: 12/500, retangular (radius-1), padding 4px 8px; texto ink-inverse
   para acompanhar os semânticos claros do tema escuro */
.badge {
  --tb-badge-padding-x: 0.5rem;
  --tb-badge-padding-y: 0.25rem;
  --tb-badge-font-size: 0.75rem;
  --tb-badge-font-weight: 500;
  --tb-badge-color: var(--kd-ink-inverse);
  --tb-badge-border-radius: var(--kd-radius-1);
  font-family: var(--kd-font-sans);
  letter-spacing: 0;
  text-transform: none;
}
.badge.bg-primary {
  --tb-badge-color: var(--kd-brand-fg);
}
.badge.bg-light {
  --tb-badge-color: var(--kd-ink);
}
/* Badge-status do Prumo mesmo sem .text-*-emphasis na marcação */
.badge.bg-primary-subtle   { --tb-badge-color: var(--kd-brand-900); }
.badge.bg-secondary-subtle { --tb-badge-color: var(--kd-ink-muted); }
.badge.bg-success-subtle   { --tb-badge-color: var(--kd-success-fg); }
.badge.bg-info-subtle      { --tb-badge-color: var(--kd-info-fg); }
.badge.bg-warning-subtle   { --tb-badge-color: var(--kd-warning-fg); }
.badge.bg-danger-subtle    { --tb-badge-color: var(--kd-danger-fg); }
.badge.bg-light-subtle     { --tb-badge-color: var(--kd-ink-muted); }
.badge.bg-dark-subtle      { --tb-badge-color: var(--kd-ink); }
/* 63 ocorrências de "bg-primary-subtle text-primary" (badge, avatar-title): .text-primary
   (!important) vence o --tb-badge-color acima e pinta brand-600 sobre brand-50 = 4,48:1.
   Texto sobre tint de marca é brand-900 (10,32:1 no claro; #ffd3b8 sobre #2b1a0f no escuro —
   a regra vem depois do [data-bs-theme=dark] .text-primary de D.15, mesma especificidade).
   !important: .text-primary é utility do Bootstrap com !important. */
.bg-primary-subtle.text-primary,
.bg-primary-subtle .text-primary {
  color: var(--kd-brand-900) !important;
}

/* Monoespaçada: identificadores (CTR-00118, linha digitável, CPF/CNPJ) */
code, kbd, samp, pre,
.font-monospace {
  font-family: var(--kd-font-mono);
}
code {
  font-size: 0.8125rem;
  color: var(--kd-ink);
  background-color: var(--kd-surface-100);
  border-radius: var(--kd-radius-1);
  padding: 0.0625rem 0.25rem;
}
pre code {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}

/* Pesos: só 400/500/600 são carregados; .fw-bolder usa "bolder !important" */
.fw-bolder {
  font-weight: 600 !important;
}
b, strong {
  font-weight: 600;
}

/* Breadcrumb em caption ink-subtle; último item ink-muted */
.breadcrumb {
  --tb-breadcrumb-font-size: 0.75rem;
  --tb-breadcrumb-divider-color: var(--kd-ink-subtle);
  --tb-breadcrumb-item-active-color: var(--kd-ink-muted);
}

/* Tooltip 12px, dropdown e toast em body-sm */
.tooltip {
  --tb-tooltip-font-size: 0.75rem;
}


/* ============================================================================
   F. SUPERFÍCIES E COMPONENTES
   Fio de 1px surface-200 no lugar de sombra; raio 6px em cards/modais/
   dropdowns/toasts e 4px em controles; sombra só em camadas flutuantes.
   ============================================================================ */

/* F.1 — Card */
.card {
  --tb-card-border-width: 1px;
  --tb-card-border-color: var(--kd-surface-200);
  --tb-card-border-radius: var(--kd-radius-2);
  --tb-card-inner-border-radius: calc(var(--kd-radius-2) - 1px);
  --tb-card-box-shadow: none;
  --tb-card-cap-bg: transparent;
  --tb-card-bg: var(--kd-surface-0);
  --tb-card-color: var(--kd-ink);
  border: 1px solid var(--kd-surface-200);
  border-radius: var(--kd-radius-2);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--kd-surface-200);
  /* o Steex zera o padding inferior do cabeçalho porque não tinha fio;
     com o fio, o cabeçalho volta a ser simétrico */
  padding-bottom: var(--tb-card-cap-padding-y);
}
.card-footer {
  background-color: var(--kd-surface-50);
  border-top: 1px solid var(--kd-surface-200);
}
.card-animate:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: none;
          transform: none;
  border-color: var(--kd-line);
}
hr {
  color: var(--kd-surface-200);
  opacity: 1;
}

/* F.2 — Dropdown */
.dropdown-menu {
  --tb-dropdown-font-size: 0.8125rem;
  --tb-dropdown-color: var(--kd-ink);
  --tb-dropdown-bg: var(--kd-surface-0);
  --tb-dropdown-border-color: var(--kd-surface-200);
  --tb-dropdown-border-radius: var(--kd-radius-2);
  --tb-dropdown-inner-border-radius: calc(var(--kd-radius-2) - 1px);
  --tb-dropdown-divider-bg: var(--kd-surface-200);
  --tb-dropdown-box-shadow: var(--kd-shadow-1);
  --tb-dropdown-link-color: var(--kd-ink);
  --tb-dropdown-link-hover-color: var(--kd-ink);
  --tb-dropdown-link-hover-bg: var(--kd-surface-100);
  --tb-dropdown-link-active-color: var(--kd-ink);
  --tb-dropdown-link-active-bg: var(--kd-surface-100);
  --tb-dropdown-link-disabled-color: var(--kd-ink-subtle);
  border-color: var(--kd-surface-200);
  border-radius: var(--kd-radius-2);
  -webkit-box-shadow: var(--kd-shadow-1);
          box-shadow: var(--kd-shadow-1);
}

/* F.3 — Modal, backdrop, offcanvas */
.modal {
  --tb-modal-color: var(--kd-ink);
  --tb-modal-bg: var(--kd-surface-0);
  --tb-modal-border-color: var(--kd-surface-200);
  --tb-modal-border-radius: var(--kd-radius-2);
  --tb-modal-box-shadow: var(--kd-shadow-2);
  --tb-modal-inner-border-radius: calc(var(--kd-radius-2) - 1px);
  --tb-modal-header-border-color: var(--kd-surface-200);
  --tb-modal-footer-border-color: var(--kd-surface-200);
  --tb-modal-footer-border-width: 1px;
}
.modal-content {
  border-color: var(--kd-surface-200);
  border-radius: var(--kd-radius-2);
  -webkit-box-shadow: var(--kd-shadow-2);
          box-shadow: var(--kd-shadow-2);
}
.modal-backdrop {
  --tb-backdrop-bg: var(--kd-overlay);
  --tb-backdrop-opacity: 0.56;
}
[data-bs-theme=dark] .modal-backdrop {
  --tb-backdrop-opacity: 0.64;
}
.offcanvas,
.offcanvas-xxl,
.offcanvas-xl,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
  --tb-offcanvas-color: var(--kd-ink);
  --tb-offcanvas-bg: var(--kd-surface-0);
  --tb-offcanvas-border-color: var(--kd-surface-200);
  --tb-offcanvas-box-shadow: var(--kd-shadow-2);
}
.offcanvas-backdrop {
  background-color: var(--kd-overlay);
}
.offcanvas-backdrop.show {
  opacity: 0.56;
}
[data-bs-theme=dark] .offcanvas-backdrop.show {
  opacity: 0.64;
}

/* F.4 — Toast, tooltip, popover */
.toast {
  --tb-toast-font-size: 0.8125rem;
  --tb-toast-color: var(--kd-ink);
  --tb-toast-bg: var(--kd-surface-0);
  --tb-toast-border-color: var(--kd-surface-200);
  --tb-toast-border-radius: var(--kd-radius-2);
  --tb-toast-box-shadow: var(--kd-shadow-1);
  --tb-toast-header-color: var(--kd-ink);
  --tb-toast-header-bg: var(--kd-surface-0);
  --tb-toast-header-border-color: var(--kd-surface-200);
}
[data-bs-theme=dark] .toast {
  --tb-toast-bg: var(--kd-surface-100);
  --tb-toast-header-bg: var(--kd-surface-100);
}
.tooltip {
  --tb-tooltip-color: var(--kd-ink-inverse);
  --tb-tooltip-bg: var(--kd-ink);
  --tb-tooltip-border-radius: var(--kd-radius-1);
}
.popover {
  --tb-popover-bg: var(--kd-surface-0);
  --tb-popover-border-color: var(--kd-surface-200);
  --tb-popover-border-radius: var(--kd-radius-2);
  --tb-popover-inner-border-radius: calc(var(--kd-radius-2) - 1px);
  --tb-popover-box-shadow: var(--kd-shadow-1);
  --tb-popover-header-color: var(--kd-ink);
  --tb-popover-header-bg: var(--kd-surface-50);
  --tb-popover-body-color: var(--kd-ink);
}

/* F.5 — Controles de formulário: borda line, raio 4px, hover line-strong,
   placeholder ink-subtle, desabilitado surface-100 + ink-subtle */
.form-control,
.form-select {
  color: var(--kd-ink);
  background-color: var(--kd-surface-0);
  border-color: var(--kd-line);
  border-radius: var(--kd-radius-1);
}
.form-control-sm,
.form-select-sm,
.form-control-lg,
.form-select-lg {
  border-radius: var(--kd-radius-1);
}
.form-control:not(:focus):not(:disabled):not([readonly]):not(.is-invalid):not(.is-valid):hover,
.form-select:not(:focus):not(:disabled):not(.is-invalid):not(.is-valid):hover {
  border-color: var(--kd-line-strong);
}
.form-control::placeholder {
  color: var(--kd-ink-subtle);
  opacity: 1;
}
.form-control:disabled,
.form-select:disabled {
  color: var(--kd-ink-subtle);
  background-color: var(--kd-surface-100);
  border-color: var(--kd-surface-200);
}
.form-check-input {
  --tb-form-check-bg: var(--kd-surface-0);
  border-color: var(--kd-line);
}
.form-check-input[type=checkbox] {
  border-radius: var(--kd-radius-1);
}
.input-group-text {
  color: var(--kd-ink-muted);
  background-color: var(--kd-surface-50);
  border-color: var(--kd-line);
  border-radius: var(--kd-radius-1);
}

/* F.6 — Navegação por abas: estilo sublinhado, ativa em ink com 2px brand-600 */
.nav {
  --tb-nav-link-color: var(--kd-ink-muted);
  --tb-nav-link-hover-color: var(--kd-ink);
  --tb-nav-link-disabled-color: var(--kd-ink-subtle);
}
.nav-tabs {
  --tb-nav-tabs-border-color: var(--kd-surface-200);
  --tb-nav-tabs-border-radius: var(--kd-radius-1);
  --tb-nav-tabs-link-active-color: var(--kd-ink);
  --tb-nav-tabs-link-active-bg: var(--kd-surface-0);
  --tb-nav-tabs-link-active-border-color: var(--kd-surface-200) var(--kd-surface-200) var(--kd-surface-0);
}
.nav-tabs-custom {
  border-bottom-color: var(--kd-surface-200);
}
.nav-tabs-custom .nav-item .nav-link::after {
  background: var(--kd-brand-600);
  height: 2px;
}
.nav-tabs-custom .nav-item .nav-link.active,
.nav-tabs-custom .nav-item .nav-link:hover {
  color: var(--kd-ink);
}
.nav-underline {
  --tb-nav-underline-border-width: 0.125rem;
  --tb-nav-underline-link-active-color: var(--kd-ink);
}
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  font-weight: 500;
  border-bottom-color: var(--kd-brand-600);
}
[data-bs-theme=dark] .nav-tabs-custom .nav-item .nav-link::after {
  background: var(--kd-brand-500);
}
[data-bs-theme=dark] .nav-underline .nav-link.active,
[data-bs-theme=dark] .nav-underline .show > .nav-link {
  border-bottom-color: var(--kd-brand-500);
}

/* F.7 — Alertas: bg + fg pelos --tb-* remapeados, raio 4px, sem faixa lateral */
.alert {
  --tb-alert-border-radius: var(--kd-radius-1);
}

/* F.8 — Accordion neutro (aberto = surface-50 + ink) */
.accordion {
  --tb-accordion-color: var(--kd-ink);
  --tb-accordion-bg: var(--kd-surface-0);
  --tb-accordion-border-color: var(--kd-surface-200);
  --tb-accordion-border-radius: var(--kd-radius-2);
  --tb-accordion-inner-border-radius: calc(var(--kd-radius-2) - 1px);
  --tb-accordion-btn-color: var(--kd-ink);
  --tb-accordion-active-color: var(--kd-ink);
  --tb-accordion-active-bg: var(--kd-surface-50);
}

/* F.9 — Shell: page-title, topbar, sidebar e rodapé (só cor, fio e sombra;
   alturas e larguras ficam para a fase 2) */
.page-title-box {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-bottom: 1px solid var(--kd-surface-200);
  /* padding/margin ficam os do Steex (padding-bottom = gutter); o respiro de
     24px entra na fase 2 com o .kd-page-header */
}
/* app.css:1403-1407 fixa 15px !important em CAIXA ALTA no título de todas as
   páginas (partials/page-title.html); título de página = h1 do Prumo (22/28/600,
   caixa de frase). !important: só para vencer o 15px !important do Steex. */
.page-title-box h4 {
  font-size: 1.375rem !important;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--kd-ink);
}
#page-topbar {
  background-color: var(--kd-topbar-bg);
  border-bottom: 1px solid var(--kd-surface-200);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.navbar-menu,
[data-layout=horizontal] .navbar-menu {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.footer {
  color: var(--kd-ink-subtle);
  background-color: var(--kd-surface-50);
  border-top-color: var(--kd-surface-200);
}
/* app.css:2130 põe o título de grupo da sidebar em 11px; o piso tipográfico do
   Prumo é 12px (README «O que evitar»; fundamentos: 12px caixa alta, +0.06em,
   sidebar-fg-muted). Só tipografia — o padding do span fica o do Steex. */
.menu-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--tb-vertical-menu-title-color);
}

/* ============================================================================
   KD Imóveis · Prumo — kd-theme.css · parte 02: componentes KD
   ----------------------------------------------------------------------------
   Classes NOVAS, todas com prefixo (kd-*, .btn-ink, .btn-ghost-kd, .table-ledger,
   .text-brand/.link-brand), que os templates redesenhados passam a usar nas
   fases 2 e 3. Nenhum seletor aqui colide com Steex/Bootstrap/custom.css
   (conferido por grep nos templates vivos e nos 4 CSS KD em 2026-10-18).
   Só três grupos tocam seletores existentes, de propósito:
     - os ganchos de foco (.btn:focus-visible, .form-control:focus-visible…);
     - a skin do SweetAlert2, ativada por customClass (popup: 'kd-toast'/'kd-modal');
     - os blocos finais de toque (pointer: coarse) e de movimento reduzido.

   Regras desta camada
   - Toda cor sai de var(--kd-*) (tokens emitidos pela parte 01). As únicas
     literais são #af4300 (hover) e #9b3b00 (pressionado), os shades que o
     Bootstrap derivaria de brand-600 e que o design system fixou.
   - Os dois temas seguem sozinhos: os tokens trocam de valor sob
     html[data-bs-theme="dark"]. Só há bloco escuro explícito onde o design pede
     OUTRO token (sublinhado da aba em brand-500, backdrop a 64%).
   - Geometria do shell (header 70px, sidebar 250px) não é tocada na fase 1.
   - Sem !important, salvo onde a regra vencida já usa !important ou é style
     inline; cada caso está comentado no lugar.
   - Fallbacks em var(--kd-radius-*, …) e var(--kd-font-mono, …) protegem apenas
     contra a parte 01 não emitir esses tokens não-cromáticos; os tokens de cor
     são usados sem fallback de propósito (um token faltando tem de aparecer).
   - Especificidade: mesmo seletor do Bootstrap/Steex (vence por vir depois) ou
     um nível acima; nunca seletor universal com cor ou font-family.

   Índice
     1. Foco visível
     2. Botões: .btn-ink, .btn-ghost-kd, .kd-icon-btn
     3. Tabela razão: .table-ledger (+ .kd-numeric, .kd-bulk-bar)
     4. Tabela em cards no celular: .kd-table-cards
     5. Badges: .kd-badge-status, .kd-tag-brand
     6. Identificadores e texto de marca: .kd-code, .kd-money, .text-brand, .link-brand
     7. Cabeçalho de página: .kd-page-header, .kd-breadcrumb
     8. Barra de filtros: .kd-filter-bar, .kd-search, .kd-chip, .kd-chip-applied
     9. KPI: .kd-kpi, .kd-kpi-grid
    10. Estado vazio: .kd-empty
    11. Wizard: .kd-stepper, .kd-wizard-footer
    12. Abas: .kd-tabs
    13. Paginação: .kd-pagination-footer
    14. SweetAlert2: .swal2-popup.kd-toast, .swal2-popup.kd-modal
    15. Portais: .kd-bottom-nav, body.has-bottom-nav, html.kd-portal
    16. Toque (pointer: coarse)
    17. Movimento reduzido
   ============================================================================ */


/* ============================================================================
   1. Foco visível
   Um anel só: shadow-focus = 2px na cor da superfície + 2px em focus-ring.
   O Bootstrap compilado do Steex emite anéis inválidos
   ("0 0 1 0.25rem rgba(var(--tb-primary), .25)"), então aqui não há nada a
   vencer, só declarar. Mesmo seletor/especificidade do .btn:focus-visible do
   bootstrap.css, mais tarde na cascata → vence.
   ============================================================================ */
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
a:focus-visible,
.kd-icon-btn:focus-visible,
.kd-chip:focus-visible,
.kd-chip__remove:focus-visible,
.kd-stepper__step > a:focus-visible,
.kd-bottom-nav__item:focus-visible {
  outline: none;
  box-shadow: var(--kd-shadow-focus);
}

/* Sobre grafite (sidebar e barra inferior dos portais) o anel usa brand-500
   (7,19:1 sobre sidebar-bg) nos dois temas.
   Atenção: var() dentro de uma custom property é substituída no elemento que a
   DECLARA (--kd-shadow-focus é resolvida no :root e herdada já pronta), por isso
   trocar só --kd-focus-ring num descendente não altera o anel herdado. O token
   é trocado como o design system pede E a sombra é redeclarada no mesmo escopo. */
.navbar-menu :focus-visible,
.kd-bottom-nav :focus-visible {
  --kd-focus-ring: var(--kd-brand-500);
  --kd-shadow-focus: 0 0 0 2px var(--kd-sidebar-bg), 0 0 0 4px var(--kd-brand-500);
  outline: none;
  box-shadow: var(--kd-shadow-focus);
}


/* ============================================================================
   2. Botões
   .btn-ink e .btn-ghost-kd são variantes de .btn no padrão do Bootstrap 5.3:
   só variáveis --tb-btn-*, herdando padding, transição e estados
   :hover/:active/:disabled do próprio .btn. O foco vem da seção 1.
   ============================================================================ */

/* Grafite — ações de fechamento ("Dar baixa", "Encerrar"): hierarquia sem um
   segundo laranja. Não remapear $secondary para isto. */
.btn-ink {
  --tb-btn-color: var(--kd-ink-inverse);
  --tb-btn-bg: var(--kd-ink);
  --tb-btn-border-color: var(--kd-ink);
  --tb-btn-hover-color: var(--kd-ink-inverse);
  /* hover/pressionado: fallback ink-muted (7,47:1 no claro, 8,50:1 no escuro
     com ink-inverse); o @supports abaixo refina para a mistura do design
     system. Sem o guard, num navegador sem color-mix (Chrome < 111,
     Safari < 16.2, Firefox < 113 — tablets antigos de vistoria) a variável
     fica inválida e .btn:hover cairia em transparent (texto branco sobre nada). */
  --tb-btn-hover-bg: var(--kd-ink-muted);
  --tb-btn-hover-border-color: var(--kd-ink-muted);
  --tb-btn-active-color: var(--kd-ink-inverse);
  --tb-btn-active-bg: var(--kd-ink-muted);
  --tb-btn-active-border-color: var(--kd-ink-muted);
  --tb-btn-active-shadow: none;
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-disabled-bg: var(--kd-surface-100);
  --tb-btn-disabled-border-color: var(--kd-surface-200);
  --tb-btn-disabled-opacity: 1;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .btn-ink {
    /* hover = ink com 12% de ink-inverse. No claro é exatamente o
       color-mix(ink 88%, white) do design system; no escuro (ink claro) a
       mistura é com o grafite de ink-inverse, escurecendo em vez de clarear —
       e a regra "toda cor via token" fica inteira. */
    --tb-btn-hover-bg: color-mix(in srgb, var(--kd-ink) 88%, var(--kd-ink-inverse));
    --tb-btn-hover-border-color: color-mix(in srgb, var(--kd-ink) 88%, var(--kd-ink-inverse));
    --tb-btn-active-bg: color-mix(in srgb, var(--kd-ink) 78%, var(--kd-ink-inverse));
    --tb-btn-active-border-color: color-mix(in srgb, var(--kd-ink) 78%, var(--kd-ink-inverse));
  }
}

/* Fantasma — ações em linha de tabela, "Cancelar", topbar. */
.btn-ghost-kd {
  --tb-btn-color: var(--kd-ink-muted);
  --tb-btn-bg: transparent;
  --tb-btn-border-color: transparent;
  --tb-btn-hover-color: var(--kd-ink);
  --tb-btn-hover-bg: var(--kd-surface-100);
  --tb-btn-hover-border-color: transparent;
  --tb-btn-active-color: var(--kd-ink);
  --tb-btn-active-bg: var(--kd-surface-200);
  --tb-btn-active-border-color: transparent;
  --tb-btn-active-shadow: none;
  --tb-btn-disabled-color: var(--kd-ink-subtle);
  --tb-btn-disabled-bg: transparent;
  --tb-btn-disabled-border-color: transparent;
  --tb-btn-disabled-opacity: 1;
}

/* Cor semântica só em hover (ação destrutiva em linha de tabela). */
.btn-ghost-kd.is-danger {
  --tb-btn-hover-color: var(--kd-danger);
  --tb-btn-active-color: var(--kd-danger);
}

/* Botão só-ícone: 36×36 (32 com .is-sm; 44 em toque; 48 nos portais).
   Funciona em <button>, <a> e combinado com .btn (as regras abaixo têm a mesma
   especificidade das do .btn e vêm depois). Sempre com aria-label + tooltip. */
.kd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--kd-radius-1, .25rem);
  background-color: transparent;
  color: var(--kd-ink-muted);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.kd-icon-btn:hover {
  background-color: var(--kd-surface-100);
  color: var(--kd-ink);
}
.kd-icon-btn:active {
  background-color: var(--kd-surface-200);
  color: var(--kd-ink);
}
.kd-icon-btn.is-danger:hover,
.kd-icon-btn.is-danger:active {
  color: var(--kd-danger);
}
.kd-icon-btn:disabled,
.kd-icon-btn.disabled,
.kd-icon-btn[aria-disabled="true"] {
  background-color: transparent;
  color: var(--kd-ink-subtle);
  pointer-events: none;
}
.kd-icon-btn.is-sm {
  width: 32px;
  height: 32px;
}
.kd-icon-btn > [class^="ph-"],
.kd-icon-btn > [class*=" ph-"],
.kd-icon-btn > svg {
  font-size: inherit;
  width: 1em;
  height: 1em;
}


/* ============================================================================
   3. Tabela razão — .table-ledger
   Vive dentro do card da listagem (surface-0, fio surface-200, radius-2),
   encostada nas bordas: <div class="card"> + .card-body.p-0 ou .table-responsive.
   Funciona com ou sem a classe .table do Bootstrap: o box-shadow interno com
   que o Bootstrap pinta estados (--tb-table-bg-state) é zerado e os fundos de
   hover/seleção são pintados nas células por --kd-ledger-row-bg (variável
   privada do componente, sempre com valor de token), para não depender de
   .table-hover/.table-active no template.
   Cabeçalho fixo: position: sticky no <th> (o Safari não fixa <thead>). O topo
   padrão é 0 (correto dentro de um contêiner rolável, ex. card com max-height);
   numa página que rola o documento sob a topbar fixa de 70px, o template define
   --kd-ledger-sticky-top: var(--tb-header-height) na tabela.
   ============================================================================ */
.table-ledger {
  --tb-table-color: var(--kd-ink);
  --tb-table-bg: transparent;
  --tb-table-border-color: var(--kd-surface-200);
  --tb-table-accent-bg: transparent;
  --tb-table-striped-bg: transparent;            /* sem zebra */
  --tb-table-striped-color: var(--kd-ink);
  --tb-table-hover-bg: var(--kd-surface-50);
  --tb-table-hover-color: var(--kd-ink);
  --tb-table-active-bg: var(--kd-brand-50);
  --tb-table-active-color: var(--kd-ink);
  width: 100%;
  margin-bottom: 0;
  border-color: var(--kd-surface-200);
  color: var(--kd-ink);
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.table-ledger > thead {
  vertical-align: middle;
}

/* Células: 13/18 em ink, padding .625rem .75rem → linha de 40px, divisor 1px. */
.table-ledger > :not(caption) > * > * {
  padding: .625rem .75rem;
  color: var(--kd-ink);
  background-color: transparent;
  border-bottom: 1px solid var(--kd-surface-200);
  box-shadow: none;                              /* desliga o pintor de estados do Bootstrap */
  vertical-align: middle;
}
.table-ledger > tbody > tr > * {
  background-color: var(--kd-ledger-row-bg, transparent);
}
/* Sem fio duplo com o rodapé do card (só quando não há <tfoot>). */
.table-ledger > tbody:last-child > tr:last-child > * {
  border-bottom: 0;
}

/* Linhas: height em linha de tabela funciona como mínimo. */
.table-ledger > tbody > tr {
  height: 40px;
}
.table-ledger > tbody > tr:hover {
  --kd-ledger-row-bg: var(--kd-surface-50);
}
.table-ledger > tbody > tr.is-selected {
  --kd-ledger-row-bg: var(--kd-brand-50);        /* texto continua ink (14,95:1) */
}
.table-ledger > tbody > tr.is-selected:hover {
  --kd-ledger-row-bg: var(--kd-brand-100);
}

/* Cabeçalho: surface-50, label 13/500 em caixa de frase e ink-muted, fixo ao
   rolar; a régua inferior é desenhada como sombra (shadow-sticky) porque, com
   border-collapse, a borda de um <th> fixo não acompanha o deslocamento. */
.table-ledger > thead > tr > th {
  position: sticky;
  top: var(--kd-ledger-sticky-top, 0);
  z-index: 2;
  padding: .625rem .75rem;
  background-color: var(--kd-surface-50);
  color: var(--kd-ink-muted);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  border-bottom: 0;
  box-shadow: var(--kd-shadow-sticky);
}
/* Cantos superiores quando a tabela é o primeiro filho do card (sem filter-bar):
   arredonda os <th> das pontas em vez de overflow: hidden, que mataria o sticky. */
.card > .table-ledger:first-child > thead > tr > th:first-child,
.card > :first-child > .table-ledger:first-child > thead > tr > th:first-child {
  border-top-left-radius: calc(var(--kd-radius-2, .375rem) - 1px);
}
.card > .table-ledger:first-child > thead > tr > th:last-child,
.card > :first-child > .table-ledger:first-child > thead > tr > th:last-child {
  border-top-right-radius: calc(var(--kd-radius-2, .375rem) - 1px);
}

/* Ordenação: ph-caret-up/down 14px em ink-subtle; coluna ativa em ink. */
.table-ledger th .kd-sort {
  margin-left: 4px;
  font-size: 14px;
  color: var(--kd-ink-subtle);
  vertical-align: middle;
}
.table-ledger th.is-sorted,
.table-ledger th.is-sorted .kd-sort {
  color: var(--kd-ink);
}

/* Colunas numéricas: tabular, à direita, 500; negativos em danger COM o sinal
   (o "−" faz parte do texto — o CSS não o esconde nem troca por parênteses);
   zeros em ink-subtle. .kd-numeric vale também fora de tabela (totais, KPIs). */
.kd-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.kd-numeric.is-negative,
.table-ledger .is-negative {
  color: var(--kd-danger);
}
.kd-numeric.is-zero,
.table-ledger .is-zero {
  color: var(--kd-ink-subtle);
  font-weight: 400;
}
.table-ledger > thead > tr > th.kd-numeric {
  font-weight: 500;
}

/* Rodapé de totais: surface-50, 600, linha de total em line-strong. */
.table-ledger > tfoot.kd-totals > tr > * {
  background-color: var(--kd-surface-50);
  color: var(--kd-ink);
  font-weight: 600;
  border-top: 1px solid var(--kd-line-strong);
  border-bottom: 0;
}

/* Modo denso (razão, extratos, conciliação): linhas de 32px.
   .table-sm entra como sinônimo para o Bootstrap não "perder" a classe. */
.table-ledger.is-dense > :not(caption) > * > *,
.table-ledger.table-sm > :not(caption) > * > * {
  padding: .375rem .75rem;
}
.table-ledger.is-dense > tbody > tr,
.table-ledger.table-sm > tbody > tr {
  height: 32px;
}

/* Coluna de ações no fim: botões ghost de 32px, no máximo três visíveis. */
.table-ledger .kd-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.table-ledger .kd-actions .kd-icon-btn,
.table-ledger .kd-icon-btn {
  width: 32px;
  height: 32px;
}
.table-ledger .kd-actions .kd-icon-btn + .kd-icon-btn {
  margin-left: 4px;
}

/* Identificadores (CTR-00118) dentro da célula. */
.table-ledger .kd-code {
  font-size: 12px;
}

/* Empty-state dentro do tbody: a linha não ganha hover nem altura mínima. */
.table-ledger > tbody > tr.kd-empty-row {
  height: auto;
  --kd-ledger-row-bg: transparent;
}
.table-ledger > tbody > tr.kd-empty-row > td {
  padding: 0;
  border-bottom: 0;
}

/* Primeira coluna fixa quando há rolagem horizontal (tablet). */
.table-ledger.has-sticky-col > :not(caption) > tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--kd-ledger-row-bg, var(--kd-surface-0));
  box-shadow: 1px 0 0 0 var(--kd-surface-200);
}
.table-ledger.has-sticky-col > thead > tr > th:first-child {
  z-index: 3;
  background-color: var(--kd-surface-50);
  box-shadow: var(--kd-shadow-sticky), 1px 0 0 0 var(--kd-surface-200);
}
.table-ledger.has-sticky-col > tfoot > tr > :first-child {
  background-color: var(--kd-surface-50);
}

/* Barra de seleção em massa no topo do card: brand-50, contador brand-900. */
.kd-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 16px;
  background-color: var(--kd-brand-50);
  border-bottom: 1px solid var(--kd-brand-300);
  color: var(--kd-ink);
  font-size: 13px;
  line-height: 18px;
}
.kd-bulk-bar__count {
  font-weight: 600;
  color: var(--kd-brand-900);
  font-variant-numeric: tabular-nums;
}
.kd-bulk-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}


/* ============================================================================
   4. Tabela → cards no celular — .kd-table-cards (até 767px)
   Um só template: cada <td data-label="Vencimento"> mostra o rótulo em caption.
   Acima de 768px a classe não faz nada (a tabela segue como .table-ledger).
   Opcional: .kd-table-cards-host no card que envolve a tabela dissolve a
   moldura externa para as linhas-cartão não ficarem dentro de outro card.
   ============================================================================ */
@media (max-width: 767.98px) {
  .kd-table-cards,
  .kd-table-cards > tbody,
  .kd-table-cards > tbody > tr,
  .kd-table-cards > tbody > tr > td {
    display: block;
  }
  .kd-table-cards > thead,
  .kd-table-cards > tfoot,
  .kd-table-cards > caption {
    display: none;
  }
  .kd-table-cards {
    border: 0;
    background-color: transparent;
    padding: 12px;
  }
  .kd-table-cards > tbody > tr {
    height: auto;
    margin: 0 0 12px;
    padding: 12px 16px;
    background-color: var(--kd-surface-0);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2, .375rem);
  }
  .kd-table-cards > tbody > tr:last-child {
    margin-bottom: 0;
  }
  .kd-table-cards > tbody > tr.is-selected {
    background-color: var(--kd-brand-50);
    border-color: var(--kd-brand-300);
  }
  .kd-table-cards > tbody > tr > td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    height: auto;
    padding: 6px 0;
    border: 0;
    box-shadow: none;
    background-color: transparent;
    text-align: right;
    white-space: normal;
  }
  .kd-table-cards > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--kd-ink-muted);
  }
  .kd-table-cards > tbody > tr > td:not([data-label])::before {
    content: none;
  }
  /* Título do cartão (ex.: nome do locatário / código): primeira célula em h4. */
  .kd-table-cards > tbody > tr > td.kd-card-title {
    display: block;
    padding: 0 0 8px;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--kd-ink);
  }
  .kd-table-cards > tbody > tr > td.kd-card-title::before {
    content: none;
  }
  .kd-table-cards > tbody > tr > td.kd-numeric {
    font-weight: 500;
  }
  /* Linha de ações: no fim do cartão, sobre um fio, alinhada à direita. */
  .kd-table-cards > tbody > tr > td.kd-actions {
    justify-content: flex-end;
    gap: 4px;
    width: auto;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--kd-surface-200);
  }
  .kd-table-cards > tbody > tr > td.kd-actions::before {
    content: none;
  }
  .kd-table-cards > tbody > tr.kd-empty-row {
    padding: 0;
    border: 0;
    background-color: transparent;
  }
  .kd-table-cards-host {
    background-color: transparent;
    border-color: transparent;
  }
  .kd-table-cards-host > .kd-filter-bar,
  .kd-table-cards-host > .kd-pagination-footer {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2, .375rem);
  }
  .kd-table-cards-host > .kd-filter-bar {
    margin-bottom: 12px;
  }
}


/* ============================================================================
   5. Badges — .kd-badge-status e .kd-tag-brand
   Retângulo de 22px (nunca pílula), caption 12/500 em caixa de frase, ícone
   FIXO por estado à esquerda (check-circle, clock, warning-circle, info,
   minus-circle) — a forma identifica o estado antes da cor. Não combinar com
   .bg-*-subtle/.text-*-emphasis do Bootstrap (utilities com !important).
   ============================================================================ */
.kd-badge-status,
.kd-tag-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--kd-radius-1, .25rem);
  background-color: var(--kd-surface-100);       /* neutro por padrão */
  color: var(--kd-ink-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}
.kd-badge-status > [class^="ph-"],
.kd-badge-status > [class*=" ph-"],
.kd-badge-status > svg,
.kd-tag-brand > [class^="ph-"],
.kd-tag-brand > [class*=" ph-"],
.kd-tag-brand > svg {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 1;
}

/* Pares obrigatórios <estado>-bg + <estado>-fg. */
.kd-badge-status.is-success { background-color: var(--kd-success-bg); color: var(--kd-success-fg); }
.kd-badge-status.is-warning { background-color: var(--kd-warning-bg); color: var(--kd-warning-fg); }
.kd-badge-status.is-danger  { background-color: var(--kd-danger-bg);  color: var(--kd-danger-fg); }
.kd-badge-status.is-info    { background-color: var(--kd-info-bg);    color: var(--kd-info-fg); }
.kd-badge-status.is-neutral { background-color: var(--kd-surface-100); color: var(--kd-ink-muted); }

/* Sólido (contadores do sino, toasts de lote): cor cheia + ink-inverse. */
.kd-badge-status.is-solid.is-success { background-color: var(--kd-success); color: var(--kd-ink-inverse); }
.kd-badge-status.is-solid.is-warning { background-color: var(--kd-warning); color: var(--kd-ink-inverse); }
.kd-badge-status.is-solid.is-danger  { background-color: var(--kd-danger);  color: var(--kd-ink-inverse); }
.kd-badge-status.is-solid.is-info    { background-color: var(--kd-info);    color: var(--kd-ink-inverse); }
.kd-badge-status.is-solid.is-neutral { background-color: var(--kd-ink-muted); color: var(--kd-ink-inverse); }

/* Tag de marca ("Destaque", "Plano"): nunca indica estado e nunca fica ao lado
   de um badge de status (brand-50 e danger-bg são vizinhos pálidos). */
.kd-tag-brand {
  background-color: var(--kd-brand-50);
  color: var(--kd-brand-900);
}


/* ============================================================================
   6. Identificadores, dinheiro e texto de marca
   ============================================================================ */
/* Código mono (CTR-00118, linha digitável, CPF/CNPJ, chave PIX) — nunca para
   valores em reais. */
.kd-code,
.kd-page-header__code {
  display: inline-block;
  padding: 0 .375rem;
  border-radius: var(--kd-radius-1, .25rem);
  background-color: var(--kd-surface-100);
  color: var(--kd-ink);
  font-family: var(--kd-font-mono, "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: baseline;
}

/* Valores monetários fora de tabela ("R$ 1.234,56"). */
.kd-money {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Marca como texto: brand-700 nos dois temas (no escuro vira laranja claro pelo
   token). Nunca .text-primary/.link-primary, que leem --tb-primary (3,37:1 no
   escuro). Links sublinhados; hover em brand-900. */
.text-brand {
  color: var(--kd-brand-700);
}
.link-brand {
  color: var(--kd-brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .125em;
}
.link-brand:hover,
.link-brand:focus-visible {
  color: var(--kd-brand-900);
}


/* ============================================================================
   7. Cabeçalho de página — .kd-page-header
   Sem card nem sombra. Estrutura esperada (macro page_header na fase 2):
     <header class="kd-page-header [has-tabs]">
       <ol class="kd-breadcrumb"><li><a>Contratos</a></li><li>CTR-00118</li></ol>
       <a class="kd-icon-btn kd-page-header__back" aria-label="Voltar">…</a>
       <div class="kd-page-header__main">
         <div class="kd-page-header__title">
           <h1>Contrato</h1><span class="kd-page-header__code">CTR-00118</span>
           <span class="kd-badge-status is-success">…</span>
         </div>
         <p class="kd-page-header__subtitle">Imobiliária Lagoinha · 42 contratos</p>
       </div>
       <div class="kd-page-header__actions">… 1 primário, até 2 secundários, menu ⋯</div>
     </header>
   ============================================================================ */
.kd-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 16px;
  min-height: 56px;
  padding: 24px 0 16px;
  margin-bottom: 24px;
  background: transparent;
  border-bottom: 1px solid var(--kd-surface-200);
  border-radius: 0;
  box-shadow: none;
}
/* Com abas, a régua passa a ser a das abas. */
.kd-page-header.has-tabs {
  padding-bottom: 8px;
  margin-bottom: 0;
  border-bottom: 0;
}
.kd-page-header.has-tabs + .kd-tabs {
  margin-bottom: 24px;
}

/* Trilha: caption ink-subtle, separador "/", último item ink-muted. */
.kd-breadcrumb {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .01em;
  color: var(--kd-ink-subtle);
}
.kd-breadcrumb > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.kd-breadcrumb > li + li::before {
  content: "/";
  color: var(--kd-ink-subtle);
}
.kd-breadcrumb > li:last-child {
  color: var(--kd-ink-muted);
}
.kd-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.kd-breadcrumb a:hover {
  color: var(--kd-ink);
  text-decoration: underline;
}

.kd-page-header__back {
  display: none;                                  /* só abaixo de 768px */
}
.kd-page-header__main {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kd-page-header__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* h1 22/28/600 em ink — vence o h1 de 32,5px do Steex por especificidade. */
.kd-page-header__title > h1,
.kd-page-header__title > .h1,
.kd-page-header > h1 {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--kd-ink);
}
.kd-page-header__subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--kd-ink-muted);
}
.kd-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 767.98px) {
  .kd-page-header {
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 16px;
  }
  .kd-breadcrumb {
    display: none;                                /* vira a seta de voltar */
  }
  .kd-page-header__back {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: -8px;
  }
  .kd-page-header__main {
    flex: 1 1 0;
  }
  /* Título em h2 (18/24), no máximo 2 linhas. */
  .kd-page-header__title > h1,
  .kd-page-header__title > .h1,
  .kd-page-header > h1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
  }
  /* Ações descem para baixo do título; o primário ocupa a largura toda. */
  .kd-page-header__actions {
    flex: 1 0 100%;
    margin-left: 0;
  }
  .kd-page-header__actions .btn-primary,
  .kd-page-header__actions .btn-ink {
    flex: 1 1 100%;
    width: 100%;
  }
}


/* ============================================================================
   8. Barra de filtros — .kd-filter-bar
   Primeira faixa do card da listagem (pode levar .card-header junto): 56px,
   surface-0, fio inferior surface-200, padding 12px 16px, gap 8px.
   Estrutura esperada (macro filter_bar na fase 2):
     <div class="card-header kd-filter-bar [is-open] [is-more-open]">
       <div class="kd-search"><i class="ph-magnifying-glass"></i><input class="form-control"></div>
       <button class="btn btn-outline-secondary kd-filter-bar__toggle">Filtros (2)</button>
       <div class="kd-filter-bar__filters">chips .kd-chip, selects, datas…</div>
       <div class="kd-filter-bar__meta"><button class="btn btn-ghost-kd btn-sm">Limpar</button><span>312 resultados · 2 filtros</span></div>
       <div class="kd-filter-bar__applied"><span class="kd-chip-applied">Vencidos <button class="kd-chip__remove">…</button></span></div>
       <div class="kd-filter-bar__more">painel "Mais filtros" (surface-50)</div>
     </div>
   ============================================================================ */
.kd-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  margin: 0;
  padding: 12px 16px;
  background-color: var(--kd-surface-0);
  color: var(--kd-ink);
  border-bottom: 1px solid var(--kd-surface-200);
}
.card > .kd-filter-bar:first-child {
  border-top-left-radius: calc(var(--kd-radius-2, .375rem) - 1px);
  border-top-right-radius: calc(var(--kd-radius-2, .375rem) - 1px);
}
/* Fixa junto ao cabeçalho da tabela (a tabela abaixo define
   --kd-ledger-sticky-top: 56px para o <th> parar sob a barra). */
.kd-filter-bar.is-sticky {
  position: sticky;
  top: var(--kd-ledger-sticky-top, 0);
  z-index: 3;
}
.kd-filter-bar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Selects e inputs compactos no meio da barra (altura vem da camada base). */
.kd-filter-bar .form-select,
.kd-filter-bar .form-control {
  flex: 0 1 auto;
  width: auto;
}
.kd-filter-bar__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .01em;
  color: var(--kd-ink-muted);
  white-space: nowrap;
}
.kd-filter-bar__meta strong {
  font-weight: 500;
  color: var(--kd-ink);
  font-variant-numeric: tabular-nums;
}
/* Filtros aplicados: segunda linha de chips removíveis. */
.kd-filter-bar__applied {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kd-filter-bar__applied:empty {
  display: none;
}
/* Painel "Mais filtros": surface-50, sangra até as bordas do card; controles
   sobre surface-100/50 usam borda line-strong (line não chega a 3:1 ali). */
.kd-filter-bar__more {
  flex: 1 0 100%;
  display: none;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 4px -16px -12px;
  padding: 12px 16px;
  background-color: var(--kd-surface-50);
  border-top: 1px solid var(--kd-surface-200);
}
.kd-filter-bar.is-more-open .kd-filter-bar__more {
  display: flex;
}
.kd-filter-bar__more .form-control,
.kd-filter-bar__more .form-select {
  border-color: var(--kd-line-strong);
}
.kd-filter-bar__toggle {
  display: none;                                  /* só abaixo de 768px */
}

/* Busca de 280px com ícone à esquerda em ink-subtle. */
.kd-search {
  position: relative;
  flex: 0 1 280px;
  width: 280px;
  max-width: 100%;
}
.kd-search > [class^="ph-"],
.kd-search > [class*=" ph-"],
.kd-search > svg {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--kd-ink-subtle);
  pointer-events: none;
}
.kd-filter-bar .kd-search > .form-control,
.kd-search > .form-control {
  width: 100%;
  padding-left: 32px;
}

/* Chip de filtro (status clicável): 28px, radius-1, borda line; ativo = ink. */
.kd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-radius-1, .25rem);
  background-color: var(--kd-surface-0);
  color: var(--kd-ink);
  font: inherit;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out;
}
.kd-chip:hover {
  background-color: var(--kd-surface-100);
  border-color: var(--kd-line-strong);
  color: var(--kd-ink);
}
.kd-chip.is-active,
.kd-chip[aria-pressed="true"] {
  background-color: var(--kd-ink);
  border-color: var(--kd-ink);
  color: var(--kd-ink-inverse);
}
.kd-chip > [class^="ph-"],
.kd-chip > [class*=" ph-"],
.kd-chip > svg {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

/* Chip aplicado (removível): surface-100, sem borda, ph-x 14px. */
.kd-chip-applied {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px 0 10px;
  border: 1px solid transparent;
  border-radius: var(--kd-radius-1, .25rem);
  background-color: var(--kd-surface-100);
  color: var(--kd-ink);
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  white-space: nowrap;
}
.kd-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--kd-radius-1, .25rem);
  background-color: transparent;
  color: var(--kd-ink-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.kd-chip__remove:hover {
  background-color: var(--kd-surface-200);
  color: var(--kd-ink);
}

@media (max-width: 767.98px) {
  /* A busca fica visível; os filtros colapsam num botão "Filtros (n)" que abre
     o painel (.is-open, controlado pelo JS da fase 2; a versão bottom sheet é
     marcação nova). */
  .kd-filter-bar .kd-search {
    flex: 1 1 auto;
    width: auto;
  }
  .kd-filter-bar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  .kd-filter-bar__filters {
    display: none;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0 4px;
  }
  .kd-filter-bar.is-open .kd-filter-bar__filters {
    display: flex;
  }
  .kd-filter-bar__filters .form-select,
  .kd-filter-bar__filters .form-control,
  .kd-filter-bar .kd-filter-bar__filters .form-select,
  .kd-filter-bar .kd-filter-bar__filters .form-control {
    width: 100%;
    min-height: 44px;
  }
  .kd-filter-bar__filters .kd-chip {
    min-height: 36px;
  }
  .kd-filter-bar__meta {
    flex: 1 0 100%;
    justify-content: space-between;
    margin-left: 0;
  }
  .kd-filter-bar__more {
    margin: 4px -16px -12px;
  }
}


/* ============================================================================
   9. KPI — .kd-kpi (variante de card) e .kd-kpi-grid
   Rótulo 13/500 ink-muted, valor display 28/34/600 tabular em ink, variação
   13px com seta + texto, contexto em caption ink-subtle. Sem ícone em círculo
   colorido, sem fundo de marca, sem gradiente. No máximo um .is-brand por
   dashboard. Funcionário sem view_financial: .is-locked + "—" + ph-lock.
   ============================================================================ */
.kd-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  margin: 0;
  padding: 20px;
  background-color: var(--kd-surface-0);
  border: 1px solid var(--kd-surface-200);
  border-radius: var(--kd-radius-2, .375rem);
  box-shadow: none;
  color: var(--kd-ink);
}
.kd-kpi__label {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kd-ink-muted);
}
.kd-kpi__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.kd-kpi__value {
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--kd-ink);
}
.kd-kpi.is-brand .kd-kpi__value {
  color: var(--kd-brand-700);
}
.kd-kpi.is-locked .kd-kpi__value {
  color: var(--kd-ink-subtle);
}
.kd-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--kd-ink-muted);
}
.kd-kpi__delta.is-up {
  color: var(--kd-success);
}
.kd-kpi__delta.is-down {
  color: var(--kd-danger);
}
.kd-kpi__delta > [class^="ph-"],
.kd-kpi__delta > [class*=" ph-"],
.kd-kpi__delta > svg {
  width: 14px;
  height: 14px;
  font-size: 14px;
}
.kd-kpi__context {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .01em;
  color: var(--kd-ink-subtle);
}
.kd-kpi__locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--kd-ink-subtle);
}
/* Sparkline opcional: 32px, traço 2px em chart-2, sem eixo. */
.kd-kpi__spark {
  flex: 0 0 auto;
  width: 96px;
  height: 32px;
  color: var(--kd-chart-2);
}
.kd-kpi__spark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.kd-kpi__spark path,
.kd-kpi__spark polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1199.98px) {
  .kd-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .kd-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .kd-kpi {
    padding: 16px;
  }
}


/* ============================================================================
   10. Estado vazio — .kd-empty
   Centralizado onde o conteúdo apareceria (card ou tbody), 420px, ícone 32px
   em ink-subtle dentro de um círculo de 56px surface-100; h3, texto ink-muted,
   uma ação. Variantes: .is-filter (ph-funnel-x + "Limpar filtros"),
   .is-error (ícone danger + "Tentar novamente"), .is-page (padding 64px).
   ============================================================================ */
.kd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 24px;
  text-align: center;
  color: var(--kd-ink);
}
.kd-empty.is-page {
  padding: 64px 24px;
}
.kd-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: var(--kd-radius-full, 9999px);
  background-color: var(--kd-surface-100);
  color: var(--kd-ink-subtle);
  font-size: 32px;
  line-height: 1;
}
.kd-empty__icon > [class^="ph-"],
.kd-empty__icon > [class*=" ph-"],
.kd-empty__icon > svg {
  width: 32px;
  height: 32px;
  font-size: 32px;
}
.kd-empty.is-error .kd-empty__icon {
  color: var(--kd-danger);
}
.kd-empty__title,
.kd-empty h3 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--kd-ink);
}
.kd-empty__text,
.kd-empty p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--kd-ink-muted);
}
.kd-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}


/* ============================================================================
   11. Wizard — .kd-stepper e .kd-wizard-footer
   Stepper: barra de 56px no topo do card, nós de 24px (radius-full):
   concluído brand-600 + ph-check brand-fg; atual surface-0 + anel 2px brand-600
   + número brand-700; futuro surface-100 + ink-subtle; erro borda danger +
   ph-warning. Conectores 1px surface-200 (brand-300 quando concluídos).
   Estrutura esperada (macro stepper na fase 2):
     <div class="kd-stepper">
       <ol class="kd-stepper__steps">
         <li class="kd-stepper__step is-done"><a href="#p1"><span class="kd-stepper__node"><i class="ph-check"></i></span><span class="kd-stepper__label">Partes</span></a></li>
         <li class="kd-stepper__step is-current" aria-current="step"><span class="kd-stepper__node"></span><span class="kd-stepper__label">Imóvel <span class="kd-stepper__optional">(opcional)</span></span></li>
         <li class="kd-stepper__step is-future">…</li>
       </ol>
       <div class="kd-stepper__compact" style="--kd-progress: 33%">
         <h4 class="kd-stepper__compact-title">Etapa 2 de 6 · Dados do locatário</h4>
         <div class="kd-stepper__progress"><div class="kd-stepper__progress-bar"></div></div>
       </div>
     </div>
   Um <span class="kd-stepper__node"> vazio recebe o número do passo por contador.
   ============================================================================ */
.kd-stepper {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 16px;
  background-color: var(--kd-surface-0);
  border-bottom: 1px solid var(--kd-surface-200);
}
.kd-stepper__steps {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kd-step;
}
.kd-stepper__step {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  gap: 8px;
  min-width: 0;
  color: var(--kd-ink-muted);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  counter-increment: kd-step;
}
.kd-stepper__step:last-child {
  flex: 0 0 auto;
}
.kd-stepper__step > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--kd-radius-1, .25rem);
}
/* Conector: só os passos concluídos pintam em brand-300. */
.kd-stepper__step:not(:last-child)::after {
  content: "";
  flex: 1 1 16px;
  min-width: 16px;
  height: 1px;
  margin: 0 12px;
  background-color: var(--kd-surface-200);
}
.kd-stepper__step.is-done:not(:last-child)::after {
  background-color: var(--kd-brand-300);
}
.kd-stepper__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: var(--kd-radius-full, 9999px);
  background-color: var(--kd-surface-100);       /* futuro */
  color: var(--kd-ink-subtle);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kd-stepper__node:empty::before {
  content: counter(kd-step);
}
.kd-stepper__node > [class^="ph-"],
.kd-stepper__node > [class*=" ph-"],
.kd-stepper__node > svg {
  width: 14px;
  height: 14px;
  font-size: 14px;
}
.kd-stepper__step.is-done .kd-stepper__node {
  background-color: var(--kd-brand-600);
  border-color: var(--kd-brand-600);
  color: var(--kd-brand-fg);
}
.kd-stepper__step.is-current .kd-stepper__node {
  background-color: var(--kd-surface-0);
  border: 2px solid var(--kd-brand-600);
  color: var(--kd-brand-700);
}
.kd-stepper__step.is-error .kd-stepper__node {
  background-color: var(--kd-surface-0);
  border: 2px solid var(--kd-danger);
  color: var(--kd-danger);
}
.kd-stepper__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kd-stepper__step.is-current,
.kd-stepper__step.is-current .kd-stepper__label {
  color: var(--kd-ink);
}
.kd-stepper__step.is-error .kd-stepper__label {
  color: var(--kd-danger);
}
.kd-stepper__optional {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--kd-ink-subtle);
}
/* Clicável só para voltar a passos concluídos. */
.kd-stepper__step.is-done > a:hover .kd-stepper__label {
  color: var(--kd-ink);
  text-decoration: underline;
}

/* Barra compacta do celular ("Etapa 2 de 6 · …" + progresso de 4px). */
.kd-stepper__compact {
  display: none;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.kd-stepper__compact-title {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--kd-ink);
}
.kd-stepper__progress {
  height: 4px;
  overflow: hidden;
  background-color: var(--kd-surface-200);
}
.kd-stepper__progress-bar {
  width: var(--kd-progress, 0%);
  height: 100%;
  background-color: var(--kd-brand-600);
  transition: width .2s ease-out;
}
@media (max-width: 767.98px) {
  .kd-stepper {
    align-items: stretch;
    padding: 12px 16px;
  }
  .kd-stepper__steps {
    display: none;
  }
  .kd-stepper__compact {
    display: flex;
  }
}

/* Rodapé fixo do wizard: 56px, surface-0, fio superior, sombra invertida
   (shadow-sticky de rodapé = 0 -1px 0 0 surface-200). "Voltar" ghost à
   esquerda, "Salvar rascunho" secundário e "Continuar" primário à direita. */
.kd-wizard-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 16px;
  background-color: var(--kd-surface-0);
  border-top: 1px solid var(--kd-surface-200);
  box-shadow: 0 -1px 0 0 var(--kd-surface-200);
}
.card > .kd-wizard-footer:last-child {
  border-bottom-left-radius: calc(var(--kd-radius-2, .375rem) - 1px);
  border-bottom-right-radius: calc(var(--kd-radius-2, .375rem) - 1px);
}
.kd-wizard-footer__status {
  margin-left: 8px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .01em;
  color: var(--kd-ink-subtle);
}
.kd-wizard-footer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
@media (max-width: 767.98px) {
  .kd-wizard-footer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .kd-wizard-footer .btn {
    min-height: 44px;
  }
  .kd-wizard-footer__status {
    display: none;
  }
  .kd-wizard-footer__actions {
    flex: 1 1 auto;
  }
  .kd-wizard-footer__actions .btn {
    flex: 1 1 0;
  }
  /* Com a barra inferior dos portais, o rodapé sobe para não ficar coberto. */
  body.has-bottom-nav .kd-wizard-footer {
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
}


/* ============================================================================
   12. Abas — .kd-tabs (ajustes sobre .nav.nav-underline do Bootstrap 5.3)
   40px, 14/500 ink-muted, hover ink, ativa ink + 2px brand-600 (brand-500 no
   escuro) encostada na régua de 1px surface-200. A régua é um box-shadow
   interno (não uma borda) para o sublinhado da aba poder cobri-la sem a
   margem negativa que criaria rolagem vertical no modo rolável do celular.
   O painel de conteúdo não ganha card extra; o hash vai para a URL (JS).
   ============================================================================ */
.kd-tabs {
  --tb-nav-link-padding-x: 0;
  --tb-nav-link-padding-y: 0;
  --tb-nav-link-font-size: .875rem;
  --tb-nav-link-font-weight: 500;
  --tb-nav-link-color: var(--kd-ink-muted);
  --tb-nav-link-hover-color: var(--kd-ink);
  --tb-nav-link-disabled-color: var(--kd-ink-subtle);
  --tb-nav-underline-gap: 1.5rem;
  --tb-nav-underline-border-width: 2px;
  --tb-nav-underline-link-active-color: var(--kd-ink);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--tb-nav-underline-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 0 var(--kd-surface-200);
}
.kd-tabs .nav-item {
  flex: 0 0 auto;
}
.kd-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--kd-ink-muted);
  font-size: .875rem;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.kd-tabs .nav-link:hover,
.kd-tabs .nav-link:focus {
  color: var(--kd-ink);
  border-bottom-color: transparent;
}
.kd-tabs .nav-link.active,
.kd-tabs .show > .nav-link {
  color: var(--kd-ink);
  font-weight: 500;
  background-color: transparent;
  border-bottom-color: var(--kd-brand-600);
}
/* No escuro o sublinhado usa o laranja do logo (brand-600 fica a 3,37:1). */
html[data-bs-theme="dark"] .kd-tabs .nav-link.active,
html[data-bs-theme="dark"] .kd-tabs .show > .nav-link {
  border-bottom-color: var(--kd-brand-500);
}
.kd-tabs .nav-link.disabled,
.kd-tabs .nav-link:disabled {
  color: var(--kd-ink-subtle);
}
/* Contador neutro na aba (surface-100 + ink-muted). */
.kd-tabs__count,
.kd-tabs .nav-link > .badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: var(--kd-radius-1, .25rem);
  background-color: var(--kd-surface-100);
  color: var(--kd-ink-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
  /* Rolagem horizontal sem barra; a aba ativa é rolada ao centro pelo JS. */
  .kd-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .kd-tabs::-webkit-scrollbar {
    display: none;
  }
  .kd-tabs .nav-item,
  .kd-tabs > .nav-link {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
}


/* ============================================================================
   13. Paginação — .kd-pagination-footer
   Rodapé do card em surface-50 com fio superior, 56px: "Mostrando 1–25 de 312"
   + seletor 25/50/100 (32px) à esquerda; itens 32×32 radius-1 à direita,
   página atual surface-100 + ink 600 + borda line — a marca não entra aqui.
   No celular só anterior/próximo (primeiro e último .page-item) e "3 / 13".
   ============================================================================ */
.kd-pagination-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 56px;
  padding: 8px 16px;
  background-color: var(--kd-surface-50);
  border-top: 1px solid var(--kd-surface-200);
  color: var(--kd-ink-muted);
  font-size: 13px;
  line-height: 18px;
}
.card > .kd-pagination-footer:last-child {
  border-bottom-left-radius: calc(var(--kd-radius-2, .375rem) - 1px);
  border-bottom-right-radius: calc(var(--kd-radius-2, .375rem) - 1px);
}
.kd-pagination-footer__info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.kd-pagination-footer__info strong {
  font-weight: 500;
  color: var(--kd-ink);
}
/* Seletor de tamanho compacto (32px). */
.kd-pagination-footer .form-select {
  width: auto;
  min-height: 32px;
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 13px;
  line-height: 18px;
}
.kd-pagination-footer .pagination {
  --tb-pagination-padding-x: 0;
  --tb-pagination-padding-y: 0;
  --tb-pagination-font-size: 13px;
  --tb-pagination-color: var(--kd-ink-muted);
  --tb-pagination-bg: transparent;
  --tb-pagination-border-width: 1px;
  --tb-pagination-border-color: transparent;
  --tb-pagination-border-radius: var(--kd-radius-1, .25rem);
  --tb-pagination-hover-color: var(--kd-ink);
  --tb-pagination-hover-bg: var(--kd-surface-100);
  --tb-pagination-hover-border-color: transparent;
  --tb-pagination-focus-color: var(--kd-ink);
  --tb-pagination-focus-bg: var(--kd-surface-100);
  --tb-pagination-focus-box-shadow: var(--kd-shadow-focus);
  --tb-pagination-active-color: var(--kd-ink);
  --tb-pagination-active-bg: var(--kd-surface-100);
  --tb-pagination-active-border-color: var(--kd-line);
  --tb-pagination-disabled-color: var(--kd-ink-subtle);
  --tb-pagination-disabled-bg: transparent;
  --tb-pagination-disabled-border-color: transparent;
  gap: 4px;
  margin: 0;
}
.kd-pagination-footer .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  margin: 0;
  padding: 0 8px;
  border-radius: var(--kd-radius-1, .25rem);
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.kd-pagination-footer .page-item.active .page-link {
  font-weight: 600;
}
.kd-pagination-footer .page-link > [class^="ph-"],
.kd-pagination-footer .page-link > [class*=" ph-"],
.kd-pagination-footer .page-link > svg {
  width: 14px;
  height: 14px;
  font-size: 14px;
}
.kd-pagination-footer__compact {
  display: none;
  font-variant-numeric: tabular-nums;
  color: var(--kd-ink);
}
@media (max-width: 767.98px) {
  .kd-pagination-footer__info {
    display: none;
  }
  .kd-pagination-footer__compact {
    display: inline-flex;
    align-items: center;
  }
  .kd-pagination-footer .page-item:not(:first-child):not(:last-child) {
    display: none;
  }
  .kd-pagination-footer .page-item .page-link {
    min-width: 44px;
    height: 44px;
  }
}


/* ============================================================================
   14. SweetAlert2 — skins .kd-toast e .kd-modal
   Ativadas por customClass ({ popup: 'kd-toast' } / { popup: 'kd-modal' }) ou
   por um Swal.mixin global na fase 2. O sweetalert2.min.css (v11) escreve quase
   tudo com :where(), de especificidade zero, e o app.css restyla popup/título/
   ícones com (0,1,0)–(0,3,0): os seletores abaixo vencem por especificidade.
   Toast: surface-0, fio surface-200, radius-2, shadow-1, sem barra colorida —
   a semântica vem do ícone (success/warning/danger/info) e do título 14/600.
   ============================================================================ */
.swal2-popup.kd-toast {
  width: 360px;
  max-width: 100%;
  padding: 12px 16px;
  background: var(--kd-surface-0);
  color: var(--kd-ink);
  border: 1px solid var(--kd-surface-200);
  border-radius: var(--kd-radius-2, .375rem);
  box-shadow: var(--kd-shadow-1);
  font-size: 14px;
  line-height: 20px;
}
.swal2-popup.kd-toast .swal2-title {
  margin: 0 8px 0 0;
  padding: 0;
  color: var(--kd-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: left;
}
.swal2-popup.kd-toast .swal2-html-container {
  margin: 2px 8px 0 0;
  padding: 0;
  color: var(--kd-ink-muted);
  font-size: 13px;
  line-height: 18px;
  text-align: left;
}
/* O ícone do SweetAlert2 é desenhado em em; font-size 10px → 2em = 20px. */
.swal2-popup.kd-toast .swal2-icon {
  margin: 0 8px 0 0;
  font-size: 10px;
  border-width: .2em;
}
.swal2-popup.kd-toast .swal2-close {
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: var(--kd-radius-1, .25rem);
  background: transparent;
  color: var(--kd-ink-muted);
  font-size: 20px;
  line-height: 1;
}
.swal2-popup.kd-toast .swal2-close:hover {
  background: var(--kd-surface-100);
  color: var(--kd-ink);
}
/* Ação opcional ("Ver cobrança", "Desfazer") como link brand-700. */
.swal2-popup.kd-toast .swal2-actions {
  justify-content: flex-start;
  margin: 8px 0 0;
  padding: 0;
}
.swal2-popup.kd-toast .swal2-styled,
.swal2-popup.kd-toast .swal2-styled.swal2-confirm,
.swal2-popup.kd-toast .swal2-styled.swal2-cancel {
  margin: 0 8px 0 0;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--kd-radius-1, .25rem);
  background: transparent;
  background-image: none;
  color: var(--kd-brand-700);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: underline;
  box-shadow: none;
}
.swal2-popup.kd-toast .swal2-styled:hover {
  background-image: none;
  background-color: var(--kd-surface-100);
  color: var(--kd-brand-900);
}
/* Barra do temporizador: neutra e fina (sem faixa colorida). */
.swal2-popup.kd-toast .swal2-timer-progress-bar-container {
  border-bottom-left-radius: var(--kd-radius-2, .375rem);
  border-bottom-right-radius: var(--kd-radius-2, .375rem);
}
.swal2-popup.kd-toast .swal2-timer-progress-bar {
  height: 2px;
  background: var(--kd-surface-200);
}

/* Modal de confirmação: 480px (640 com .is-wide), surface-0, fio surface-200,
   radius-2, shadow-2; título h3 16/600 e texto à esquerda; ações à direita com
   "Cancelar" (secundário) à esquerda do primário/destrutivo. */
.swal2-popup.kd-modal {
  width: 480px;
  max-width: 100%;
  padding: 24px;
  background: var(--kd-surface-0);
  color: var(--kd-ink);
  border: 1px solid var(--kd-surface-200);
  border-radius: var(--kd-radius-2, .375rem);
  box-shadow: var(--kd-shadow-2);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}
.swal2-popup.kd-modal.is-wide {
  width: 640px;
}
.swal2-popup.kd-modal .swal2-icon {
  margin: 0 0 16px;
  font-size: 8px;                                 /* 5em → 40px, alinhado à esquerda */
}
.swal2-popup.kd-modal .swal2-title {
  margin: 0 0 8px;
  padding: 0;
  color: var(--kd-ink);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  text-align: left;
}
.swal2-popup.kd-modal .swal2-html-container {
  margin: 0;
  padding: 0;
  color: var(--kd-ink-muted);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}
.swal2-popup.kd-modal .swal2-footer {
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--kd-surface-200);
  color: var(--kd-ink-muted);
  font-size: 13px;
  text-align: left;
}
/* row-reverse: o SweetAlert2 renderiza confirm → deny → cancel; invertendo a
   direção o primário fica à direita e "Cancelar" à esquerda (não combinar com
   reverseButtons: true). */
.swal2-popup.kd-modal .swal2-actions {
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin: 24px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--kd-surface-200);
}
.swal2-popup.kd-modal .swal2-styled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--kd-radius-1, .25rem);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  background-image: none;
  box-shadow: none;
}
.swal2-popup.kd-modal .swal2-styled:hover,
.swal2-popup.kd-modal .swal2-styled:active {
  background-image: none;                         /* tira o escurecimento genérico do lib */
}
/* Primário brand-600. !important: confirmButtonColor/cancelButtonColor viram
   style inline no botão (10 valores literais nos templates vivos) e só um
   !important vence estilo inline. */
.swal2-popup.kd-modal .swal2-styled.swal2-confirm {
  background-color: var(--kd-brand-600) !important;
  border-color: var(--kd-brand-600);
  color: var(--kd-brand-fg);
}
.swal2-popup.kd-modal .swal2-styled.swal2-confirm:hover {
  background-color: #af4300 !important;          /* shade 10% de brand-600 (5,79:1) */
  border-color: #af4300;
}
.swal2-popup.kd-modal .swal2-styled.swal2-confirm:active {
  background-color: #9b3b00 !important;          /* shade 20% de brand-600 (6,96:1) */
  border-color: #9b3b00;
}
/* Secundário ("Cancelar"): surface-0 + borda line + ink. */
.swal2-popup.kd-modal .swal2-styled.swal2-cancel {
  background-color: var(--kd-surface-0) !important;
  border-color: var(--kd-line);
  color: var(--kd-ink);
}
.swal2-popup.kd-modal .swal2-styled.swal2-cancel:hover,
.swal2-popup.kd-modal .swal2-styled.swal2-cancel:active {
  background-color: var(--kd-surface-100) !important;
  border-color: var(--kd-line-strong);
}
/* Destrutivo (.is-destructive no popup, ou botão deny): danger + ink-inverse,
   com o verbo e o objeto no rótulo ("Excluir o contrato CTR-00118"). */
.swal2-popup.kd-modal.is-destructive .swal2-styled.swal2-confirm,
.swal2-popup.kd-modal .swal2-styled.swal2-deny {
  background-color: var(--kd-danger) !important;
  border-color: var(--kd-danger);
  color: var(--kd-ink-inverse);
}
/* hover/pressionado: fallback danger-fg (8,54:1 com ink-inverse no claro) para
   navegador sem color-mix; o @supports refina para danger 88% + ink.
   !important: cor inline do lib (confirmButtonColor/denyButtonColor). */
.swal2-popup.kd-modal.is-destructive .swal2-styled.swal2-confirm:hover,
.swal2-popup.kd-modal.is-destructive .swal2-styled.swal2-confirm:active,
.swal2-popup.kd-modal .swal2-styled.swal2-deny:hover,
.swal2-popup.kd-modal .swal2-styled.swal2-deny:active {
  background-color: var(--kd-danger-fg) !important;
  border-color: var(--kd-danger-fg);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .swal2-popup.kd-modal.is-destructive .swal2-styled.swal2-confirm:hover,
  .swal2-popup.kd-modal.is-destructive .swal2-styled.swal2-confirm:active,
  .swal2-popup.kd-modal .swal2-styled.swal2-deny:hover,
  .swal2-popup.kd-modal .swal2-styled.swal2-deny:active {
    background-color: color-mix(in srgb, var(--kd-danger) 88%, var(--kd-ink)) !important;
    border-color: color-mix(in srgb, var(--kd-danger) 88%, var(--kd-ink));
  }
}
.swal2-popup.kd-modal .swal2-styled:focus,
.swal2-popup.kd-modal .swal2-styled:focus-visible,
.swal2-popup.kd-toast .swal2-styled:focus-visible,
.swal2-popup.kd-toast .swal2-close:focus-visible {
  outline: none;
  box-shadow: var(--kd-shadow-focus);
}
/* Campo dentro do modal (Swal input/select/textarea). */
.swal2-popup.kd-modal .swal2-input,
.swal2-popup.kd-modal .swal2-select,
.swal2-popup.kd-modal .swal2-textarea {
  width: 100%;
  margin: 16px 0 0;
  padding: 0 12px;
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-radius-1, .25rem);
  background: var(--kd-surface-0);
  color: var(--kd-ink);
  font-size: 14px;
  box-shadow: none;
}
.swal2-popup.kd-modal .swal2-input {
  height: 36px;
}
.swal2-popup.kd-modal .swal2-textarea {
  padding: 8px 12px;
}
.swal2-popup.kd-modal .swal2-input:focus,
.swal2-popup.kd-modal .swal2-select:focus,
.swal2-popup.kd-modal .swal2-textarea:focus {
  border-color: var(--kd-focus-ring);
  outline: none;
  box-shadow: var(--kd-shadow-focus);
}
.swal2-popup.kd-modal .swal2-input::placeholder,
.swal2-popup.kd-modal .swal2-textarea::placeholder {
  color: var(--kd-ink-subtle);
}
/* Mensagem de validação dentro do modal (nunca toast). */
.swal2-popup.kd-modal .swal2-validation-message {
  justify-content: flex-start;
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: var(--kd-radius-1, .25rem);
  background: var(--kd-danger-bg);
  color: var(--kd-danger-fg);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.swal2-popup.kd-modal .swal2-validation-message::before {
  margin: 0 8px 0 0;
  background-color: var(--kd-danger);
  color: var(--kd-ink-inverse);
}
/* Backdrop: overlay a 56% (64% no escuro) via rgba() com o triplet
   --kd-overlay-rgb — como .vertical-overlay, sem depender de color-mix.
   :has() isola a regra — num navegador sem :has só esta declaração cai e o
   backdrop do lib permanece. Alternativa sem :has: customClass.container =
   'kd-swal-container'. */
.swal2-container.kd-swal-container.swal2-backdrop-show {
  background: rgba(var(--kd-overlay-rgb), 0.56);
}
.swal2-container.swal2-backdrop-show:has(> .swal2-popup.kd-modal) {
  background: rgba(var(--kd-overlay-rgb), 0.56);
}
html[data-bs-theme="dark"] .swal2-container.kd-swal-container.swal2-backdrop-show {
  background: rgba(var(--kd-overlay-rgb), 0.64);
}
html[data-bs-theme="dark"] .swal2-container.swal2-backdrop-show:has(> .swal2-popup.kd-modal) {
  background: rgba(var(--kd-overlay-rgb), 0.64);
}
/* Abaixo de 576px o modal vira bottom sheet: largura total, cantos superiores
   radius-3, botões de 44px em largura igual. */
@media (max-width: 575.98px) {
  .swal2-container:has(> .swal2-popup.kd-modal) {
    padding: 0;
  }
  .swal2-container.swal2-center > .swal2-popup.kd-modal {
    grid-row: 3;
    align-self: end;
  }
  .swal2-popup.kd-modal {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    border-bottom: 0;
    border-radius: var(--kd-radius-3, .5rem) var(--kd-radius-3, .5rem) 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .swal2-popup.kd-modal .swal2-styled {
    flex: 1 1 0;
    min-height: 44px;
  }
}


/* ============================================================================
   15. Portais — .kd-bottom-nav, body.has-bottom-nav, html.kd-portal
   Barra inferior fixa de 56px (+ safe-area) em sidebar-bg com quatro destinos:
   ícone 24px + rótulo 12px; ativo = ícone brand-500 + rótulo branco; inativos
   em sidebar-fg-muted. Só aparece em html.kd-portal abaixo de 768px (acima, o
   portal usa a sidebar do Steex).
   ============================================================================ */
.kd-bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1005;                                  /* acima de sidebar (1003) e topbar (1002), abaixo do Swal (1060) */
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(56px + env(safe-area-inset-bottom));
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  background-color: var(--kd-sidebar-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.kd-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 56px;
  padding: 6px 4px;
  color: var(--kd-sidebar-fg-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.kd-bottom-nav__label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kd-bottom-nav__item > [class^="ph-"],
.kd-bottom-nav__item > [class*=" ph-"],
.kd-bottom-nav__item > svg {
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
}
.kd-bottom-nav__item:hover {
  color: var(--kd-sidebar-fg);
}
.kd-bottom-nav__item.is-active,
.kd-bottom-nav__item[aria-current="page"] {
  color: var(--kd-sidebar-active-fg);
}
.kd-bottom-nav__item.is-active > [class^="ph-"],
.kd-bottom-nav__item.is-active > [class*=" ph-"],
.kd-bottom-nav__item.is-active > svg,
.kd-bottom-nav__item[aria-current="page"] > [class^="ph-"],
.kd-bottom-nav__item[aria-current="page"] > [class*=" ph-"],
.kd-bottom-nav__item[aria-current="page"] > svg {
  color: var(--kd-brand-500);                     /* único laranja puro permitido: sobre grafite */
}
@media (max-width: 767.98px) {
  html.kd-portal .kd-bottom-nav {
    display: grid;
  }
  /* Reserva o espaço da barra (56px + 16px de respiro); a classe só é posta
     pelos templates que renderizam a barra. */
  body.has-bottom-nav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* Portais (html.kd-portal nos 15 templates de tenant/ e owner/): base 16/24
   (evita o zoom automático do iOS em inputs), controles e botões de 48px,
   coluna centrada de 1120px a partir de 992px. */
html.kd-portal body {
  font-size: 16px;
  line-height: 24px;
}
html.kd-portal .btn {
  min-height: 48px;
  padding-top: 11px;                              /* 11 + 24 + 11 + 2 de borda = 48 */
  padding-bottom: 11px;
  font-size: 16px;
  line-height: 24px;
}
html.kd-portal .form-control,
html.kd-portal .form-select {
  min-height: 48px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 16px;
  line-height: 24px;
}
html.kd-portal .kd-icon-btn,
html.kd-portal .kd-icon-btn.is-sm,
html.kd-portal .table-ledger .kd-icon-btn {
  width: 48px;
  height: 48px;
}
html.kd-portal .kd-chip,
html.kd-portal .kd-chip-applied {
  min-height: 44px;                               /* alvo de toque nos portais (era 36px) */
}
html.kd-portal .kd-empty .btn {
  min-width: 200px;
}
/* Botões só de ícone (sino do topbar, "voltar ao topo") e ✓/× das notificações: com o min-height
   de 48px acima, o .btn-icon de largura fixa virava uma elipse 42×48 e o ✓/× (p-0) um retângulo
   26×48. Alvos quadrados; o ✓/× empilha para não estreitar o texto do aviso no celular. */
html.kd-portal .btn-icon {
  width: 48px;
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
}
html.kd-portal .notif-actions {
  flex-direction: column;
}
html.kd-portal .notif-mark-read,
html.kd-portal .notif-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
}
/* Lista do sino com a barra inferior (celular): desconta os 56px dela, senão o rodapé "Mostrar mais"
   fica por baixo (a barra tem z-index acima do menu). !important vence o style inline do topbar.html.
   @supports obrigatório: com env() a declaração não é descartada no parse; sem dvh/min() ela viraria
   max-height: none e, com !important, deixaria a lista sem limite. Sem suporte vale o inline. */
@media (max-width: 767.98px) {
  @supports (max-height: min(1px, 100dvh)) {
    html.kd-portal body.has-bottom-nav #notif-list-container {
      max-height: min(300px, max(120px, calc(100dvh - 306px - env(safe-area-inset-bottom)))) !important;
    }
  }
}
@media (min-width: 992px) {
  html.kd-portal .page-content > .container-fluid,
  html.kd-portal .kd-portal-container {
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
  }
}


/* ============================================================================
   16. Toque — pointer: coarse (tablets e celulares)
   Componentes kd-* e linhas do razão sobem para 44px por media query, não por
   template. Os seletores compostos repetem os que fixaram 32px acima (mesma
   especificidade, mais tarde na cascata → vencem); os portais (48px, seção 15)
   continuam vencendo por html.kd-portal.
   ============================================================================ */
@media (pointer: coarse) {
  /* Só componentes kd-*: .btn/.form-control/.form-select genéricos ficam na
     geometria do Steex nesta fase — o .btn-icon tem largura fixa (≈38px; ≈31px
     em .btn-sm) e viraria um retângulo 31×44 nos 213 botões de tabela, os -sm
     perderiam o compacto e .input-group-text / .choices__inner não
     acompanhariam o vizinho de 44px. Os 44px de toque entram com os kd-* na
     fase 2. */
  .kd-pagination-footer .form-select {
    min-height: 44px;
  }
  /* height funciona como mínimo em linhas de tabela; vale também para o modo denso. */
  .table-ledger > tbody > tr,
  .table-ledger.is-dense > tbody > tr,
  .table-ledger.table-sm > tbody > tr {
    height: 44px;
  }
  .kd-icon-btn,
  .kd-icon-btn.is-sm,
  .table-ledger .kd-icon-btn,
  .table-ledger .kd-actions .kd-icon-btn,
  .kd-page-header__back {
    width: 44px;
    height: 44px;
  }
  .kd-pagination-footer .page-item .page-link {
    min-width: 44px;
    height: 44px;
  }
  .kd-chip,
  .kd-chip-applied {
    min-height: 36px;
  }
  /* Ações de linha sempre visíveis em toque (não há hover para revelá-las). */
  .table-ledger .kd-actions .kd-icon-btn {
    opacity: 1;
    visibility: visible;
  }
}


/* ============================================================================
   17. Movimento reduzido
   !important justificado: o seletor universal tem especificidade zero e
   perderia para qualquer transition/animation declarada pelo Bootstrap, pelo
   Steex, pelos plugins (SweetAlert2, Choices.js, flatpickr, Dropzone) e pelos
   <style> de página — alguns deles com !important. O custom.css legado tem a
   mesma regra (:503-510); esta a repete para a camada ficar autossuficiente.
   animation-iteration-count: 1 evita que spinners "infinitos" com duração de
   .01ms virem cintilação.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================================
   kd-theme — parte 03: COMPATIBILIDADE E RETEMA DO LEGADO
   Design system "Prumo" (KD Imóveis) aplicado como camada de override, sem build.
   ---------------------------------------------------------------------------------------------
   Carregada depois de bootstrap/app/custom.css e dos <style> de página (que ficam em
   {% block extra_css %}, ANTES dos links de CSS). Por isso quase tudo aqui vence só por ordem
   de cascata, com o MESMO seletor do legado. Os poucos !important estão comentados um a um:
   só onde a regra legada, um utilitário do Bootstrap ou um style inline usa !important.
   Fonte dos achados: scratchpad/kd-theme/inventory-kd.{json,md} (2026-10-18).
   Seções: A aliases · B classes Velzon ausentes · C retema do legado · D modo escuro ·
           E plugins (SweetAlert2, Choices.js, flatpickr, Dropzone, SimpleBar).
   Geometria do Steex (header 70px, sidebar 250px, contêineres) NÃO é alterada nesta fase.
   ============================================================================================= */

/* =============================================================================================
   A. ALIASES PARA VARIÁVEIS QUE OS TEMPLATES USAM MAS NUNCA EXISTIRAM
   O Bootstrap do Steex é compilado com prefixo --tb-; 15 nomes --bs-* e --vz-* (59 usos) hoje
   resolvem para "nada" (fundo transparente, borda currentColor, número branco invisível no
   wizard de imóvel e no passo do Asaas). Definimos a família inteira dos dois prefixos para
   que qualquer template novo copiado do Bootstrap/Velzon também funcione.
   Só os tripletes RGB precisam de literal por tema; o resto aponta para --kd-*, que já troca
   de valor sob [data-bs-theme=dark].
   ============================================================================================= */
/* A.1  --bs-* e --vz-* → tokens (tema claro) */
:root,
[data-bs-theme=light] {
    /* --bs-* */
    --bs-primary: var(--kd-brand-600);
    --bs-primary-rgb: 194, 74, 0;
    --bs-primary-bg-subtle: var(--kd-brand-50);
    --bs-primary-text-emphasis: var(--kd-brand-700);
    --bs-primary-border-subtle: var(--kd-brand-300);
    --bs-secondary: var(--kd-line-strong);
    --bs-secondary-rgb: 90, 101, 111;
    --bs-secondary-bg-subtle: var(--kd-surface-100);
    --bs-secondary-text-emphasis: var(--kd-ink-muted);
    --bs-secondary-border-subtle: var(--kd-surface-200);
    --bs-success: var(--kd-success);
    --bs-success-rgb: 26, 122, 75;
    --bs-success-bg-subtle: var(--kd-success-bg);
    --bs-success-text-emphasis: var(--kd-success-fg);
    --bs-success-border-subtle: var(--kd-success-bg);
    --bs-info: var(--kd-info);
    --bs-info-rgb: 40, 98, 184;
    --bs-info-bg-subtle: var(--kd-info-bg);
    --bs-info-text-emphasis: var(--kd-info-fg);
    --bs-info-border-subtle: var(--kd-info-bg);
    --bs-warning: var(--kd-warning);
    --bs-warning-rgb: 107, 76, 0;
    --bs-warning-bg-subtle: var(--kd-warning-bg);
    --bs-warning-text-emphasis: var(--kd-warning-fg);
    --bs-warning-border-subtle: var(--kd-warning-bg);
    --bs-danger: var(--kd-danger);
    --bs-danger-rgb: 195, 40, 61;
    --bs-danger-bg-subtle: var(--kd-danger-bg);
    --bs-danger-text-emphasis: var(--kd-danger-fg);
    --bs-danger-border-subtle: var(--kd-danger-bg);
    --bs-light: var(--kd-surface-100);
    --bs-light-rgb: 236, 239, 243;
    --bs-light-bg-subtle: var(--kd-surface-50);
    --bs-light-text-emphasis: var(--kd-ink-muted);
    --bs-light-border-subtle: var(--kd-surface-200);
    --bs-dark: var(--kd-ink);
    --bs-dark-rgb: 27, 32, 38;
    --bs-dark-bg-subtle: var(--kd-surface-100);
    --bs-dark-text-emphasis: var(--kd-ink);
    --bs-dark-border-subtle: var(--kd-line);
    --bs-body-bg: var(--kd-surface-50);
    --bs-body-color: var(--kd-ink);
    --bs-emphasis-color: var(--kd-ink);
    --bs-heading-color: var(--kd-ink);
    --bs-secondary-color: var(--kd-ink-muted);
    --bs-tertiary-color: var(--kd-ink-subtle);
    --bs-secondary-bg: var(--kd-surface-0);
    --bs-tertiary-bg: var(--kd-surface-100);
    --bs-card-bg: var(--kd-surface-0);
    --bs-card-cap-bg: transparent;
    --bs-card-border-color: var(--kd-surface-200);
    --bs-border-color: var(--kd-surface-200);
    --bs-border-color-translucent: var(--kd-surface-200);
    --bs-border-width: 1px;
    --bs-border-radius: var(--kd-radius-1);
    --bs-border-radius-sm: var(--kd-radius-1);
    --bs-border-radius-lg: var(--kd-radius-2);
    --bs-border-radius-xl: var(--kd-radius-3);
    --bs-link-color: var(--kd-brand-700);
    --bs-link-hover-color: var(--kd-brand-900);
    --bs-text-muted: var(--kd-ink-muted);
    --bs-font-sans-serif: var(--tb-font-sans-serif);
    --bs-font-monospace: var(--tb-font-monospace);
    --bs-body-font-family: var(--tb-body-font-family);
    --bs-body-font-size: var(--tb-body-font-size);
    --bs-box-shadow: var(--kd-shadow-1);
    --bs-box-shadow-sm: var(--kd-shadow-1);
    --bs-box-shadow-lg: var(--kd-shadow-2);
    --bs-focus-ring-color: var(--kd-focus-ring);
    --bs-body-bg-rgb: 245, 247, 249;
    --bs-body-color-rgb: 27, 32, 38;
    --bs-emphasis-color-rgb: 27, 32, 38;
    --bs-secondary-color-rgb: 75, 86, 99;
    --bs-secondary-bg-rgb: 255, 255, 255;
    --bs-tertiary-color-rgb: 95, 106, 119;
    --bs-tertiary-bg-rgb: 236, 239, 243;
    --bs-link-color-rgb: 168, 65, 0;
    --bs-link-hover-color-rgb: 102, 39, 0;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    /* --vz-* */
    --vz-primary: var(--kd-brand-600);
    --vz-primary-rgb: 194, 74, 0;
    --vz-primary-bg-subtle: var(--kd-brand-50);
    --vz-primary-text-emphasis: var(--kd-brand-700);
    --vz-primary-border-subtle: var(--kd-brand-300);
    --vz-secondary: var(--kd-line-strong);
    --vz-secondary-rgb: 90, 101, 111;
    --vz-secondary-bg-subtle: var(--kd-surface-100);
    --vz-secondary-text-emphasis: var(--kd-ink-muted);
    --vz-secondary-border-subtle: var(--kd-surface-200);
    --vz-success: var(--kd-success);
    --vz-success-rgb: 26, 122, 75;
    --vz-success-bg-subtle: var(--kd-success-bg);
    --vz-success-text-emphasis: var(--kd-success-fg);
    --vz-success-border-subtle: var(--kd-success-bg);
    --vz-info: var(--kd-info);
    --vz-info-rgb: 40, 98, 184;
    --vz-info-bg-subtle: var(--kd-info-bg);
    --vz-info-text-emphasis: var(--kd-info-fg);
    --vz-info-border-subtle: var(--kd-info-bg);
    --vz-warning: var(--kd-warning);
    --vz-warning-rgb: 107, 76, 0;
    --vz-warning-bg-subtle: var(--kd-warning-bg);
    --vz-warning-text-emphasis: var(--kd-warning-fg);
    --vz-warning-border-subtle: var(--kd-warning-bg);
    --vz-danger: var(--kd-danger);
    --vz-danger-rgb: 195, 40, 61;
    --vz-danger-bg-subtle: var(--kd-danger-bg);
    --vz-danger-text-emphasis: var(--kd-danger-fg);
    --vz-danger-border-subtle: var(--kd-danger-bg);
    --vz-light: var(--kd-surface-100);
    --vz-light-rgb: 236, 239, 243;
    --vz-light-bg-subtle: var(--kd-surface-50);
    --vz-light-text-emphasis: var(--kd-ink-muted);
    --vz-light-border-subtle: var(--kd-surface-200);
    --vz-dark: var(--kd-ink);
    --vz-dark-rgb: 27, 32, 38;
    --vz-dark-bg-subtle: var(--kd-surface-100);
    --vz-dark-text-emphasis: var(--kd-ink);
    --vz-dark-border-subtle: var(--kd-line);
    --vz-body-bg: var(--kd-surface-50);
    --vz-body-color: var(--kd-ink);
    --vz-emphasis-color: var(--kd-ink);
    --vz-heading-color: var(--kd-ink);
    --vz-secondary-color: var(--kd-ink-muted);
    --vz-tertiary-color: var(--kd-ink-subtle);
    --vz-secondary-bg: var(--kd-surface-0);
    --vz-tertiary-bg: var(--kd-surface-100);
    --vz-card-bg: var(--kd-surface-0);
    --vz-card-cap-bg: transparent;
    --vz-card-border-color: var(--kd-surface-200);
    --vz-border-color: var(--kd-surface-200);
    --vz-border-color-translucent: var(--kd-surface-200);
    --vz-border-width: 1px;
    --vz-border-radius: var(--kd-radius-1);
    --vz-border-radius-sm: var(--kd-radius-1);
    --vz-border-radius-lg: var(--kd-radius-2);
    --vz-border-radius-xl: var(--kd-radius-3);
    --vz-link-color: var(--kd-brand-700);
    --vz-link-hover-color: var(--kd-brand-900);
    --vz-text-muted: var(--kd-ink-muted);
    --vz-font-sans-serif: var(--tb-font-sans-serif);
    --vz-font-monospace: var(--tb-font-monospace);
    --vz-body-font-family: var(--tb-body-font-family);
    --vz-body-font-size: var(--tb-body-font-size);
    --vz-box-shadow: var(--kd-shadow-1);
    --vz-box-shadow-sm: var(--kd-shadow-1);
    --vz-box-shadow-lg: var(--kd-shadow-2);
    --vz-focus-ring-color: var(--kd-focus-ring);
    --vz-body-bg-rgb: 245, 247, 249;
    --vz-body-color-rgb: 27, 32, 38;
    --vz-emphasis-color-rgb: 27, 32, 38;
    --vz-secondary-color-rgb: 75, 86, 99;
    --vz-secondary-bg-rgb: 255, 255, 255;
    --vz-tertiary-color-rgb: 95, 106, 119;
    --vz-tertiary-bg-rgb: 236, 239, 243;
    --vz-link-color-rgb: 168, 65, 0;
    --vz-link-hover-color-rgb: 102, 39, 0;
    --vz-white-rgb: 255, 255, 255;
    --vz-black-rgb: 0, 0, 0;
}

/* A.1  --bs-* e --vz-* → tokens (tema escuro: só os tripletes RGB mudam de literal) */
[data-bs-theme=dark] {
    /* --bs-* */
    --bs-primary: var(--kd-brand-600);
    --bs-primary-rgb: 194, 74, 0;
    --bs-primary-bg-subtle: var(--kd-brand-50);
    --bs-primary-text-emphasis: var(--kd-brand-700);
    --bs-primary-border-subtle: var(--kd-brand-300);
    --bs-secondary: var(--kd-line-strong);
    --bs-secondary-rgb: 142, 153, 165;
    --bs-secondary-bg-subtle: var(--kd-surface-100);
    --bs-secondary-text-emphasis: var(--kd-ink-muted);
    --bs-secondary-border-subtle: var(--kd-surface-200);
    --bs-success: var(--kd-success);
    --bs-success-rgb: 94, 201, 150;
    --bs-success-bg-subtle: var(--kd-success-bg);
    --bs-success-text-emphasis: var(--kd-success-fg);
    --bs-success-border-subtle: var(--kd-success-bg);
    --bs-info: var(--kd-info);
    --bs-info-rgb: 110, 163, 237;
    --bs-info-bg-subtle: var(--kd-info-bg);
    --bs-info-text-emphasis: var(--kd-info-fg);
    --bs-info-border-subtle: var(--kd-info-bg);
    --bs-warning: var(--kd-warning);
    --bs-warning-rgb: 251, 236, 163;
    --bs-warning-bg-subtle: var(--kd-warning-bg);
    --bs-warning-text-emphasis: var(--kd-warning-fg);
    --bs-warning-border-subtle: var(--kd-warning-bg);
    --bs-danger: var(--kd-danger);
    --bs-danger-rgb: 240, 107, 120;
    --bs-danger-bg-subtle: var(--kd-danger-bg);
    --bs-danger-text-emphasis: var(--kd-danger-fg);
    --bs-danger-border-subtle: var(--kd-danger-bg);
    --bs-light: var(--kd-surface-100);
    --bs-light-rgb: 33, 39, 46;
    --bs-light-bg-subtle: var(--kd-surface-50);
    --bs-light-text-emphasis: var(--kd-ink-muted);
    --bs-light-border-subtle: var(--kd-surface-200);
    --bs-dark: var(--kd-ink);
    --bs-dark-rgb: 230, 234, 239;
    --bs-dark-bg-subtle: var(--kd-surface-100);
    --bs-dark-text-emphasis: var(--kd-ink);
    --bs-dark-border-subtle: var(--kd-line);
    --bs-body-bg: var(--kd-surface-50);
    --bs-body-color: var(--kd-ink);
    --bs-emphasis-color: var(--kd-ink);
    --bs-heading-color: var(--kd-ink);
    --bs-secondary-color: var(--kd-ink-muted);
    --bs-tertiary-color: var(--kd-ink-subtle);
    --bs-secondary-bg: var(--kd-surface-0);
    --bs-tertiary-bg: var(--kd-surface-100);
    --bs-card-bg: var(--kd-surface-0);
    --bs-card-cap-bg: transparent;
    --bs-card-border-color: var(--kd-surface-200);
    --bs-border-color: var(--kd-surface-200);
    --bs-border-color-translucent: var(--kd-surface-200);
    --bs-border-width: 1px;
    --bs-border-radius: var(--kd-radius-1);
    --bs-border-radius-sm: var(--kd-radius-1);
    --bs-border-radius-lg: var(--kd-radius-2);
    --bs-border-radius-xl: var(--kd-radius-3);
    --bs-link-color: var(--kd-brand-700);
    --bs-link-hover-color: var(--kd-brand-900);
    --bs-text-muted: var(--kd-ink-muted);
    --bs-font-sans-serif: var(--tb-font-sans-serif);
    --bs-font-monospace: var(--tb-font-monospace);
    --bs-body-font-family: var(--tb-body-font-family);
    --bs-body-font-size: var(--tb-body-font-size);
    --bs-box-shadow: var(--kd-shadow-1);
    --bs-box-shadow-sm: var(--kd-shadow-1);
    --bs-box-shadow-lg: var(--kd-shadow-2);
    --bs-focus-ring-color: var(--kd-focus-ring);
    --bs-body-bg-rgb: 17, 20, 24;
    --bs-body-color-rgb: 230, 234, 239;
    --bs-emphasis-color-rgb: 230, 234, 239;
    --bs-secondary-color-rgb: 167, 176, 187;
    --bs-secondary-bg-rgb: 26, 31, 37;
    --bs-tertiary-color-rgb: 138, 148, 160;
    --bs-tertiary-bg-rgb: 33, 39, 46;
    --bs-link-color-rgb: 255, 164, 107;
    --bs-link-hover-color-rgb: 255, 211, 184;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    /* --vz-* */
    --vz-primary: var(--kd-brand-600);
    --vz-primary-rgb: 194, 74, 0;
    --vz-primary-bg-subtle: var(--kd-brand-50);
    --vz-primary-text-emphasis: var(--kd-brand-700);
    --vz-primary-border-subtle: var(--kd-brand-300);
    --vz-secondary: var(--kd-line-strong);
    --vz-secondary-rgb: 142, 153, 165;
    --vz-secondary-bg-subtle: var(--kd-surface-100);
    --vz-secondary-text-emphasis: var(--kd-ink-muted);
    --vz-secondary-border-subtle: var(--kd-surface-200);
    --vz-success: var(--kd-success);
    --vz-success-rgb: 94, 201, 150;
    --vz-success-bg-subtle: var(--kd-success-bg);
    --vz-success-text-emphasis: var(--kd-success-fg);
    --vz-success-border-subtle: var(--kd-success-bg);
    --vz-info: var(--kd-info);
    --vz-info-rgb: 110, 163, 237;
    --vz-info-bg-subtle: var(--kd-info-bg);
    --vz-info-text-emphasis: var(--kd-info-fg);
    --vz-info-border-subtle: var(--kd-info-bg);
    --vz-warning: var(--kd-warning);
    --vz-warning-rgb: 251, 236, 163;
    --vz-warning-bg-subtle: var(--kd-warning-bg);
    --vz-warning-text-emphasis: var(--kd-warning-fg);
    --vz-warning-border-subtle: var(--kd-warning-bg);
    --vz-danger: var(--kd-danger);
    --vz-danger-rgb: 240, 107, 120;
    --vz-danger-bg-subtle: var(--kd-danger-bg);
    --vz-danger-text-emphasis: var(--kd-danger-fg);
    --vz-danger-border-subtle: var(--kd-danger-bg);
    --vz-light: var(--kd-surface-100);
    --vz-light-rgb: 33, 39, 46;
    --vz-light-bg-subtle: var(--kd-surface-50);
    --vz-light-text-emphasis: var(--kd-ink-muted);
    --vz-light-border-subtle: var(--kd-surface-200);
    --vz-dark: var(--kd-ink);
    --vz-dark-rgb: 230, 234, 239;
    --vz-dark-bg-subtle: var(--kd-surface-100);
    --vz-dark-text-emphasis: var(--kd-ink);
    --vz-dark-border-subtle: var(--kd-line);
    --vz-body-bg: var(--kd-surface-50);
    --vz-body-color: var(--kd-ink);
    --vz-emphasis-color: var(--kd-ink);
    --vz-heading-color: var(--kd-ink);
    --vz-secondary-color: var(--kd-ink-muted);
    --vz-tertiary-color: var(--kd-ink-subtle);
    --vz-secondary-bg: var(--kd-surface-0);
    --vz-tertiary-bg: var(--kd-surface-100);
    --vz-card-bg: var(--kd-surface-0);
    --vz-card-cap-bg: transparent;
    --vz-card-border-color: var(--kd-surface-200);
    --vz-border-color: var(--kd-surface-200);
    --vz-border-color-translucent: var(--kd-surface-200);
    --vz-border-width: 1px;
    --vz-border-radius: var(--kd-radius-1);
    --vz-border-radius-sm: var(--kd-radius-1);
    --vz-border-radius-lg: var(--kd-radius-2);
    --vz-border-radius-xl: var(--kd-radius-3);
    --vz-link-color: var(--kd-brand-700);
    --vz-link-hover-color: var(--kd-brand-900);
    --vz-text-muted: var(--kd-ink-muted);
    --vz-font-sans-serif: var(--tb-font-sans-serif);
    --vz-font-monospace: var(--tb-font-monospace);
    --vz-body-font-family: var(--tb-body-font-family);
    --vz-body-font-size: var(--tb-body-font-size);
    --vz-box-shadow: var(--kd-shadow-1);
    --vz-box-shadow-sm: var(--kd-shadow-1);
    --vz-box-shadow-lg: var(--kd-shadow-2);
    --vz-focus-ring-color: var(--kd-focus-ring);
    --vz-body-bg-rgb: 17, 20, 24;
    --vz-body-color-rgb: 230, 234, 239;
    --vz-emphasis-color-rgb: 230, 234, 239;
    --vz-secondary-color-rgb: 167, 176, 187;
    --vz-secondary-bg-rgb: 26, 31, 37;
    --vz-tertiary-color-rgb: 138, 148, 160;
    --vz-tertiary-bg-rgb: 33, 39, 46;
    --vz-link-color-rgb: 255, 164, 107;
    --vz-link-hover-color-rgb: 255, 211, 184;
    --vz-white-rgb: 255, 255, 255;
    --vz-black-rgb: 0, 0, 0;
}

/* ---------------------------------------------------------------------------------------------
   A.2  Família --kd-* LEGADA (dashboard-contracts.css:7-36 e :root das 7 páginas de auth).
   ATENÇÃO: estes nomes NÃO são tokens do design system — são a paleta Tailwind antiga do
   dashboard-admin e o gradiente das telas de auth. Reapontamos cada nome para o token novo
   para retematizar essas telas sem tocar em seletor. Não há colisão exata com os 44 tokens.
   --------------------------------------------------------------------------------------------- */
:root {
    /* acentos Tailwind → semânticos do Prumo */
    --kd-orange: var(--kd-brand-600);
    --kd-orange-dark: var(--kd-brand-600-hover);   /* shade 10% de brand-600 (hover do Bootstrap), igual nos dois temas */
    --kd-teal: var(--kd-chart-3);
    --kd-teal-dark: var(--kd-chart-3);
    --kd-blue: var(--kd-info);
    --kd-blue-dark: var(--kd-info-fg);
    --kd-emerald: var(--kd-success);
    --kd-emerald-dark: var(--kd-success-fg);
    --kd-red: var(--kd-danger);
    --kd-red-dark: var(--kd-danger-fg);
    --kd-amber: var(--kd-warning);
    --kd-amber-dark: var(--kd-warning-fg);
    /* escala slate → escala neutra do Prumo */
    --kd-slate-50: var(--kd-surface-50);
    --kd-slate-100: var(--kd-surface-100);
    --kd-slate-200: var(--kd-surface-200);
    --kd-slate-300: var(--kd-line);
    --kd-slate-400: var(--kd-ink-subtle);
    --kd-slate-500: var(--kd-ink-muted);
    --kd-slate-600: var(--kd-ink-muted);
    --kd-slate-700: var(--kd-ink);
    --kd-slate-800: var(--kd-ink);
    --kd-slate-900: var(--kd-ink);
    /* raios, sombras e transição legados */
    --kd-radius: var(--kd-radius-2);
    --kd-radius-sm: var(--kd-radius-1);
    --kd-shadow-sm: none;                      /* shadow-0: nada em repouso */
    --kd-shadow-md: none;
    --kd-shadow-lg: var(--kd-shadow-1);        /* só a busca flutuante do dashboard usa */
    --kd-transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    /* gradiente das 7 páginas de auth → preenchimento sólido de marca */
    --kd-orange-start: var(--kd-brand-600);
    --kd-orange-mid: var(--kd-brand-700);
    --kd-orange-end: var(--kd-brand-600);
    --kd-gradient: var(--kd-brand-600);
}

/* ---------------------------------------------------------------------------------------------
   A.3  --cw-* (contract-wizard.css:5-14) — o wizard de contrato passa a ler os tokens.
   --------------------------------------------------------------------------------------------- */
:root {
    --cw-primary: var(--kd-brand-600);
    --cw-primary-soft: var(--kd-brand-50);
    --cw-success: var(--kd-success);
    --cw-border: var(--kd-surface-200);
    --cw-bg-light: var(--kd-surface-50);
    --cw-bg-summary: var(--kd-surface-0);
    --cw-shadow: none;
    --cw-radius: var(--kd-radius-2);
}

/* ---------------------------------------------------------------------------------------------
   A.4  --billing-* (banking/cobranca_detail.html:6-11) — teal/azul da fatura → neutros.
   --------------------------------------------------------------------------------------------- */
:root {
    --billing-primary: var(--kd-ink);
    --billing-secondary: var(--kd-ink-muted);
    --billing-accent: var(--kd-info);
    --billing-bg: var(--kd-surface-50);
}

/* ---------------------------------------------------------------------------------------------
   A.5  --auth-* (custom-auth.css:1-9) — 7 páginas de auth seguem o tema (inclusive escuro).
   --------------------------------------------------------------------------------------------- */
:root {
    --auth-bg-color: var(--kd-surface-50);
    --auth-card-bg-color: var(--kd-surface-0);
    --auth-text-color: var(--kd-ink);
    --auth-text-muted-color: var(--kd-ink-muted);
    --auth-primary-orange: var(--kd-brand-600);
    --auth-primary-orange-hover: #af4300;      /* shade 10% de brand-600 */
    --auth-border-color: var(--kd-surface-200);
}

/* ---------------------------------------------------------------------------------------------
   A.6  --role-* (auth-signin.html:33 / auth-signup.html:33-34) — valores injetados pelo servidor
   (laranja/azul/verde por papel). O layer vem depois do <style> e vence; o valor continua
   saindo do Python até a fase 2 (auth.py:178-203 e 894-918).
   --------------------------------------------------------------------------------------------- */
:root {
    --role-accent: var(--kd-brand-600);
    --role-gradient: var(--kd-brand-600);
}

/* ---------------------------------------------------------------------------------------------
   A.7  Definições mortas de --bs-popover-* (o popover do Steex lê --tb-popover-*).
   --------------------------------------------------------------------------------------------- */
.pending-popover {
    --tb-popover-max-width: 320px;
    --tb-popover-border-color: var(--kd-surface-200);
}
.pending-popover-dash {
    --tb-popover-max-width: 300px;
    --tb-popover-border-color: var(--kd-surface-200);
}

/* =============================================================================================
   B. CLASSES VELZON QUE NÃO EXISTEM NO STEEX
   62 usos de btn-soft-*, bg-soft-* e badge-soft-* (inclusive dinâmicos: admin/users/index.html
   btn-soft-{{ ... }} e banking/cobranca_form.html badge-soft-{{ ... }}), por isso as 8 variantes.
   B.1 copia o mecanismo de variáveis do .btn-subtle-* do Steex e ainda declara as propriedades
   diretas para vencer a redefinição local de financial/dimob_detail.html:91-111.
   ============================================================================================= */
/* B.1  .btn-soft-* — 8 variantes. As três --tb-btn-disabled-* entram em cada uma porque o .btn
   base não as declara e .btn:disabled (bootstrap.css:3359, especificidade 0,2,0) as lê: sem elas o
   fundo cai em transparent e a cor herda do pai (as declarações diretas abaixo têm só 0,1,0). */
.btn-soft-primary {
    --tb-btn-color: var(--tb-primary-text-emphasis);
    --tb-btn-bg: var(--tb-primary-bg-subtle);
    --tb-btn-border-color: transparent;
    --tb-btn-hover-color: var(--kd-brand-fg);
    --tb-btn-hover-bg: var(--tb-primary);
    --tb-btn-hover-border-color: transparent;
    --tb-btn-focus-shadow-rgb: var(--tb-primary-rgb);
    --tb-btn-active-color: var(--kd-brand-fg);
    --tb-btn-active-bg: var(--tb-primary);
    --tb-btn-active-border-color: transparent;
    --tb-btn-disabled-color: var(--tb-primary-text-emphasis);
    --tb-btn-disabled-bg: var(--tb-primary-bg-subtle);
    --tb-btn-disabled-border-color: transparent;
    background-color: var(--tb-primary-bg-subtle);
    color: var(--tb-primary-text-emphasis);
    border-color: transparent;
}
.btn-soft-primary:hover {
    background-color: var(--tb-primary);
    color: var(--kd-brand-fg);
    border-color: transparent;
}
.btn-soft-secondary {
    --tb-btn-color: var(--tb-secondary-text-emphasis);
    --tb-btn-bg: var(--tb-secondary-bg-subtle);
    --tb-btn-border-color: transparent;
    --tb-btn-hover-color: var(--kd-ink-inverse);
    --tb-btn-hover-bg: var(--tb-secondary);
    --tb-btn-hover-border-color: transparent;
    --tb-btn-focus-shadow-rgb: var(--tb-secondary-rgb);
    --tb-btn-active-color: var(--kd-ink-inverse);
    --tb-btn-active-bg: var(--tb-secondary);
    --tb-btn-active-border-color: transparent;
    --tb-btn-disabled-color: var(--tb-secondary-text-emphasis);
    --tb-btn-disabled-bg: var(--tb-secondary-bg-subtle);
    --tb-btn-disabled-border-color: transparent;
    background-color: var(--tb-secondary-bg-subtle);
    color: var(--tb-secondary-text-emphasis);
    border-color: transparent;
}
.btn-soft-secondary:hover {
    background-color: var(--tb-secondary);
    color: var(--kd-ink-inverse);
    border-color: transparent;
}
.btn-soft-success {
    --tb-btn-color: var(--tb-success-text-emphasis);
    --tb-btn-bg: var(--tb-success-bg-subtle);
    --tb-btn-border-color: transparent;
    --tb-btn-hover-color: var(--kd-ink-inverse);
    --tb-btn-hover-bg: var(--tb-success);
    --tb-btn-hover-border-color: transparent;
    --tb-btn-focus-shadow-rgb: var(--tb-success-rgb);
    --tb-btn-active-color: var(--kd-ink-inverse);
    --tb-btn-active-bg: var(--tb-success);
    --tb-btn-active-border-color: transparent;
    --tb-btn-disabled-color: var(--tb-success-text-emphasis);
    --tb-btn-disabled-bg: var(--tb-success-bg-subtle);
    --tb-btn-disabled-border-color: transparent;
    background-color: var(--tb-success-bg-subtle);
    color: var(--tb-success-text-emphasis);
    border-color: transparent;
}
.btn-soft-success:hover {
    background-color: var(--tb-success);
    color: var(--kd-ink-inverse);
    border-color: transparent;
}
.btn-soft-info {
    --tb-btn-color: var(--tb-info-text-emphasis);
    --tb-btn-bg: var(--tb-info-bg-subtle);
    --tb-btn-border-color: transparent;
    --tb-btn-hover-color: var(--kd-ink-inverse);
    --tb-btn-hover-bg: var(--tb-info);
    --tb-btn-hover-border-color: transparent;
    --tb-btn-focus-shadow-rgb: var(--tb-info-rgb);
    --tb-btn-active-color: var(--kd-ink-inverse);
    --tb-btn-active-bg: var(--tb-info);
    --tb-btn-active-border-color: transparent;
    --tb-btn-disabled-color: var(--tb-info-text-emphasis);
    --tb-btn-disabled-bg: var(--tb-info-bg-subtle);
    --tb-btn-disabled-border-color: transparent;
    background-color: var(--tb-info-bg-subtle);
    color: var(--tb-info-text-emphasis);
    border-color: transparent;
}
.btn-soft-info:hover {
    background-color: var(--tb-info);
    color: var(--kd-ink-inverse);
    border-color: transparent;
}
.btn-soft-warning {
    --tb-btn-color: var(--tb-warning-text-emphasis);
    --tb-btn-bg: var(--tb-warning-bg-subtle);
    --tb-btn-border-color: transparent;
    --tb-btn-hover-color: var(--tb-warning-text-emphasis);
    --tb-btn-hover-bg: var(--tb-warning-bg-subtle);
    --tb-btn-hover-border-color: var(--tb-warning-text-emphasis);
    --tb-btn-focus-shadow-rgb: var(--tb-warning-rgb);
    --tb-btn-active-color: var(--tb-warning-text-emphasis);
    --tb-btn-active-bg: var(--tb-warning-bg-subtle);
    --tb-btn-active-border-color: var(--tb-warning-text-emphasis);
    --tb-btn-disabled-color: var(--tb-warning-text-emphasis);
    --tb-btn-disabled-bg: var(--tb-warning-bg-subtle);
    --tb-btn-disabled-border-color: transparent;
    background-color: var(--tb-warning-bg-subtle);
    color: var(--tb-warning-text-emphasis);
    border-color: transparent;
}
.btn-soft-warning:hover {
    background-color: var(--tb-warning-bg-subtle);
    color: var(--tb-warning-text-emphasis);
    border-color: var(--tb-warning-text-emphasis);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .btn-soft-warning {
        --tb-btn-hover-bg: color-mix(in srgb, var(--kd-warning-bg) 88%, var(--kd-warning-fg));
        --tb-btn-active-bg: color-mix(in srgb, var(--kd-warning-bg) 80%, var(--kd-warning-fg));
    }
    .btn-soft-warning:hover {
        background-color: color-mix(in srgb, var(--kd-warning-bg) 88%, var(--kd-warning-fg));
    }
}
.btn-soft-danger {
    --tb-btn-color: var(--tb-danger-text-emphasis);
    --tb-btn-bg: var(--tb-danger-bg-subtle);
    --tb-btn-border-color: transparent;
    --tb-btn-hover-color: var(--kd-ink-inverse);
    --tb-btn-hover-bg: var(--tb-danger);
    --tb-btn-hover-border-color: transparent;
    --tb-btn-focus-shadow-rgb: var(--tb-danger-rgb);
    --tb-btn-active-color: var(--kd-ink-inverse);
    --tb-btn-active-bg: var(--tb-danger);
    --tb-btn-active-border-color: transparent;
    --tb-btn-disabled-color: var(--tb-danger-text-emphasis);
    --tb-btn-disabled-bg: var(--tb-danger-bg-subtle);
    --tb-btn-disabled-border-color: transparent;
    background-color: var(--tb-danger-bg-subtle);
    color: var(--tb-danger-text-emphasis);
    border-color: transparent;
}
.btn-soft-danger:hover {
    background-color: var(--tb-danger);
    color: var(--kd-ink-inverse);
    border-color: transparent;
}
.btn-soft-light {
    --tb-btn-color: var(--tb-light-text-emphasis);
    --tb-btn-bg: var(--tb-light-bg-subtle);
    --tb-btn-border-color: transparent;
    --tb-btn-hover-color: var(--kd-ink);
    --tb-btn-hover-bg: var(--tb-light);
    --tb-btn-hover-border-color: transparent;
    --tb-btn-focus-shadow-rgb: var(--tb-light-rgb);
    --tb-btn-active-color: var(--kd-ink);
    --tb-btn-active-bg: var(--tb-light);
    --tb-btn-active-border-color: transparent;
    --tb-btn-disabled-color: var(--tb-light-text-emphasis);
    --tb-btn-disabled-bg: var(--tb-light-bg-subtle);
    --tb-btn-disabled-border-color: transparent;
    background-color: var(--tb-light-bg-subtle);
    color: var(--tb-light-text-emphasis);
    border-color: transparent;
}
.btn-soft-light:hover {
    background-color: var(--tb-light);
    color: var(--kd-ink);
    border-color: transparent;
}
.btn-soft-dark {
    --tb-btn-color: var(--tb-dark-text-emphasis);
    --tb-btn-bg: var(--tb-dark-bg-subtle);
    --tb-btn-border-color: transparent;
    --tb-btn-hover-color: var(--kd-ink-inverse);
    --tb-btn-hover-bg: var(--tb-dark);
    --tb-btn-hover-border-color: transparent;
    --tb-btn-focus-shadow-rgb: var(--tb-dark-rgb);
    --tb-btn-active-color: var(--kd-ink-inverse);
    --tb-btn-active-bg: var(--tb-dark);
    --tb-btn-active-border-color: transparent;
    --tb-btn-disabled-color: var(--tb-dark-text-emphasis);
    --tb-btn-disabled-bg: var(--tb-dark-bg-subtle);
    --tb-btn-disabled-border-color: transparent;
    background-color: var(--tb-dark-bg-subtle);
    color: var(--tb-dark-text-emphasis);
    border-color: transparent;
}
.btn-soft-dark:hover {
    background-color: var(--tb-dark);
    color: var(--kd-ink-inverse);
    border-color: transparent;
}

/* B.2  .bg-soft-* → fundo bg-subtle */
.bg-soft-primary { background-color: var(--tb-primary-bg-subtle); }
.bg-soft-secondary { background-color: var(--tb-secondary-bg-subtle); }
.bg-soft-success { background-color: var(--tb-success-bg-subtle); }
.bg-soft-info { background-color: var(--tb-info-bg-subtle); }
.bg-soft-warning { background-color: var(--tb-warning-bg-subtle); }
.bg-soft-danger { background-color: var(--tb-danger-bg-subtle); }
.bg-soft-light { background-color: var(--tb-light-bg-subtle); }
.bg-soft-dark { background-color: var(--tb-dark-bg-subtle); }

/* B.3  .badge-soft-* → par bg-subtle / text-emphasis (uso dinâmico em banking/cobranca_form.html) */
.badge-soft-primary { background-color: var(--tb-primary-bg-subtle); color: var(--tb-primary-text-emphasis); }
.badge-soft-secondary { background-color: var(--tb-secondary-bg-subtle); color: var(--tb-secondary-text-emphasis); }
.badge-soft-success { background-color: var(--tb-success-bg-subtle); color: var(--tb-success-text-emphasis); }
.badge-soft-info { background-color: var(--tb-info-bg-subtle); color: var(--tb-info-text-emphasis); }
.badge-soft-warning { background-color: var(--tb-warning-bg-subtle); color: var(--tb-warning-text-emphasis); }
.badge-soft-danger { background-color: var(--tb-danger-bg-subtle); color: var(--tb-danger-text-emphasis); }
.badge-soft-light { background-color: var(--tb-light-bg-subtle); color: var(--tb-light-text-emphasis); }
.badge-soft-dark { background-color: var(--tb-dark-bg-subtle); color: var(--tb-dark-text-emphasis); }

/* B.4  Utilitários Velzon ausentes que os templates usam (fs-*, table-centered, bordas tracejadas). */
.fs-8 { font-size: .6875rem; }       /* piso real do sistema é 12px: fs-8 vira 11px só para não quebrar layout */
.fs-12 { font-size: .75rem; }
.fs-13 { font-size: .8125rem; }
.fs-15 { font-size: .9375rem; }
.fs-16 { font-size: 1rem; }
.fs-18 { font-size: 1.125rem; }
.fs-xxs { font-size: var(--tb-font-2xs); }
.table-centered td,
.table-centered th { vertical-align: middle; }
.border-top-dashed { border-top-style: dashed; }
.border-bottom-dashed { border-bottom-style: dashed; }

/* =============================================================================================
   C. RETEMA DO VOCABULÁRIO LEGADO
   Mesmos seletores de custom.css, dashboard-contracts.css, contract-wizard.css, custom-auth.css
   e dos <style> de página, escritos depois deles: vencem por cascata. Regras do Prumo aplicadas:
   nada de gradiente, sombra em repouso, pílula, borda lateral colorida, caixa alta em cabeçalho,
   elevação no hover; marca só em ação/seleção; estado só nos pares *-bg e *-fg.
   ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
   C.1  custom.css — listas CRUD (admin-staff-list, agent-list, list_users) e famílias globais
   --------------------------------------------------------------------------------------------- */

/* Botão "Adicionar" da marca: flat brand-600, sem gradiente, sem brilho, sem lift */
.btn-add-kd {
    background: var(--kd-brand-600);
    border: 1px solid transparent;
    color: var(--kd-brand-fg);
    padding: .4375rem 1rem;                    /* 36px de altura com texto 14/20 */
    border-radius: var(--kd-radius-1);
    font-weight: 500;
    box-shadow: none;
    transition: background-color .15s ease;
}
.btn-add-kd:hover,
.btn-add-kd:focus {
    background: #af4300;                       /* shade 10% de brand-600 (hover do Bootstrap) */
    color: var(--kd-brand-fg);
    box-shadow: none;
    transform: none;
}
.btn-add-kd:focus-visible { box-shadow: var(--kd-shadow-focus); }
.btn-add-kd:active {
    background: #9b3b00;                       /* shade 20% de brand-600 (pressionado) */
    color: var(--kd-brand-fg);
    transform: none;
}

/* Cabeçalho de modal da marca: surface-0, título ink, fio surface-200 (sem gradiente) */
.modal-header-kd {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.modal-header-kd .modal-title {
    color: var(--kd-ink);
    font-weight: 600;
}
.modal-header-kd .btn-close {
    filter: none;                              /* o legado invertia o X para branco */
    opacity: .6;
}
.modal-header-kd .btn-close:hover { opacity: 1; }

/* Botões de ação em linha de tabela: ghost 32px, ink-muted; cor semântica só no hover */
.action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--kd-radius-1);
    border: none;
    background: transparent;
    color: var(--kd-ink-muted);
    box-shadow: none;
    transform: none;
    font-size: 1rem;
    transition: color .15s ease, background-color .15s ease;
}
.action-btn:hover {
    background: var(--kd-surface-100);
    color: var(--kd-ink);
    box-shadow: none;
    transform: none;
}
.action-btn:active { transform: none; }
.action-btn:focus-visible { box-shadow: var(--kd-shadow-focus); }
.action-btn-view,
.action-btn-edit,
.action-btn-delete {
    background: transparent;
    color: var(--kd-ink-muted);
    box-shadow: none;
}
.action-btn-view:hover,
.action-btn-edit:hover {
    background: var(--kd-surface-100);
    color: var(--kd-ink);
    box-shadow: none;
    transform: none;
}
.action-btn-delete:hover,
.action-btn.btn-soft-danger:hover {
    background: var(--kd-surface-100);
    color: var(--kd-danger);
    box-shadow: none;
    transform: none;
}
.action-buttons { gap: .25rem; }

/* Badge de status: retângulo 22px, raio 4px, 12/500, ponto 6px (ícone fixo vem com o macro na fase 2) */
.badge-status {
    height: 22px;
    padding: 0 .5rem;
    gap: .25rem;
    border-radius: var(--kd-radius-1);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    background: var(--kd-surface-100);
    color: var(--kd-ink-muted);
}
.badge-status-active   { background: var(--kd-success-bg); color: var(--kd-success-fg); }
.badge-status-inactive { background: var(--kd-danger-bg);  color: var(--kd-danger-fg); }
/* Web/Vistoria/lista-vistorias.html:8-35 redefine a família na paleta Velzon (mesmos seletores) */
.badge-status-pendente     { background-color: var(--kd-warning-bg); color: var(--kd-warning-fg); }
.badge-status-em_andamento { background-color: var(--kd-info-bg);    color: var(--kd-info-fg); }
.badge-status-concluida    { background-color: var(--kd-success-bg); color: var(--kd-success-fg); }
.badge-status-cancelada    { background-color: var(--kd-danger-bg);  color: var(--kd-danger-fg); }
/* tipo de vistoria não é estado: badge neutro (texto distingue) */
.badge-tipo-entrada,
.badge-tipo-saida,
.badge-tipo-periodica { background-color: var(--kd-surface-100); color: var(--kd-ink); }

/* Tabela CRUD: cabeçalho surface-50 em caixa de frase, linhas de 40px, sem animação de entrada */
.crud-table thead th {
    background: var(--kd-surface-50);
    font-weight: 500;
    font-size: .8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kd-ink-muted);
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--kd-line-strong);
}
.crud-table tbody tr { animation: none; }
.crud-table tbody tr:hover { background: var(--kd-surface-50); }
.crud-table tbody td {
    padding: .625rem .75rem;
    font-size: .8125rem;
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.crud-table-responsive tbody td::before {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--kd-ink-muted);
}
@media (max-width: 768px) {
    .crud-table-responsive tbody tr {
        border-color: var(--kd-surface-200);
        border-radius: var(--kd-radius-2);
        box-shadow: none;
    }
}

/* Busca e filtros das listas: controles com borda line, raio 4px; teal #0F766E sai */
.crud-search-box .search-icon { color: var(--kd-ink-subtle); }
.crud-search-box input {
    border-radius: var(--kd-radius-1);
    border: 1px solid var(--kd-line);
}
.crud-search-box input:focus {
    border-color: var(--kd-focus-ring);
    box-shadow: var(--kd-shadow-focus);
}
.filter-panel {
    background: var(--kd-surface-50);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.filter-panel .form-control,
.filter-panel .form-select { border-color: var(--kd-line-strong); }   /* controle dentro de well: line não chega a 3:1 */
.filter-toggle-btn {
    border-radius: var(--kd-radius-1);
    background: var(--kd-surface-0);
    border: 1px solid var(--kd-line);
    color: var(--kd-ink);
}
.filter-toggle-btn:hover {
    background: var(--kd-surface-100);
    border-color: var(--kd-line-strong);
    color: var(--kd-ink);
}
.filter-toggle-btn.active {
    background: var(--kd-ink);
    border-color: var(--kd-ink);
    color: var(--kd-ink-inverse);
}
.filter-toggle-btn:focus-visible { box-shadow: var(--kd-shadow-focus); }

/* Avatar pequeno das listas (tamanhos 36px ficam; só a borda) */
.user-avatar-sm { border-color: var(--kd-surface-200); }
.user-info .user-name { color: var(--kd-ink); }
.user-info .user-role { color: var(--kd-ink-muted); }

/* Empty state: círculo surface-100 com ícone ink-subtle; título ink; texto ink-muted.
   Também cobre as redefinições locais (.empty-state{color:#111827} / i{color:#E5E7EB}) */
.empty-state { color: var(--kd-ink-muted); }
.empty-state i { color: var(--kd-ink-subtle); }
.empty-state-icon {
    background: var(--kd-surface-100);
    color: var(--kd-ink-subtle);
}
.empty-state-icon i { color: var(--kd-ink-subtle); }
.empty-state-title { color: var(--kd-ink); }
.empty-state-text { color: var(--kd-ink-muted); }

/* Véu de carregamento: segue a superfície (o rgba branco fixo bloqueava o modo escuro) */
.loading-overlay { background: var(--kd-surface-0); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .loading-overlay { background: color-mix(in srgb, var(--kd-surface-0) 80%, transparent); }
}
.loading-overlay .spinner-border { color: var(--kd-brand-600); }

/* ---------------------------------------------------------------------------------------------
   C.2  dashboard-contracts.css — dashboards/dashboard-admin.html
   A maior parte das cores já virou pelo alias --kd-slate-* e --kd-orange (A.2); aqui ficam
   gradientes, barras coloridas, pílulas, caixa alta, sombras e animações.
   --------------------------------------------------------------------------------------------- */
.dashboard-header h4 {
    font-weight: 600;
    color: var(--kd-ink);
    letter-spacing: -.01em;
}
.dashboard-header .subtitle { color: var(--kd-ink-muted); }

.agency-selector select {
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-1);
    color: var(--kd-ink);
    background: var(--kd-surface-0);
}
.agency-selector select:focus {
    border-color: var(--kd-focus-ring);
    box-shadow: var(--kd-shadow-focus);
}

.period-filters {
    background: var(--kd-surface-100);
    border-radius: var(--kd-radius-1);
}
.period-filters .period-btn {
    border: 1px solid transparent;
    border-radius: var(--kd-radius-1);
    color: var(--kd-ink-muted);
}
.period-filters .period-btn:hover {
    color: var(--kd-ink);
    background: var(--kd-surface-50);
}
.period-filters .period-btn.active {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border-color: var(--kd-line);
    box-shadow: none;
    font-weight: 600;
}

/* KPI: card plano (borda 1px, raio 6px, sem barra de 3px, sem sombra, sem lift, sem fadeIn) */
.kpi-card {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    background: var(--kd-surface-0);
    box-shadow: none;
    animation: none;
}
.kpi-card::before { display: none; }
.kpi-card:hover {
    box-shadow: none;
    transform: none;
}
.kpi-card .kpi-icon {
    border-radius: var(--kd-radius-1);
    background: var(--kd-surface-100);
    color: var(--kd-ink-subtle);
}
.kpi-card .kpi-icon.icon-active,
.kpi-card .kpi-icon.icon-revenue,
.kpi-card .kpi-icon.icon-alerts,
.kpi-card .kpi-icon.icon-overdue {
    background: var(--kd-surface-100);
    color: var(--kd-ink-subtle);
}
.kpi-card .kpi-label {
    font-size: .8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kd-ink-muted);
}
.kpi-card .kpi-value {
    color: var(--kd-ink);
    font-weight: 600;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-subtitle { color: var(--kd-ink-subtle); }

/* !important: a regra legada (dashboard-contracts.css:152/155) usa !important */
.alert-row-clickable:hover  { background: var(--kd-surface-50) !important; }
.alert-row-clickable:active { background: var(--kd-surface-100) !important; }

.overdue-card {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    background: var(--kd-surface-0);
    box-shadow: none;
}
.overdue-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--kd-surface-200);
}
.overdue-card .card-header h5 {
    font-weight: 600;
    color: var(--kd-ink);
}
.overdue-table thead th,
.alert-table thead th,
.recent-contracts-table thead th {
    font-size: .8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kd-ink-muted);
    background: var(--kd-surface-50);
    border-bottom: 1px solid var(--kd-line-strong);
}
.overdue-table tbody td,
.alert-table tbody td,
.recent-contracts-table tbody td {
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.overdue-table tbody tr,
.alert-table tbody tr,
.recent-contracts-table tbody tr { animation: none; }
.alert-table tbody tr:hover { background: var(--kd-surface-50); }

.search-container .search-icon { color: var(--kd-ink-subtle); }
.search-container input {
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-1);
    color: var(--kd-ink);
    background: var(--kd-surface-0);
}
.search-container input:focus {
    border-color: var(--kd-focus-ring);
    box-shadow: var(--kd-shadow-focus);
}
.search-container input::placeholder { color: var(--kd-ink-subtle); }
.search-results {
    background: var(--kd-surface-0);
    border-radius: var(--kd-radius-2);
    box-shadow: var(--kd-shadow-1);
    border: 1px solid var(--kd-surface-200);
}
.search-results.show { animation: none; }
.search-results .search-item {
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.search-results .search-item:hover { background: var(--kd-surface-100); }
.search-results .search-item i { border-radius: var(--kd-radius-1); }
.search-results .search-item[data-type="contract"] i,
.search-results .search-item[data-type="owner"] i,
.search-results .search-item[data-type="tenant"] i,
.search-results .search-item[data-type="property"] i {
    background: var(--kd-surface-100);
    color: var(--kd-ink-muted);
}
.search-results .search-item .search-sublabel { color: var(--kd-ink-subtle); }

.chart-card,
.alerts-hub {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    background: var(--kd-surface-0);
    box-shadow: none;
}
.chart-card:hover { box-shadow: none; }
.chart-card .card-title { color: var(--kd-ink); }
.alerts-hub .card-header { border-bottom: 1px solid var(--kd-surface-200); }
.alerts-hub .card-header h5 {
    font-weight: 600;
    color: var(--kd-ink);
}

/* Abas de alertas: sublinhado 2px brand-600 encostado na régua de 1px */
.alert-tabs { border-bottom: 1px solid var(--kd-surface-200); }
.alert-tabs .alert-tab { color: var(--kd-ink-muted); }
.alert-tabs .alert-tab:hover { color: var(--kd-ink); }
.alert-tabs .alert-tab.active {
    color: var(--kd-ink);
    font-weight: 600;
}
.alert-tabs .alert-tab.active::after {
    bottom: -1px;
    background: var(--kd-brand-600);
    border-radius: 0;
}
.alert-tab .tab-badge {
    border-radius: var(--kd-radius-1);
    font-weight: 600;
    background: var(--kd-surface-100);
    color: var(--kd-ink-muted);
}
.alert-tab .tab-badge.badge-danger,
.alert-tab .tab-badge.badge-warning,
.alert-tab .tab-badge.badge-info {
    background: var(--kd-surface-100);
    color: var(--kd-ink-muted);
}
.alert-panel { animation: none; }

.urgency-badge {
    height: 22px;
    padding: 0 .5rem;
    border-radius: var(--kd-radius-1);
    font-weight: 500;
}
.urgency-badge.urgency-danger  { background: var(--kd-danger-bg);  color: var(--kd-danger-fg); }
.urgency-badge.urgency-warning { background: var(--kd-warning-bg); color: var(--kd-warning-fg); }
.urgency-badge.urgency-info    { background: var(--kd-info-bg);    color: var(--kd-info-fg); }
.urgency-badge.urgency-success { background: var(--kd-success-bg); color: var(--kd-success-fg); }
.urgency-badge.urgency-danger .pulse-dot {
    background: var(--kd-danger-fg);
    animation: none;
}

.agency-group-header {
    background: var(--kd-surface-50);
    border-bottom: 1px solid var(--kd-surface-200);
    font-weight: 500;
    color: var(--kd-ink-muted);
    text-transform: none;
    letter-spacing: 0;
}
.agency-group-header i { color: var(--kd-ink-subtle); }
.empty-alert { color: var(--kd-ink-subtle); }

/* !important: o legado (dashboard-contracts.css:613/620) fixa a cor com !important */
.contract-code-link { color: var(--kd-brand-700) !important; }
.contract-code-link:hover { color: var(--kd-brand-900) !important; }

.alert-scroll::-webkit-scrollbar-thumb { background: var(--kd-surface-200); }
.alert-scroll::-webkit-scrollbar-thumb:hover { background: var(--kd-line); }

.pending-kpi-link { color: var(--kd-warning); }
.pending-kpi-link:hover { color: var(--kd-warning-fg); }
.pending-kpi-link i { animation: none; }
.pending-reason-tag {
    color: var(--kd-warning-fg);
    background: var(--kd-warning-bg);
    border-left: 0;
    border-radius: var(--kd-radius-1);
}
.pending-reason-tag i { color: var(--kd-warning-fg); }
.pending-popover-dash .popover-header {
    background: var(--kd-warning-bg);
    border-bottom-color: var(--kd-warning-bg);
    color: var(--kd-warning-fg);
}
.pending-dash-item {
    color: var(--kd-ink-muted);
    border-bottom: 1px solid var(--kd-surface-200);
}
.pending-dash-item i { color: var(--kd-warning); }

/* .status-badge — família usada por dashboard-admin, banking/cobranca_detail, admin/users e DIMOB
   (mesma base; cada tela traz os próprios sufixos) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    height: 22px;
    padding: 0 .5rem;
    border-radius: var(--kd-radius-1);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    background: var(--kd-surface-100);
    color: var(--kd-ink-muted);
}
/* dashboard-admin (contratos) */
.status-badge.status-ativo     { background: var(--kd-success-bg); color: var(--kd-success-fg); }
.status-badge.status-pendente  { background: var(--kd-warning-bg); color: var(--kd-warning-fg); }
.status-badge.status-encerrado { background: var(--kd-surface-100); color: var(--kd-ink-muted); }
.status-badge.status-cancelado { background: var(--kd-danger-bg);  color: var(--kd-danger-fg); }
/* banking/cobranca_detail.html */
.status-badge.status-pendente_emissao { background: var(--kd-warning-bg); color: var(--kd-warning-fg); }
.status-badge.status-emitido          { background: var(--kd-info-bg);    color: var(--kd-info-fg); }
.status-badge.status-pago             { background: var(--kd-success-bg); color: var(--kd-success-fg); }
.status-badge.status-erro             { background: var(--kd-danger-bg);  color: var(--kd-danger-fg); }
/* admin/users/index.html */
.status-badge.status-active   { background: var(--kd-success-bg); color: var(--kd-success-fg); }
.status-badge.status-inactive { background: var(--kd-danger-bg);  color: var(--kd-danger-fg); }
/* financial/dimob_list.html e dimob_detail.html */
.status-badge.rascunho    { background: var(--kd-surface-100); color: var(--kd-ink-muted); }
.status-badge.gerada      { background: var(--kd-info-bg);     color: var(--kd-info-fg); }
.status-badge.retificada  { background: var(--kd-warning-bg);  color: var(--kd-warning-fg); }
.status-badge.transmitida { background: var(--kd-success-bg);  color: var(--kd-success-fg); }

/* ---------------------------------------------------------------------------------------------
   C.3  contract-wizard.css — wizard de contrato (os --cw-* já apontam para tokens, A.3)
   --------------------------------------------------------------------------------------------- */
.wizard-step-indicator {
    border-radius: var(--kd-radius-1);
    color: var(--kd-ink-muted);
    background: var(--kd-surface-100);
    border: 1px solid transparent;
}
.wizard-step-indicator .step-num {
    background: var(--kd-surface-200);
    color: var(--kd-ink);
}
.wizard-step-indicator.active {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border-color: var(--kd-brand-600);
    box-shadow: none;
}
.wizard-step-indicator.active .step-num {
    background: var(--kd-brand-600);
    color: var(--kd-brand-fg);
}
.wizard-step-indicator.completed { color: var(--kd-ink-muted); }
.wizard-step-indicator.completed .step-num {
    background: var(--kd-brand-600);           /* nó concluído = brand-600 (não verde) */
    color: var(--kd-brand-fg);
}
.wizard-panel { animation: none; }

.wizard-summary-card {                         /* sticky top:90px é geometria — fica */
    background: var(--kd-surface-0);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.wizard-summary-card h6 {
    font-size: .875rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kd-ink);
}
.summary-item { border-bottom: 1px dashed var(--kd-surface-200); }
.summary-item .label { color: var(--kd-ink-muted); }
.summary-item .value { color: var(--kd-ink); }
.summary-item .value.empty { color: var(--kd-ink-subtle); }
.summary-total { border-top: 1px solid var(--kd-line-strong); }
.summary-total .value {
    color: var(--kd-ink);
    font-variant-numeric: tabular-nums;
}
.wizard-section-title {
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.wizard-section-title i { color: var(--kd-ink-subtle); }
.form-label-sm { color: var(--kd-ink); }
.form-hint { color: var(--kd-ink-muted); }
.wizard-nav-buttons { border-top: 1px solid var(--kd-surface-200); }
.btn-inline-create {
    color: var(--kd-brand-700);
    border-color: var(--kd-brand-300);
}
.btn-inline-create:hover {
    background: var(--kd-brand-50);
    color: var(--kd-brand-900);
    border-color: var(--kd-brand-300);
}
.conditional-section {
    background: var(--kd-surface-50);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    animation: none;
}
.pending-badge {
    border-radius: var(--kd-radius-1);
    background: var(--kd-warning-bg);
    color: var(--kd-warning-fg);
}
.wizard-loading { background: var(--kd-surface-50); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .wizard-loading { background: color-mix(in srgb, var(--kd-surface-50) 85%, transparent); }
}
.hover-shadow:hover {
    box-shadow: none;
    transform: none;
    border-color: var(--kd-line);
}
#kaio-dropzone:hover { background-color: var(--kd-surface-50); }   /* mesmo seletor-id do legado */

/* ---------------------------------------------------------------------------------------------
   C.4  Autenticação — custom-auth.css (7 páginas), auth-signin, auth-signup e errors/erro.html
   Páginas standalone: o <style> delas vem antes do kd-theme.css, então o mesmo seletor vence.
   --------------------------------------------------------------------------------------------- */

/* Fundo da página: surface-50 sem gradientes nem brilhos radiais (signin/signup fixavam gradiente
   no body). Igual ao fundo de página do tema — vale para todas as telas. */
body {
    background-image: none;
    background-color: var(--tb-body-bg, var(--kd-surface-50));
}
.auth-page-wrapper::before { display: none; }

/* custom-auth.css */
.auth-page-wrapper .card {
    background-color: var(--kd-surface-0);
    border: 1px solid var(--kd-surface-200);
}
.auth-page-wrapper h5,
.auth-page-wrapper h3,
.auth-page-wrapper label { color: var(--kd-ink); }
.auth-page-wrapper p { color: var(--kd-ink-muted); }
.auth-page-wrapper .form-control {
    background-color: var(--kd-surface-0);
    border-color: var(--kd-line);
    color: var(--kd-ink);
}
.auth-page-wrapper .form-control:focus {
    border-color: var(--kd-focus-ring);
    box-shadow: var(--kd-shadow-focus);
}
.auth-page-wrapper .form-check-input:checked {
    background-color: var(--kd-brand-600);
    border-color: var(--kd-brand-600);
}
.auth-page-wrapper .input-group-text { background: var(--kd-surface-50); }
.auth-page-wrapper .btn-primary {
    background-color: var(--kd-brand-600);
    border-color: var(--kd-brand-600);
    color: var(--kd-brand-fg);
    border-radius: var(--kd-radius-1);
}
.auth-page-wrapper .btn-primary:hover,
.auth-page-wrapper .btn-primary:focus {
    background-color: #af4300;                 /* shade 10% de brand-600 */
    border-color: #af4300;
    color: var(--kd-brand-fg);
}
.auth-page-wrapper .btn-primary:active {
    background-color: #9b3b00;                 /* shade 20% de brand-600 */
    border-color: #9b3b00;
    color: var(--kd-brand-fg);
}
.auth-page-wrapper a { color: var(--kd-brand-700); }
.auth-page-wrapper a:hover { color: var(--kd-brand-900); }

/* auth-signin.html / auth-signup.html */
.auth-card {
    background: var(--kd-surface-0);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    box-shadow: none;
}
.auth-header {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.auth-header .role-icon {
    background: var(--kd-surface-100);
    color: var(--kd-ink-subtle);
    backdrop-filter: none;
}
/* Logo do KD no cabeçalho de login/cadastro: o SVG branco some sobre surface-0, então o CSS
   troca pela versão colorida recortada (só quando o src é o logo branco do KD; o logo da
   imobiliária, quando existe, não é tocado). */
.auth-header img.auth-logo[src$="logo-branco.svg"] {
    content: url("../images/svg/logo-colorido-recortado.svg");
    height: 56px;
    max-height: 56px;
    width: auto;
}
.btn-auth {
    background: var(--kd-brand-600);
    border: 1px solid transparent;
    border-radius: var(--kd-radius-1);
    font-weight: 500;
    color: var(--kd-brand-fg);
}
.btn-auth:hover {
    background: #af4300;                       /* shade 10% de brand-600 */
    color: var(--kd-brand-fg);
    transform: none;
    box-shadow: none;
}
.btn-auth:focus-visible { box-shadow: var(--kd-shadow-focus); }
.auth-link { color: var(--kd-brand-700); }
.auth-link:hover {
    color: var(--kd-brand-900);
    filter: none;
}
/* Rodapé do signin: "© {{ agency_name }}" e "Powered by" em branco sobre gradiente (ilegível em
   surface-50). !important: .text-white é utilitário com !important; o botão .btn-auth.text-white
   não entra (seletor restrito a <p>). O text-shadow inline fica para a fase 2. */
.auth-page-wrapper p.text-white,
.auth-page-wrapper p.text-white a.text-white { color: var(--kd-ink-subtle) !important; }   /* !important: utilitário .text-white */

/* 7 páginas de auth (forgot, mfa, new-password, verify-email, verify-code, confirm-email, select-panel) */
.auth-card-wrapper {
    background: var(--kd-surface-0);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    box-shadow: none;
}
.auth-header-gradient {
    background: var(--kd-surface-0);
    border-bottom: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2) var(--kd-radius-2) 0 0;
}
.auth-header-gradient h4 { color: var(--kd-ink); }
.auth-header-gradient p { color: var(--kd-ink-muted); }
.btn-kd-gradient {
    background: var(--kd-brand-600);
    border: 1px solid transparent;
    color: var(--kd-brand-fg);
    font-weight: 500;
    border-radius: var(--kd-radius-1);
    box-shadow: none;
}
.btn-kd-gradient:hover {
    background: #af4300;                       /* shade 10% de brand-600 */
    transform: none;
    box-shadow: none;
    color: var(--kd-brand-fg);
}
.btn-kd-gradient:focus-visible { box-shadow: var(--kd-shadow-focus); }
.btn-kd-gradient:disabled {
    background: var(--kd-surface-100);
    border-color: var(--kd-surface-200);
    color: var(--kd-ink-subtle);
    opacity: 1;
}
.key-icon,
.lock-icon,
.email-icon,
.security-icon {
    background: var(--kd-surface-100);
    box-shadow: none;
}
.key-icon i,
.lock-icon i,
.email-icon i,
.security-icon i { color: var(--kd-ink-subtle); }
.form-control-premium {
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-1);
    background: var(--kd-surface-0);
    color: var(--kd-ink);
}
.form-control-premium:focus {
    border-color: var(--kd-focus-ring);
    box-shadow: var(--kd-shadow-focus);
}
.otp-input {
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-1);
    background: var(--kd-surface-0);
    color: var(--kd-ink);
}
.otp-input:focus {
    border-color: var(--kd-focus-ring);
    box-shadow: var(--kd-shadow-focus);
    transform: none;
}
.otp-input.filled {
    border-color: var(--kd-brand-600);
    background: var(--kd-brand-50);
}
.timer-badge {
    background: var(--kd-warning-bg);
    border: 1px solid var(--kd-warning-bg);
    border-radius: var(--kd-radius-1);
    color: var(--kd-warning-fg);
}
.timer-badge.expired {
    background: var(--kd-danger-bg);
    border-color: var(--kd-danger-bg);
    color: var(--kd-danger-fg);
}
.resend-btn { color: var(--kd-brand-700); }
.resend-btn:hover { color: var(--kd-brand-900); }
.resend-btn:disabled { color: var(--kd-ink-subtle); }
.masked-email { color: var(--kd-ink); }
.attempts-warning {
    background: var(--kd-warning-bg);
    border-left: 0;
    border-radius: var(--kd-radius-1);
    color: var(--kd-warning-fg);
}
.info-box {
    background: var(--kd-info-bg);
    border: 1px solid var(--kd-info-bg);
    border-radius: var(--kd-radius-1);
}
.info-box p { color: var(--kd-info-fg); }
.info-box i { color: var(--kd-info-fg); }
.password-strength { background: var(--kd-surface-200); }
.password-strength-bar.weak   { background: var(--kd-danger); }
.password-strength-bar.medium { background: var(--kd-warning); }
.password-strength-bar.strong { background: var(--kd-success); }
.password-hint { color: var(--kd-ink-subtle); }
.password-hint.weak   { color: var(--kd-danger); }
.password-hint.medium { color: var(--kd-warning); }
.password-hint.strong { color: var(--kd-success); }
.requirements-list li { color: var(--kd-ink-subtle); }
.requirements-list li.valid { color: var(--kd-success); }
.requirements-list li.valid i { color: var(--kd-success); }
.requirements-list li i { color: var(--kd-ink-subtle); }
/* auth-select-panel.html */
.panel-option {
    border: 1px solid var(--kd-line);
    background: var(--kd-surface-0);
    border-radius: var(--kd-radius-2);
}
.panel-option:hover {
    border-color: var(--kd-line-strong);
    background: var(--kd-surface-50);
    box-shadow: none;
    transform: none;
}
.panel-option:focus-visible { box-shadow: var(--kd-shadow-focus); }
.panel-icon {
    background: var(--kd-surface-100);
    border: 0;
    border-radius: var(--kd-radius-1);
}
.panel-icon i { color: var(--kd-ink-muted); }
.panel-label { color: var(--kd-ink); }
.panel-sub { color: var(--kd-ink-subtle); }
.panel-option .arrow { color: var(--kd-ink-subtle); }
/* errors/erro.html não tem <style>: body.bg-light, .btn-light, .btn-primary e .text-muted seguem
   os --tb-* redefinidos pelas partes 01/02. O .card.shadow-sm.border-0 fica sem borda (ver notas). */

/* ---------------------------------------------------------------------------------------------
   C.5  .module-hero e formulários de lançamento (create_transfer / create_expense / create_revenue)
   Hero navy com brilho laranja → card surface-0 com fio surface-200; acentos #FF6A13 → tokens.
   --------------------------------------------------------------------------------------------- */
.module-hero {
    background: var(--kd-surface-0);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    color: var(--kd-ink);
}
.module-hero::before { display: none; }
.module-hero .hero-icon {
    border-radius: var(--kd-radius-1);
    background: var(--kd-surface-100);
    border: 0;
    color: var(--kd-ink-subtle);
}
.module-hero h4 {
    font-weight: 600;
    color: var(--kd-ink);
}
.module-hero p { color: var(--kd-ink-muted); }
.module-hero .btn-hero {
    background: var(--kd-brand-600);
    color: var(--kd-brand-fg);
    font-weight: 500;
    border-radius: var(--kd-radius-1);
}
.module-hero .btn-hero:hover {
    background: #af4300;                       /* shade 10% de brand-600 */
    color: var(--kd-brand-fg);
}
.form-section-title {
    text-transform: none;
    letter-spacing: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.form-section-title i { color: var(--kd-ink-subtle); }
.transfer-flow {
    background: var(--kd-surface-50);
    border: 1px dashed var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.transfer-flow .flow-arrow { color: var(--kd-ink-subtle); }
div.item-row {                                 /* div: não atinge as <tr class="item-row"> da fatura Asaas */
    background: var(--kd-surface-50);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
div.add-btn {                                  /* div: não atinge os <button class="btn … add-btn"> de
                                                  apps-real-estate-list.html:98 e das páginas demo */
    border: 1px dashed var(--kd-line);
    border-radius: var(--kd-radius-2);
    color: var(--kd-ink);
}
div.add-btn:hover {
    border-color: var(--kd-brand-300);
    background: var(--kd-brand-50);
    color: var(--kd-brand-700);
}
.recurrence-box {
    background: var(--kd-surface-50);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}

/* ---------------------------------------------------------------------------------------------
   C.6  Títulos de seção e famílias de card (stat/info/stats/summary/balance) + portais
   --------------------------------------------------------------------------------------------- */
.section-title,                                /* apps/real-estate/users/view_user.html */
.section-header {                              /* apps/real-estate/users/user_form.html */
    text-transform: none;
    letter-spacing: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.stat-card,                                    /* view_user, banking/index, owner/dashboard, support/list */
.info-card {                                   /* tenant/dashboard */
    background: var(--kd-surface-0);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    box-shadow: none;
}
.stat-card:hover,
.info-card:hover {
    transform: none;
    box-shadow: none;
}
.stat-card .stat-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--kd-ink-muted);
}
.stat-card .stat-value,
.stat-value {
    color: var(--kd-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.stat-icon,
.stat-card .stat-icon { border-radius: var(--kd-radius-1); }
.stats-card { border-left: 0; }                /* documents/index.html: barra laranja de 3px sai */
.summary-card {                                /* financial/contract_statement.html: .card com barra laranja */
    border-left-width: 1px;
    border-left-color: var(--kd-surface-200);
}
.balance-card {                                /* financial/bank_account_statement.html: gradiente laranja */
    background: var(--kd-surface-50);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    color: var(--kd-ink);
}
.balance-card .balance-label {
    opacity: 1;
    color: var(--kd-ink-muted);
}
.balance-card .balance-value { font-variant-numeric: tabular-nums; }
/* portais: pílulas → retângulo 4px; a borda lateral de .property-card/.upcoming-card já é anulada
   pelo .border-0 dos próprios cards */
.due-date-badge,
.property-badge { border-radius: var(--kd-radius-1); }

/* ---------------------------------------------------------------------------------------------
   C.7  API Bancária — banking/cobranca_form, config_form, cobranca_detail, index
   Os --vz-* (A.1) já fazem o número do passo e as bordas aparecerem; aqui o desenho.
   --------------------------------------------------------------------------------------------- */
.bank-step {
    border-radius: var(--kd-radius-2);
    border: 1px solid var(--kd-surface-200);
}
.bank-step:hover { border-color: var(--kd-line-strong); }
.bank-step.selected {
    border-color: var(--kd-brand-300);
    background: var(--kd-brand-50);
}
.bank-step .bank-name { font-weight: 600; }
.billing-type-card {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.billing-type-card:hover { border-color: var(--kd-line-strong); }
.billing-type-card.selected {
    border-color: var(--kd-brand-300);
    background: var(--kd-brand-50);
}
.step-badge {
    background: var(--kd-brand-600);
    color: var(--kd-brand-fg);
    font-weight: 600;
}
.bank-card-header {
    border-radius: var(--kd-radius-2);
    background: var(--kd-surface-50);
    border: 1px solid var(--kd-surface-200);
}
.bank-logo { font-weight: 600; }
/* fatura (cobranca_detail) */
.invoice-wrapper {
    background: var(--kd-surface-50);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.invoice-header {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
/* !important: .text-white / .border-white são utilitários com !important e o cabeçalho deixou de ser escuro */
.invoice-header .text-white { color: var(--kd-ink) !important; }
.invoice-header .border-white { border-color: var(--kd-surface-200) !important; }
.invoice-section {
    background: var(--kd-surface-0);
    backdrop-filter: none;
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.action-card {
    background: var(--kd-surface-50);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.total-row td {
    font-weight: 600;
    color: var(--kd-ink);
}
/* banking/index.html */
.bank-gradient {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.api-card {
    border-left-width: 1px;
    border-left-color: var(--kd-surface-200);
}
.api-card:hover {
    transform: none;
    box-shadow: none;
}
.env-badge-sandbox,
.env-badge-production {
    border-radius: var(--kd-radius-1);
    font-weight: 500;
}
.env-badge-sandbox    { background: var(--kd-warning-bg); color: var(--kd-warning-fg); }
.env-badge-production { background: var(--kd-success-bg); color: var(--kd-success-fg); }

/* ---------------------------------------------------------------------------------------------
   C.8  Wizard de imóvel, Sites & Portais, lista de contratos
   --------------------------------------------------------------------------------------------- */
/* apps/real-estate/property-wizard.html (+ 9 includes wizard/step*.html) */
.wizard-step::after { background: var(--kd-surface-200); }
.wizard-step .step-icon {
    background: var(--kd-surface-100);
    border: 1px solid var(--kd-line);
    color: var(--kd-ink-subtle);
}
.wizard-step.active .step-icon {
    background: var(--kd-surface-0);
    color: var(--kd-brand-700);
    border: 2px solid var(--kd-brand-600);
}
.wizard-step.completed .step-icon {
    background: var(--kd-brand-600);
    color: var(--kd-brand-fg);
    border-color: var(--kd-brand-600);
}
.wizard-step .step-label { color: var(--kd-ink-muted); }
.wizard-step.active .step-label { color: var(--kd-ink); }
.wizard-content { animation: none; }
.field-group {
    background: var(--kd-surface-50);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.field-group .form-control,
.field-group .form-select { border-color: var(--kd-line-strong); }
.field-group-title { color: var(--kd-ink); }
.amenity-item {
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-1);
}
.amenity-item:hover { border-color: var(--kd-line-strong); }
.amenity-item.selected {
    background: var(--kd-brand-50);
    color: var(--kd-brand-900);
    border-color: var(--kd-brand-300);
}
.save-indicator {
    border-radius: var(--kd-radius-1);
    color: var(--kd-ink-inverse);              /* fundo success/warning vem do alias --bs-* */
}
/* apps/sites/{edit,theme,template_gallery}.html */
.template-option:hover,
.template-card:hover,
.palette-card:hover {
    border-color: var(--kd-line-strong);
    transform: none;
    box-shadow: none;
}
.template-option.selected,
.template-card.selected {
    border-color: var(--kd-brand-300);
    background: var(--kd-brand-50);
}
.palette-option.selected,
.palette-card.selected {
    border-color: var(--kd-brand-300);
    box-shadow: none;
}
.template-preview {
    background: var(--kd-surface-100);
    color: var(--kd-ink-subtle);
}
/* apps/real-estate/contracts/apps-real-estate-contracts-list.html */
.filter-badge:hover { transform: none; }
.filter-badge.active { box-shadow: 0 0 0 2px var(--kd-brand-300); }
.filter-row {
    background: var(--kd-surface-50);
    border-bottom: 1px solid var(--kd-surface-200);
}
.pending-info-trigger .pending-icon { animation: none; }
.pending-popover .popover-header {
    background: var(--kd-warning-bg);
    border-bottom-color: var(--kd-warning-bg);
    color: var(--kd-warning-fg);
}
.pending-item {
    color: var(--kd-ink-muted);
    border-bottom: 1px solid var(--kd-surface-200);
}
.pending-item i { color: var(--kd-warning); }

/* ---------------------------------------------------------------------------------------------
   C.9  Demais <style> de página com o mesmo vocabulário (financeiro, documentos, suporte,
        usuários do sistema, pessoas, vistorias)
   --------------------------------------------------------------------------------------------- */
/* Cabeçalhos coloridos → surface-0 com fio; textos .text-white dentro deles → ink
   (!important: utilitários .text-white/.text-white-50 do Bootstrap usam !important) */
.gradient-header,                              /* contract_statement (avatar) e bank_accounts (modal-header) */
.docs-gradient-header,                         /* documents/index.html (card-header) */
.support-gradient,                             /* support/list, new e detail */
.header-gradient,                              /* financial/dimob_detail.html */
.profile-header {                              /* admin/users/view_user.html */
    background: var(--kd-surface-0);
    color: var(--kd-ink);
}
.modal-header.gradient-header,
.card-header.docs-gradient-header { border-bottom: 1px solid var(--kd-surface-200); }
.avatar-title.gradient-header { background: var(--kd-surface-100); }
.gradient-header .text-white,
.docs-gradient-header .text-white,
.profile-header .text-white { color: var(--kd-ink) !important; }                 /* !important: utilitário .text-white */
.avatar-title.gradient-header.text-white { color: var(--kd-ink-muted) !important; }   /* !important: idem (ícone do avatar) */
.profile-header .text-white-50 { color: var(--kd-ink-muted) !important; }            /* !important: utilitário .text-white-50 */
.gradient-header .btn-close-white { filter: none; }   /* o X volta a ser escuro sobre surface-0 (escuro: ver D) */
.header-gradient {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.header-gradient .label { color: var(--kd-ink-muted); }
.header-gradient .value { color: var(--kd-ink); }

/* financial/dimob_detail.html */
.table-dimob th {
    text-transform: none;
    letter-spacing: 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--kd-ink-muted);
    background: var(--kd-surface-50);
    border-bottom: 1px solid var(--kd-line-strong);
}
.table-dimob td { color: var(--kd-ink); }
.table-dimob tbody tr:hover { background: var(--kd-surface-50); }
.table-dimob .month-cell {
    font-family: var(--kd-font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-variant-numeric: tabular-nums;
}

/* financial/dimob_list.html e readjustment_indices.html: cards com cabeçalho em gradiente */
.dimob-card,
.index-card {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.dimob-card:hover,
.index-card:hover {
    transform: none;
    box-shadow: none;
}
.dimob-card .card-header-gradient,
.index-card .card-header-gradient,
.index-card.igpm .card-header-gradient,
.index-card.inpc .card-header-gradient,
.index-card.ipca .card-header-gradient {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.dimob-year,
.index-rate {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.index-accumulated {
    opacity: 1;
    color: var(--kd-ink-muted);
}
.trend-badge {
    border-radius: var(--kd-radius-1);
    font-weight: 500;
}
.trend-badge.up     { background: var(--kd-danger-bg);  color: var(--kd-danger-fg); }   /* alta de índice = reajuste maior */
.trend-badge.down   { background: var(--kd-success-bg); color: var(--kd-success-fg); }
.trend-badge.stable { background: var(--kd-surface-100); color: var(--kd-ink-muted); }
.table-indices th {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--kd-ink-muted);
}
.table-indices .positive { color: var(--kd-danger); }
.table-indices .negative { color: var(--kd-success); }
.sync-info { color: var(--kd-ink-subtle); }

/* financial/dimob_generate.html */
.generate-card {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.generate-card .card-header {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2) var(--kd-radius-2) 0 0;
}

/* financial/income_report.html */
.filter-card {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    box-shadow: none;
}
.filter-card .card-header {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border-bottom: 1px solid var(--kd-surface-200);
}
.req-dot::after { color: var(--kd-danger); }
.kpi {
    border: 1px solid var(--kd-surface-200);
    border-top: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    background: var(--kd-surface-0);
}
.kpi .kpi-lbl {
    font-size: .8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--kd-ink-muted);
    font-weight: 500;
}
.kpi .kpi-val {
    font-weight: 600;
    color: var(--kd-ink);
    font-variant-numeric: tabular-nums;
}
.kpi .kpi-cur { color: var(--kd-ink-subtle); }
.kpi.k-in,
.kpi.k-out,
.kpi.k-net {
    border-top-color: var(--kd-surface-200);
    border-color: var(--kd-surface-200);
    background: var(--kd-surface-0);
}
.kpi.k-out .kpi-val { color: var(--kd-danger); }
.kpi.k-net .kpi-val { color: var(--kd-brand-700); }   /* o único KPI-chave laranja permitido por tela */
.table-report thead th {
    background: var(--kd-surface-50);
    color: var(--kd-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    border-bottom: 1px solid var(--kd-line-strong);
}
.table-report tbody td { font-variant-numeric: tabular-nums; }
.table-report tbody td.first { color: var(--kd-ink); }
.table-report tbody tr.zero td { color: var(--kd-ink-subtle); }
.table-report tbody tr.total td {
    font-weight: 600;
    background: var(--kd-surface-50);
    border-top: 1px solid var(--kd-line-strong);
    color: var(--kd-ink);
}
.table-report .col-net { background: var(--kd-surface-50); }
.table-report tbody tr.total td.col-net { color: var(--kd-brand-700); }
.prop-card {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.prop-card .prop-head {
    background: var(--kd-surface-50);
    border-bottom: 1px solid var(--kd-surface-200);
}
.share-tag {
    background: var(--kd-surface-100);
    color: var(--kd-ink);
    font-weight: 500;
    border-radius: var(--kd-radius-1);
}
.fact-lbl {
    text-transform: none;
    letter-spacing: 0;
    color: var(--kd-ink-muted);
    font-weight: 500;
}

/* financial/bank_accounts.html e list_contract_statements.html */
.bank-card {
    border-left-width: 1px;
    border-left-color: var(--kd-surface-200);
}
.bank-card:hover {
    transform: none;
    box-shadow: none;
}
.bank-card.agency-card { border-left-color: var(--kd-surface-200); }
.pix-badge,
.agency-badge,
.pix-badge-lg {
    background: var(--kd-surface-100);
    color: var(--kd-ink);
    border-radius: var(--kd-radius-1);
}
.nav-tabs .nav-link.active {                   /* bank_accounts.html:41-45 fixava laranja; volta às variáveis do Bootstrap */
    color: var(--tb-nav-tabs-link-active-color);
    border-color: var(--tb-nav-tabs-link-active-border-color);
}
.contract-card {
    border-left-width: 1px;
    border-left-color: var(--kd-surface-200);
}
.contract-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--kd-line);
}
/* pontos de status (.status-dot) usados em pessoas, extratos e usuários — cor cheia semântica.
   Escopado em .status-dot: o nome é gerado (status-{{ contract_status }}) e solto pintaria de
   verde/vermelho qualquer <tr>/<td> que ganhasse a classe; os .status-badge.status-* ficam em C.6. */
.status-dot.status-ativo     { background-color: var(--kd-success); }
.status-dot.status-pendente  { background-color: var(--kd-warning); }
.status-dot.status-encerrado { background-color: var(--kd-ink-subtle); }
.status-dot.status-cancelado,
.status-dot.status-inativo   { background-color: var(--kd-danger); }
.status-dot.active   { background: var(--kd-success); }
.status-dot.inactive { background: var(--kd-danger); }

/* financial/contract_statement.html */
.bank-chip,
.bank-chip.asaas,
.bank-chip.itau {
    border-radius: var(--kd-radius-1);
    background: var(--kd-surface-100);
    color: var(--kd-ink-muted);
}
.text-credit { color: var(--kd-success); }
.text-debit  { color: var(--kd-danger); }

/* financial/bank_account_statement.html */
.account-header {
    background: var(--kd-surface-0);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    color: var(--kd-ink);
}
.account-header::before { display: none; }
.account-number-display {
    font-family: var(--kd-font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}
.day-header {
    background: var(--kd-surface-50);
    border-bottom: 1px solid var(--kd-surface-200);
}
.day-header .day-label { color: var(--kd-ink); }
.entry-row { border-bottom: 1px solid var(--kd-surface-200); }
.entry-row:hover { background: var(--kd-surface-50); }
.entry-icon { border-radius: var(--kd-radius-1); }
.entry-icon.credit   { background: var(--kd-success-bg); color: var(--kd-success-fg); }
.entry-icon.debit    { background: var(--kd-danger-bg);  color: var(--kd-danger-fg); }
.entry-icon.transfer { background: var(--kd-info-bg);    color: var(--kd-info-fg); }
.entry-icon.imported { background: var(--kd-warning-bg); color: var(--kd-warning-fg); }
.entry-desc { color: var(--kd-ink); }
.entry-meta { color: var(--kd-ink-muted); }
.entry-amount .amount-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.entry-amount .amount-value.credit { color: var(--kd-success); }
.entry-amount .amount-value.debit  { color: var(--kd-danger); }
.statement-footer {
    background: var(--kd-surface-50);
    border-top: 1px solid var(--kd-line-strong);
}
.statement-footer .total-row.final {
    font-weight: 600;
    border-top: 1px solid var(--kd-line-strong);
    color: var(--kd-ink);
}

/* documents/index.html */
.folder-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--kd-line);
}
/* !important: o legado (documents/index.html:21) fixa border-color com !important */
.folder-card.active {
    border-color: var(--kd-brand-300) !important;
    background: var(--kd-brand-50);
}
.doc-row:hover { background: var(--kd-surface-50); }
.pdf-icon { color: var(--kd-danger); }
.download-btn {
    background: var(--kd-brand-600);
    border: 1px solid transparent;
    color: var(--kd-brand-fg);
}
.download-btn:hover {
    background: #af4300;                       /* shade 10% de brand-600 */
    color: var(--kd-brand-fg);
}

/* support/list.html, support/new.html, support/detail.html */
.btn-kd {
    background: var(--kd-brand-600);
    border: 1px solid transparent;
    color: var(--kd-brand-fg);
}
.btn-kd:hover {
    background: #af4300;                       /* shade 10% de brand-600 */
    color: var(--kd-brand-fg);
}
.sla-ok      { color: var(--kd-success); }
.sla-warning { color: var(--kd-warning); }
.sla-expired { color: var(--kd-danger); }
.ticket-row:hover { background: var(--kd-surface-50); }
.priority-urgente { border-left-color: var(--kd-danger); }
.priority-alta    { border-left-color: var(--kd-warning); }
.priority-normal  { border-left-color: var(--kd-info); }
.priority-baixa   { border-left-color: var(--kd-ink-subtle); }
.upload-zone { border: 2px dashed var(--kd-line); }
.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--kd-brand-300);
    background: var(--kd-brand-50);
}
.category-option:hover { border-color: var(--kd-line-strong); }
.category-option.selected {
    border-color: var(--kd-brand-300);
    background: var(--kd-brand-50);
}
.timeline-item { border-left-color: var(--kd-surface-200); }
.timeline-item::before {
    background: var(--kd-surface-200);
    border-color: var(--kd-surface-0);
}
.timeline-item.developer::before { background: var(--kd-brand-600); }
.timeline-item.internal::before  { background: var(--kd-ink-subtle); }
.timeline-item.system::before    { background: var(--kd-info); }
.message-bubble { border-radius: var(--kd-radius-2); }
.message-bubble.from-user { background: var(--kd-surface-100); }
.message-bubble.from-developer {
    background: var(--kd-brand-50);
    border-left-color: var(--kd-brand-300);
}
.message-bubble.internal-note {
    background: var(--kd-warning-bg);
    border-left-color: var(--kd-warning);
}
.sla-bar .progress-bar-ok      { background: var(--kd-success); }
.sla-bar .progress-bar-warning { background: var(--kd-warning); }
.sla-bar .progress-bar-expired { background: var(--kd-danger); }
.attachment-thumb:hover { transform: none; }
.ticket-meta-card {
    border-left-width: 1px;
    border-left-color: var(--kd-surface-200);
}

/* admin/users/index.html — usuários do sistema */
.kpi-icon { border-radius: var(--kd-radius-1); }
.role-badge {
    border-radius: var(--kd-radius-1);
    font-size: .75rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    background: var(--kd-surface-100);
    color: var(--kd-ink);
}
/* papel não é estado: os 10 pares de cor viram o badge neutro (texto distingue) */
.role-developer, .role-suporte, .role-admin_company, .role-funcionario, .role-corretor,
.role-proprietario, .role-locatario, .role-fiador, .role-fornecedor, .role-vistoriador {
    background: var(--kd-surface-100);
    color: var(--kd-ink);
}
.agency-text { color: var(--kd-ink-muted); }

/* admin/users/view_user.html */
.profile-header { border-bottom: 1px solid var(--kd-surface-200); }
.profile-avatar { border-color: var(--kd-surface-200); }
.profile-avatar-placeholder {
    border-color: var(--kd-surface-200);
    background: var(--kd-surface-100);
    color: var(--kd-ink);
    font-weight: 600;
}
.info-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: .75rem;
    font-weight: 500;
    color: var(--kd-ink-muted);
}
.info-value { color: var(--kd-ink); }
.info-value.empty { color: var(--kd-ink-subtle); }
.detail-card .card-header { border-bottom-color: var(--kd-surface-200); }
.role-badge-lg {
    border-radius: var(--kd-radius-1);
    background: var(--kd-surface-100);
    color: var(--kd-ink);
}

/* admin/users/edit.html e add.html */
.section-card {
    border: 1px solid var(--kd-surface-200);
    box-shadow: none;
    border-radius: var(--kd-radius-2);
}
.section-card .card-header { border-bottom-color: var(--kd-surface-200); }
.avatar-preview {
    border-color: var(--kd-surface-200);
    box-shadow: none;
}
.spouse-section { animation: none; }
/* edit.html:62-69 põe TODOS os rótulos da página em caixa alta #495057; devolve o rótulo do sistema */
.form-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--kd-ink);
}

/* apps/real-estate/users/view_user.html — ficha de pessoa */
.person-profile-card {
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    box-shadow: none;
}
.person-banner.bg-proprietario,
.person-banner.bg-locatario,
.person-banner.bg-fiador,
.person-banner.bg-corretor,
.person-banner.bg-fornecedor,
.person-banner.bg-vistoriador { background: var(--kd-surface-100); }
.person-avatar {
    border-color: var(--kd-surface-0);
    background: var(--kd-surface-0);
    box-shadow: none;
}
.info-item .info-icon { border-radius: var(--kd-radius-1); }
.info-item .info-label {
    text-transform: none;
    letter-spacing: 0;
    color: var(--kd-ink-muted);
}
.info-item .info-value { color: var(--kd-ink); }
.person-tabs .nav-link { color: var(--kd-ink-muted); }
.person-tabs .nav-link:hover {
    color: var(--kd-ink);
    border-bottom-color: var(--kd-surface-200);
}
.person-tabs .nav-link.active {
    color: var(--kd-ink);
    border-bottom-color: var(--kd-brand-600);
}
.contract-row:hover { background: var(--kd-surface-50); }

/* apps/real-estate/inspections/apps-inspections-detail.html e Web/Vistoria */
.inspection-item {
    border-color: var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
}
.room-header {
    background-color: var(--kd-surface-50);
    border-bottom-color: var(--kd-surface-200);
}
.signature-pad-container,
.inspection-item-dropzone { border-color: var(--kd-line); }
.config-card:hover {
    transform: none;
    box-shadow: none;
}
.icon-btn:hover { transform: none; }           /* apps/settings/property_classification */

/* ---------------------------------------------------------------------------------------------
   C.10 Movimento — o sistema não eleva no hover; animação de entrada por linha sai.
   (prefers-reduced-motion já é respeitado em custom.css:503-510)
   --------------------------------------------------------------------------------------------- */
.kpi-card:hover, .stat-card:hover, .info-card:hover, .chart-card:hover, .folder-card:hover,
.template-card:hover, .template-option:hover, .palette-card:hover, .dimob-card:hover,
.index-card:hover, .bank-card:hover, .contract-card:hover, .api-card:hover, .config-card:hover,
.icon-btn:hover, .panel-option:hover, .btn-add-kd:hover, .action-btn:hover, .btn-kd-gradient:hover,
.btn-auth:hover, .attachment-thumb:hover, .filter-badge:hover, .hover-shadow:hover,
.otp-input:focus { transform: none; }

/* =============================================================================================
   D. BLOQUEADORES DE MODO ESCURO
   Os 80 valores fixos dos 4 CSS KD e os 176 dos <style> de página (inventário §4) foram
   convertidos em tokens nas seções A e C — e todo --kd-* troca de valor sob
   [data-bs-theme=dark], então branco → surface-0, #f8fafc/#f1f5f9 → surface-50/100,
   #e2e8f0/#e5e7eb → surface-200, slate-900/800 → ink, slate-500/600 → ink-muted e
   slate-400 → ink-subtle já valem no escuro sem bloco extra. Aqui ficam só as regras que no
   escuro precisam de valor DIFERENTE do claro.
   ============================================================================================= */
/* sublinhado/anel de marca sobre fundos escuros usa brand-500 (brand-600 dá 3,4:1 ali) */
[data-bs-theme=dark] .alert-tabs .alert-tab.active::after { background: var(--kd-brand-500); }
[data-bs-theme=dark] .person-tabs .nav-link.active { border-bottom-color: var(--kd-brand-500); }
[data-bs-theme=dark] .wizard-step-indicator.active { border-color: var(--kd-brand-500); }
[data-bs-theme=dark] .wizard-step.active .step-icon { border-color: var(--kd-brand-500); }
[data-bs-theme=dark] .filter-badge.active { box-shadow: 0 0 0 2px var(--kd-brand-500); }
/* o X dos cabeçalhos retematizados volta a ser claro (o Bootstrap só faz isso para .btn-close puro) */
[data-bs-theme=dark] .modal-header-kd .btn-close,
[data-bs-theme=dark] .gradient-header .btn-close-white { filter: var(--tb-btn-close-white-filter); }
/* toasts flutuam um passo acima do card no escuro */
[data-bs-theme=dark] .swal2-popup.swal2-toast { background: var(--kd-surface-100); }
/* véus de carregamento: no escuro a página é mais funda que o card */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    [data-bs-theme=dark] .loading-overlay { background: color-mix(in srgb, var(--kd-surface-50) 80%, transparent); }
    [data-bs-theme=dark] .wizard-loading  { background: color-mix(in srgb, var(--kd-surface-50) 88%, transparent); }
}
/* chips/cards selecionados: brand-50 escuro é muito próximo de surface-0 — reforça a borda */
[data-bs-theme=dark] .bank-step.selected,
[data-bs-theme=dark] .billing-type-card.selected,
[data-bs-theme=dark] .template-card.selected,
[data-bs-theme=dark] .template-option.selected,
[data-bs-theme=dark] .category-option.selected,
[data-bs-theme=dark] .amenity-item.selected { border-color: var(--kd-brand-500); }
/* !important: o legado (documents/index.html:21) fixa border-color com !important */
[data-bs-theme=dark] .folder-card.active { border-color: var(--kd-brand-500) !important; }

/* =============================================================================================
   E. PLUGINS — SweetAlert2, Choices.js, flatpickr, Dropzone, SimpleBar
   ============================================================================================= */

/* ---- SweetAlert2 -----------------------------------------------------------------------------
   52 chamadas Swal.fire em 16 templates; 10 valores literais de confirmButtonColor (#FF6A13,
   #0F766E, #EF4444, #d33 …) e 7 de cancelButtonColor viram style="background-color" INLINE no
   botão — só !important vence. Consequência: confirmações destrutivas que passavam vermelho
   sairiam em brand-600; a regra :has() abaixo devolve o vermelho às que têm ícone warning +
   Cancelar visível. Na fase 2 usar customClass: { confirmButton: 'btn btn-danger' } +
   buttonsStyling: false. */
.swal2-popup {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    box-shadow: var(--kd-shadow-2);
}
.swal2-popup .swal2-title {
    color: var(--kd-ink);
    font-weight: 600;
}
.swal2-popup .swal2-html-container { color: var(--kd-ink); }
.swal2-footer {
    border-top-color: var(--kd-surface-200);
    color: var(--kd-ink-muted);
}
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    border-radius: var(--kd-radius-1);
    font-size: .875rem;
    font-weight: 500;
    padding: .4375rem 1rem;
    border: 1px solid transparent;
}
/* !important: confirmButtonColor vira style inline no botão */
.swal2-styled.swal2-confirm {
    background-color: var(--kd-brand-600) !important;
    color: var(--kd-brand-fg);
}
/* Confirmação destrutiva lida da marcação, já que o CSS não lê a intenção: ícone warning + botão
   Cancelar visível (o lib v11.7 mantém o botão no DOM com style="display: none" quando
   showCancelButton é falso — daí o :not([style*=…])). Das 15 chamadas com icon:'warning', as 10
   «Sim, excluir» recuperam o vermelho (inclusive Web/Vistoria/lista-vistorias.html, que em
   produção sai no roxo padrão do lib); os 4 avisos «Atenção» sem Cancelar ficam de fora; 2
   confirmações não destrutivas entram por engano («Sim, gerar» em contracts-list.html:1288 e
   «Sim, confirmar!» em users/user-list.html:327) — corrigir na fase 2 com customClass +
   buttonsStyling:false. :not(.kd-modal): os modais kd-* usam .is-destructive (parte 02).
   Sem :has() a regra inteira cai e o botão fica brand-600. */
.swal2-popup:not(.kd-modal):has(.swal2-icon.swal2-warning):has(.swal2-styled.swal2-cancel:not([style*="display: none"])) .swal2-styled.swal2-confirm {
    background-color: var(--kd-danger) !important;   /* !important: confirmButtonColor inline */
    color: var(--kd-ink-inverse);
}
/* !important: cancelButtonColor inline em 7 templates; cancelar = botão secundário (surface-0 + borda line) */
.swal2-styled.swal2-cancel {
    background-color: var(--kd-surface-0) !important;
    color: var(--kd-ink);
    border-color: var(--kd-line);
}
.swal2-container .swal2-actions .swal2-styled.swal2-cancel:hover {
    background-image: none;                    /* o lib escurece com gradiente preto a 10% */
    background-color: var(--kd-surface-100) !important;   /* !important: idem (inline) */
    border-color: var(--kd-line-strong);
}
/* !important: denyButtonColor também pode vir inline */
.swal2-styled.swal2-deny {
    background-color: var(--kd-danger) !important;
    color: var(--kd-ink-inverse);
}
.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-cancel:focus,
.swal2-styled.swal2-deny:focus { box-shadow: var(--kd-shadow-focus); }
.swal2-close { color: var(--kd-ink-subtle); }
.swal2-close:hover { color: var(--kd-ink); }
.swal2-timer-progress-bar { background-color: var(--kd-surface-200); }
.swal2-icon.swal2-error {
    border-color: var(--kd-danger);
    color: var(--kd-danger);
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--kd-danger); }
.swal2-icon.swal2-info {
    border-color: var(--kd-info);
    color: var(--kd-info);
}
:is(.swal2-file, .swal2-input, .swal2-textarea) {
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-1);
    background: var(--kd-surface-0);
    color: var(--kd-ink);
}
:is(.swal2-file, .swal2-input, .swal2-textarea):focus {
    border-color: var(--kd-focus-ring);
    box-shadow: var(--kd-shadow-focus);
}
.swal2-validation-message {
    background-color: var(--kd-danger-bg);
    color: var(--kd-danger-fg);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .swal2-container.swal2-backdrop-show { background: color-mix(in srgb, var(--kd-overlay) 56%, transparent); }
    [data-bs-theme=dark] .swal2-container.swal2-backdrop-show { background: color-mix(in srgb, var(--kd-overlay) 64%, transparent); }
}
/* toast (flash do partials/base.html:106-161): surface-0, fio, raio 6px, shadow-1; semântica só no ícone */
.swal2-popup.swal2-toast {
    background: var(--kd-surface-0);
    color: var(--kd-ink);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    box-shadow: var(--kd-shadow-1);
}
.swal2-popup.swal2-toast .swal2-title {
    color: var(--kd-ink);
    font-size: .875rem;
    font-weight: 600;
}
.swal2-popup.swal2-toast .swal2-html-container {
    color: var(--kd-ink-muted);
    font-size: .8125rem;
}

/* ---- Choices.js ------------------------------------------------------------------------------- */
.choices__inner {
    background-color: var(--kd-surface-0);
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius-1) !important;   /* !important: app.css:10681 fixa o raio com !important */
    color: var(--kd-ink);
}
.is-focused .choices__inner,
.is-open .choices__inner {
    border-color: var(--kd-focus-ring);
    box-shadow: var(--kd-shadow-focus);
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
    background-color: var(--kd-surface-100);
    color: var(--kd-ink-subtle);
}
.choices[data-type*=select-one]:after { color: var(--kd-ink-muted); }   /* seta (glifo MDI; o legado era #0f1114) */
.choices[data-type*=select-one] .choices__button:focus { box-shadow: var(--kd-shadow-focus); }   /* era ciano #00bcd4 */
.choices__list--dropdown {
    background-color: var(--kd-surface-0);
    border: 1px solid var(--kd-surface-200);
    border-radius: var(--kd-radius-2);
    box-shadow: var(--kd-shadow-1);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--kd-brand-50);
    color: var(--kd-ink);
}
.choices__list--multiple .choices__item,
.choices__list--multiple .choices__item.is-highlighted {
    background-color: var(--kd-brand-600);
    border: 1px solid var(--kd-brand-600);
    color: var(--kd-brand-fg);
    border-radius: var(--kd-radius-1);
}
.is-disabled .choices__list--multiple .choices__item {
    background-color: var(--kd-surface-100);
    border: 1px solid var(--kd-surface-100);
    color: var(--kd-ink-subtle);
}
.choices__heading {
    color: var(--kd-ink-muted);
    border-bottom: 1px solid var(--kd-surface-200);
}
.choices__input::placeholder,
.choices__placeholder { color: var(--kd-ink-subtle); }

/* ---- ApexCharts ---------------------------------------------------------------------------------
   app.css:8593 fixa color: #878a99 !important em TODO descendente do tooltip (2,9:1 sobre surface-0
   no claro, 3,6:1 no escuro) — o --tb-primary de app.css:8582 para título/texto nem chega a valer —
   e app.css:8616 faz o mesmo com a legenda. Tooltip e legenda neutros: texto ink (legenda
   ink-muted), cabeçalho surface-50 com fio surface-200. 75 templates têm gráficos, inclusive os
   dois dashboards de referência. !important: só para vencer os do app.css:8593-8616. */
.apexcharts-tooltip * {
    color: var(--kd-ink) !important;
}
.apexcharts-tooltip.apexcharts-theme-dark * {
    color: var(--kd-ink) !important;           /* o Steex força o fundo em --tb-secondary-bg (surface-0) também no theme-dark */
}
.apexcharts-tooltip .apexcharts-tooltip-title {
    background-color: var(--kd-surface-50) !important;
    border-bottom: 1px solid var(--kd-surface-200) !important;
}
.apexcharts-legend-text {
    color: var(--kd-ink-muted) !important;
}

/* ---- flatpickr ----------------------------------------------------------------------------------
   O Steex pinta o cabeçalho do mês e a linha dos dias da semana com --tb-primary (um bloco
   laranja): aqui o cabeçalho vira surface-0/ink e só o dia selecionado leva brand-600. */
.flatpickr-calendar {
    background: var(--kd-surface-0);
    border-radius: var(--kd-radius-2);
    box-shadow: 0 0 0 1px var(--kd-surface-200), var(--kd-shadow-1);
}
.flatpickr-months {
    background-color: var(--kd-surface-0);
    border-radius: var(--kd-radius-2) var(--kd-radius-2) 0 0;
}
.flatpickr-months .flatpickr-month {
    color: var(--kd-ink);
    fill: var(--kd-ink);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--kd-ink-muted);
    fill: var(--kd-ink-muted);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: var(--kd-ink); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--kd-ink); }
.flatpickr-current-month span.cur-month { font-weight: 600; }
.flatpickr-current-month span.cur-month:hover { background: var(--kd-surface-100); }
.flatpickr-current-month input.cur-year { color: var(--kd-ink); }
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--kd-ink); }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: var(--kd-surface-0);
    color: var(--kd-ink);
}
.flatpickr-weekdays {
    background-color: var(--kd-surface-50);
    border-bottom: 1px solid var(--kd-surface-200);
}
span.flatpickr-weekday {
    background: var(--kd-surface-50);
    color: var(--kd-ink-muted);
}
.flatpickr-day {
    color: var(--kd-ink);
    border-radius: var(--kd-radius-1);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background-color: var(--kd-surface-100);
    border-color: var(--kd-surface-100);
}
.flatpickr-day.today {
    border-color: var(--kd-brand-300);
    background-color: transparent;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    border-color: var(--kd-brand-300);
    background-color: var(--kd-surface-100);
    color: var(--kd-ink);
}
.flatpickr-calendar .flatpickr-day:is(.selected, .startRange, .endRange) {
    background: var(--kd-brand-600);
    border-color: var(--kd-brand-600);
    color: var(--kd-brand-fg);
}
.flatpickr-calendar .flatpickr-day.inRange {
    background-color: var(--kd-brand-50);
    border-color: var(--kd-brand-50);
    box-shadow: 5px 0 0 var(--kd-brand-50), -5px 0 0 var(--kd-brand-50);
    color: var(--kd-ink);
}
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--kd-ink); }
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: var(--kd-surface-100); }
.flatpickr-input[readonly] { background-color: var(--kd-surface-0); }

/* ---- Dropzone ----------------------------------------------------------------------------------- */
.dropzone {
    border: 2px dashed var(--kd-line);
    background: var(--kd-surface-0);
    border-radius: var(--kd-radius-2);
}
.dropzone:hover,
.dropzone.dz-drag-hover {
    border-color: var(--kd-brand-300);
    background: var(--kd-brand-50);
}
.dropzone .dz-message { color: var(--kd-ink-muted); }
.dropzone .dz-preview .dz-image {
    background: var(--kd-surface-100);
    border-radius: var(--kd-radius-3);          /* miniatura de foto = radius-3 */
}
.dropzone .dz-preview .dz-remove { color: var(--kd-ink-muted); }
.dropzone .dz-preview .dz-remove:hover { color: var(--kd-danger); }

/* ---- SimpleBar (sidebar e áreas roláveis) --------------------------------------------------------- */
.simplebar-scrollbar:before { background: var(--kd-ink-subtle); }
[data-simplebar-track=primary] .simplebar-scrollbar:before { background: var(--kd-brand-600); }

/* =============================================================================================
   KD Imóveis · Prumo — kd-theme.css · parte 03: shell — sidebar única (.kd-sidebar)
   ---------------------------------------------------------------------------------------------
   Marcação em partials/sidebar.html (Steex .app-menu.navbar-menu + classe kd-sidebar). Só o que
   o Steex não dá: cabeçalho alinhado à esquerda com o símbolo a 28px e «KD Imóveis» em 600;
   ícone do item ativo em brand-500 (o peso fill é trocado pelo kd-shell.js); ponto de 6px
   brand-500 no subitem ativo; nota «modo visualização» do suporte; glifo do botão de fixar o
   menu (ph-record -> ph-record-fill no estado sm-hover). Títulos de grupo: tipografia já na
   parte 01 (.menu-title: 12px, +0.06em, 500) e a caixa alta vem do próprio Steex. Cores só por
   token — o tema escuro segue sozinho.
   ============================================================================================= */
.kd-sidebar .navbar-brand-box {
  text-align: left;
  padding: 0 20px;
}
[data-layout=vertical]:is([data-sidebar-size=sm], [data-sidebar-size=sm-hover]) .kd-sidebar .navbar-brand-box {
  text-align: center;
  padding: 0;
}
[data-layout=vertical][data-sidebar-size=sm-hover] .kd-sidebar.navbar-menu:hover .navbar-brand-box {
  text-align: left;
  padding: 0 20px;
}
.kd-sidebar .logo img {
  vertical-align: middle;
}
.kd-sidebar__wordmark {
  display: inline-block;
  margin-left: 10px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--kd-sidebar-active-fg);
  vertical-align: middle;
}
.kd-sidebar .navbar-nav .nav-link.active > [class^="ph-"],
.kd-sidebar .navbar-nav .nav-link.active > [class*=" ph-"] {
  color: var(--kd-brand-500);                       /* único laranja puro permitido: sobre grafite */
}
.kd-sidebar .navbar-nav .nav-sm .nav-link.active::before {
  width: 6px;
  height: 6px;
  left: 3.75px;
  top: 16.25px;
  background-color: var(--kd-brand-500);
  opacity: 1;
}
.kd-sidebar__note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--kd-sidebar-fg-muted);
}
.kd-sidebar__note > [class^="ph-"] {
  font-size: 16px;
}
[data-layout=vertical][data-sidebar-size=sm-hover] .kd-sidebar .btn-vertical-sm-hover i.ph-record::before {
  content: "\fd7e";                                  /* ph-record-fill: menu fixado recolhido */
}

/* ============================================================================================
   Correção 2026-10-18 — linhas do razão em modo card (.kd-table-cards, < 768px)
   No modo card cada <tr> vira um bloco: a altura das linhas do razão (40px; 32px densa; 44px
   com pointer: coarse), que numa linha de tabela funciona como mínimo, passaria a ser altura
   FIXA e os cards se sobreporiam no celular. Mesmo seletor com .kd-table-cards, mais tarde na
   cascata e com especificidade igual ou maior que todas as regras de altura acima.
   ============================================================================================ */
@media (max-width: 767.98px) {
  .table-ledger.kd-table-cards > tbody > tr,
  .table-ledger.is-dense.kd-table-cards > tbody > tr,
  .table-ledger.table-sm.kd-table-cards > tbody > tr {
    height: auto;
  }
}

/* ============================================================================================
   Correção 2026-10-18 — ícone do menu da topbar sempre com três traços
   No celular e no tablet o app.js do Steex põe .open no .hamburger-icon e o ícone girava até
   virar uma seta (→), que não comunica "menu". Mesmos seletores do app.css, mais tarde na
   cascata: o estado aberto passa a desenhar o mesmo ícone do estado fechado.
   ============================================================================================ */
.hamburger-icon.open {
  transform: none;
}
.hamburger-icon.open span:nth-child(1) {
  left: 0;
  top: -1px;
  width: 80%;
  transform: none;
}
.hamburger-icon.open span:nth-child(2) {
  left: 0;
  top: 6px;
  width: 100%;
  transform: none;
}
.hamburger-icon.open span:nth-child(3) {
  left: 0;
  top: auto;
  bottom: -1px;
  width: 60%;
  transform: none;
}