/* =====================================================================================================
   crm-ui.css — padrão visual único (iOS) dos 3 portais: cert1 (certifique), cert2 (safeweb) e CAP.
   Item 18, Fundação + 1ª onda (03/10/2026). ARQUIVO IDÊNTICO em certifique-online e safeweb-online
   (conferido por scripts/local/crm-ui-padrao.test.mjs). Sem !important.

   Ativação: <html data-portal="cert1|cert2|cap"> (definido por assets/js/crm-ui.js a partir do tenant) e as classes
   de tema que o menu.js já usa (theme-dim = meio escuro, theme-dark = escuro; sem classe = claro).

   Camadas (a ordem abaixo vale para a página toda; este arquivo é a PRIMEIRA folha de cada tela):
     ui-base       tokens (cores por tema e por portal, tipografia, espaçamento, tamanhos)
     legacy        CSS antigo (base/layout/smart3-theme/... e <style> embutido), sem !important
     legacy-imp    declarações que eram !important no CSS antigo; as genéricas que a ponte substitui
                   foram rebaixadas a normais, as específicas de tela continuam !important (removidas onda a onda)
     ui-bridge     ponte: tokens antigos (--smart3-*, --color-*, --apple-*, --crm-field-*) apontam para --ui-*,
                   e as classes existentes (app-button*, campos, tabelas, ios-modal-*, status-badge...) ganham o padrão
     ui-portal     específico de portal (cap-ios.css: só o que é do CAP, consumindo os tokens --ui-*)
     ui-components componentes novos .ui-* (e os .ios-* do CAP-UI como apelidos)
   ===================================================================================================== */
@layer ui-base, legacy, legacy-imp, ui-bridge, ui-portal, ui-components;

/* ===================================== 1. TOKENS ===================================== */
@layer ui-base {
  :root {
    color-scheme: light;
    /* superfícies */
    --ui-bg: #F2F2F7;
    --ui-surface: #FFFFFF;
    --ui-surface-2: #F2F2F7;
    --ui-fill: #E9E9EB;
    --ui-material: rgba(255, 255, 255, 0.86);
    /* texto (contraste AA conferido: evid/contrast-tokens.json) */
    --ui-label: #1C1C1E;
    --ui-label-2: #5E5E63;       /* substitui o #78858F antigo (3,78:1) */
    --ui-placeholder: #6E6E73;
    --ui-disabled: #8E8E93;
    /* linhas */
    --ui-separator: #D1D1D6;
    --ui-field-border: #86868B;  /* >= 3:1 sobre cartão e fundo (WCAG 1.4.11) */
    /* estados */
    --ui-success: #1E7834; --ui-success-tint: #E3F5E8; --ui-success-fill: #1E7834;
    --ui-warning: #A35200; --ui-warning-tint: #FFF1DE; --ui-warning-fill: #A35200; /* fundo com texto branco (5,6:1), igual nos 3 temas */
    --ui-danger: #C4180C;  --ui-danger-tint: #FDE7E6;  --ui-destructive: #D70015;
    --ui-neutral: #5E5E63; --ui-neutral-tint: #ECECEE;
    /* marca (padrão = CAP; cada portal redefine abaixo) */
    --ui-accent: #0071E3;        /* fundo do botão primário (texto branco) */
    --ui-accent-text: #0067CF;   /* marca como texto/link/anel de foco */
    --ui-accent-tint: #E6F1FC;   /* fundo de selo/seleção da marca */
    --ui-on-accent: #FFFFFF;
    --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ui-accent-text) 40%, transparent);
    --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --ui-shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.22);
    --ui-shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.16);
    --ui-scrim: rgba(0, 0, 0, 0.38);

    /* tipografia: fonte do sistema (SF no Apple, Segoe UI no Windows, Roboto no Android) */
    --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ui-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --ui-scale: 1;               /* preferência de acessibilidade "tamanho do texto" */
    /* escala de 7 tamanhos (px inteiros; 16 só em campo no celular) */
    --ui-fs-largetitle: calc(28px * var(--ui-scale)); --ui-lh-largetitle: calc(34px * var(--ui-scale));
    --ui-fs-title: calc(20px * var(--ui-scale));      --ui-lh-title: calc(26px * var(--ui-scale));
    --ui-fs-headline: calc(17px * var(--ui-scale));   --ui-lh-headline: calc(22px * var(--ui-scale));
    --ui-fs-body: calc(15px * var(--ui-scale));       --ui-lh-body: calc(20px * var(--ui-scale));
    --ui-fs-callout: calc(14px * var(--ui-scale));    --ui-lh-callout: calc(20px * var(--ui-scale));
    --ui-fs-footnote: calc(13px * var(--ui-scale));   --ui-lh-footnote: calc(18px * var(--ui-scale));
    --ui-fs-caption: calc(12px * var(--ui-scale));    --ui-lh-caption: calc(16px * var(--ui-scale));
    --ui-fs-control: calc(15px * var(--ui-scale));
    /* 3 pesos */
    --ui-w-regular: 400; --ui-w-semibold: 600; --ui-w-bold: 700;

    /* grade de 8 (4 só dentro de componentes) */
    --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 24px; --ui-s6: 32px; --ui-s7: 48px;
    --ui-r-control: 8px; --ui-r-card: 12px; --ui-r-sheet: 14px; --ui-r-pill: 999px;

    /* controles: altura única */
    --ui-control-h: 36px;        /* botão, campo, select, segmentado (computador) */
    --ui-control-h-sm: 28px;     /* só ações dentro de linha de tabela (computador) */
    --ui-row-h: 44px;
    --ui-gutter: 24px;

    /* R9 (pedido W5): séries de gráfico acessíveis (marca >= 3:1 sobre a superfície; pares separáveis em deutan/protan) */
    --ui-series-good: #1E7834; --ui-series-info: #0A6CD6; --ui-series-bad: #D70015; --ui-chart-track: var(--ui-fill);
    /* R9 (decisão do coordenador, pedido W3): selo roxo categórico (Integração, mês anterior) e 8 cores de agente (>= 3:1 sobre superfície e fundo; ΔE76 >= 16 entre pares; item18-impl/palette-check.mjs) */
    --ui-violet-text: #7334AD; --ui-violet-bg: #F1E8FA;
    --ui-series-agent-1: #0A6CD6; --ui-series-agent-2: #1E7834; --ui-series-agent-3: #B04A00; --ui-series-agent-4: #7E3FBF; --ui-series-agent-5: #00777A; --ui-series-agent-6: #B0247A; --ui-series-agent-7: #8A5A00; --ui-series-agent-8: #4F5BD5;
  }
  :root.theme-dim, :root.theme-dark, :root[data-contrast="high"] { --ui-series-good: #2E9E6F; --ui-series-info: #3893FA; --ui-series-bad: #FF3B29; --ui-series-agent-1: #64B0FF; --ui-series-agent-2: #4CD964; --ui-series-agent-3: #FFA347; --ui-series-agent-4: #C9A0FF; --ui-series-agent-5: #4FD1D9; --ui-series-agent-6: #FF85C2; --ui-series-agent-7: #E8C547; --ui-series-agent-8: #A3AEFF; --ui-violet-text: #CFA8FF; --ui-violet-bg: #2F2140; }
  :root[data-font-size="large"] { --ui-scale: 1.125; }
  :root[data-font-size="xlarge"] { --ui-scale: 1.25; }

  /* marca por portal — claro (decisão de 03/10: uma cor por portal) */
  :root[data-portal="cert1"] { --ui-accent: #2E3192; --ui-accent-text: #2E3192; --ui-accent-tint: #EAEAF4; }
  :root[data-portal="cert2"] { --ui-accent: #186090; --ui-accent-text: #186090; --ui-accent-tint: #E8EFF4; }
  :root[data-portal="cap"]   { --ui-accent: #0071E3; --ui-accent-text: #0067CF; --ui-accent-tint: #E6F1FC; }

  /* meio escuro ("dim") */
  :root.theme-dim {
    color-scheme: dark;
    --ui-bg: #2C2C2E; --ui-surface: #3A3A3C; --ui-surface-2: #444446; --ui-fill: #4A4A4D; --ui-material: rgba(58, 58, 60, 0.88);
    --ui-label: #FFFFFF; --ui-label-2: #D1D1D6; --ui-placeholder: #C2C2C7; --ui-disabled: #8E8E93;
    --ui-separator: #545458; --ui-field-border: #98989D;
    --ui-success: #4CD964; --ui-success-tint: #24412C;
    --ui-warning: #FFC062; --ui-warning-tint: #4A3A20;
    --ui-danger: #FFA39E;  --ui-danger-tint: #4D2826;
    --ui-neutral: #D1D1D6; --ui-neutral-tint: #4A4A4D;
    --ui-violet-text: #DCC2FF; --ui-violet-bg: #4B3A5E;
    --ui-accent: #0071E3; --ui-accent-text: #92C8FF; --ui-accent-tint: #47525F;
    --ui-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.07);
    --ui-shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.5);
    --ui-scrim: rgba(0, 0, 0, 0.5);
  }
  :root.theme-dim[data-portal="cert1"] { --ui-accent: #4448C4; --ui-accent-text: #C0C0EB; --ui-accent-tint: #50505B; }
  :root.theme-dim[data-portal="cert2"] { --ui-accent: #1D6FA6; --ui-accent-text: #93CAED; --ui-accent-tint: #47525B; }

  /* escuro */
  :root.theme-dark {
    color-scheme: dark;
    --ui-bg: #000000; --ui-surface: #1C1C1E; --ui-surface-2: #2C2C2E; --ui-fill: #2E2E31; --ui-material: rgba(28, 28, 30, 0.88);
    --ui-label: #FFFFFF; --ui-label-2: #AEAEB2; --ui-placeholder: #98989D; --ui-disabled: #636366;
    --ui-separator: #38383A; --ui-field-border: #7C7C80;
    --ui-success: #30D158; --ui-success-tint: #14301C;
    --ui-warning: #FFB340; --ui-warning-tint: #3A2A10;
    --ui-danger: #FF6961;  --ui-danger-tint: #3B1715;
    --ui-neutral: #AEAEB2; --ui-neutral-tint: #2C2C2E;
    --ui-violet-text: #CFA8FF; --ui-violet-bg: #2F2140;
    --ui-accent: #0071E3; --ui-accent-text: #399BFF; --ui-accent-tint: #203247;
    --ui-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.07);
    --ui-shadow-sheet: 0 24px 64px rgba(0, 0, 0, 0.6);
    --ui-scrim: rgba(0, 0, 0, 0.6);
  }
  :root.theme-dark[data-portal="cert1"] { --ui-accent: #4448C4; --ui-accent-text: #9194DD; --ui-accent-tint: #303140; }
  :root.theme-dark[data-portal="cert2"] { --ui-accent: #1D6FA6; --ui-accent-text: #41A0DF; --ui-accent-tint: #213341; }

  /* alto contraste (preferência de acessibilidade existente) */
  :root[data-contrast="high"] {
    color-scheme: dark;
    --ui-bg: #000000; --ui-surface: #0A0A0A; --ui-surface-2: #1C1C1E; --ui-fill: #2C2C2E; --ui-material: #000000;
    --ui-label: #FFFFFF; --ui-label-2: #E5E5EA; --ui-placeholder: #D1D1D6; --ui-separator: #8E8E93; --ui-field-border: #D1D1D6;
    --ui-success: #7EE2A8; --ui-success-tint: #0F2A1A; --ui-warning: #FFD27A; --ui-warning-tint: #33270F; --ui-danger: #FF9B91; --ui-danger-tint: #3B1715;
    --ui-neutral: #E5E5EA; --ui-neutral-tint: #1C1C1E;
    --ui-accent: #0058B0; --ui-accent-text: #8CC4FF; --ui-accent-tint: #0B2A4A;
    --ui-focus-ring: 0 0 0 3px #FACC15;
  }

  /* celular / toque: 44 px de alvo e campo com 16 px (evita o zoom do iOS) */
  @media (max-width: 767px), (pointer: coarse) {
    :root { --ui-control-h: 44px; --ui-control-h-sm: 36px; --ui-fs-control: calc(16px * var(--ui-scale)); }
  }
  @media (max-width: 767px) {
    :root { --ui-fs-largetitle: calc(24px * var(--ui-scale)); --ui-lh-largetitle: calc(30px * var(--ui-scale)); --ui-gutter: 16px; }
  }
}

/* ===================================== 2. PONTE ===================================== */
@layer ui-bridge {
  /* ---------- 2.1 tokens antigos -> --ui-* (todas as telas mudam sem tocar no HTML) ---------- */
  :root {
    --font-system: var(--ui-font);
    --color-bg: var(--ui-bg);
    --color-surface: var(--ui-surface);
    --color-glass: var(--ui-surface);
    --color-glass-strong: var(--ui-surface);
    --color-surface-muted: var(--ui-surface-2);
    --color-surface-hover: var(--ui-surface-2);
    --color-bg-field: var(--ui-surface);
    --color-text: var(--ui-label);
    --color-text-main: var(--ui-label);
    --color-muted: var(--ui-label-2);
    --color-text-muted: var(--ui-label-2);
    --color-primary: var(--ui-accent-text);
    --color-primary-strong: var(--ui-accent-text);
    --color-success: var(--ui-success);
    --color-warning: var(--ui-warning);
    --color-danger: var(--ui-danger);
    --color-border: var(--ui-separator);
    --color-border-strong: var(--ui-field-border);
    --color-focus: var(--ui-accent-text);
    --apple-blue: var(--ui-accent);
    --apple-red: var(--ui-danger);
    --apple-green: var(--ui-success);
    --shadow-soft: var(--ui-shadow-card);
    --shadow-subtle: var(--ui-shadow-card);
    --radius-sm: var(--ui-r-control);
    --radius-md: var(--ui-r-card);
    --radius-lg: var(--ui-r-sheet);
    --radius-button: var(--ui-r-control);
    --border-radius: var(--ui-r-control);
    --border-radius-lg: var(--ui-r-card);
    --smart3-bg: var(--ui-bg);
    --smart3-surface: var(--ui-surface);
    --smart3-surface-soft: var(--ui-surface-2);
    --smart3-text: var(--ui-label);
    --smart3-muted: var(--ui-label-2);
    --smart3-border: var(--ui-separator);
    --smart3-primary: var(--ui-accent);
    --smart3-primary-hover: color-mix(in srgb, var(--ui-accent) 86%, #000);
    --smart3-navy: var(--ui-accent);
    --smart3-radius: var(--ui-r-card);
    --smart3-shadow: var(--ui-shadow-card);
    --crm-field-background: var(--ui-surface);
    --crm-field-foreground: var(--ui-label);
    --crm-field-placeholder: var(--ui-placeholder);
    --text-primary: var(--ui-label);
    --text-secondary: var(--ui-label-2);
  }

  /* ---------- 2.2 base ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body { font-family: var(--ui-font); color: var(--ui-label); -webkit-font-smoothing: antialiased; }
  body:not(.login-screen) { background: var(--ui-bg); background-attachment: scroll; }
  :focus-visible { outline: 2px solid var(--ui-accent-text); outline-offset: 2px; }
  :root[data-focus-highlight="on"] :focus-visible { outline: 4px solid #FACC15; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(250, 204, 21, 0.24); }
  .skip-link { background: var(--ui-accent); color: var(--ui-on-accent); border-radius: var(--ui-r-control); font: var(--ui-w-semibold) var(--ui-fs-body)/var(--ui-lh-body) var(--ui-font); }

  /* títulos */
  main h1, .module-hero h1, .module-hero-content h1 { font-family: var(--ui-font); font-size: var(--ui-fs-largetitle); line-height: var(--ui-lh-largetitle); font-weight: var(--ui-w-bold); letter-spacing: -0.02em; }
  main h2 { font-family: var(--ui-font); font-size: var(--ui-fs-headline); line-height: var(--ui-lh-headline); font-weight: var(--ui-w-semibold); letter-spacing: -0.01em; }
  main h3 { font-family: var(--ui-font); font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); font-weight: var(--ui-w-semibold); }
  /* títulos herdam a cor do contêiner (ex.: cabeçalho colorido do calendário); só o título da página é fixado */
  .module-hero :is(h1, h2), .module-hero-content h1 { color: var(--ui-label); }
  .module-hero-content p, .module-hero p { font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); font-weight: var(--ui-w-regular); color: var(--ui-label-2); }
  .module-eyebrow { font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); font-weight: var(--ui-w-semibold); letter-spacing: 0; text-transform: none; color: var(--ui-accent-text); }
  .module-section-heading p { font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); color: var(--ui-label-2); }

  /* cabeçalho da página = título grande iOS (sem cartão) */
  .module-hero { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: var(--ui-s2) 0 var(--ui-s4); margin: 0 0 var(--ui-s2); }

  /* cartões */
  .app-card, .data-panel, .kpi-card, .module-workspace, .daily-summary, .dashboard-hero-card, .ios-calendar-widget, .crm-search-panel {
    background: var(--ui-surface); color: var(--ui-label); border: 0; border-radius: var(--ui-r-card); box-shadow: var(--ui-shadow-card); backdrop-filter: none;
  }
  .module-hero.app-card { background: transparent; box-shadow: none; }
  .app-card.padded, .data-panel.padded, .module-workspace { padding: var(--ui-s5); }
  .metric-card { padding: var(--ui-s3) var(--ui-s4); }
  .metric-card .metric-label { font-size: var(--ui-fs-footnote); font-weight: var(--ui-w-semibold); color: var(--ui-label-2); text-transform: none; letter-spacing: 0; }
  .metric-card strong { font-size: var(--ui-fs-title); line-height: var(--ui-lh-title); font-weight: var(--ui-w-bold); font-variant-numeric: tabular-nums; }
  .crm-search-panel { padding: var(--ui-s4); border: 0; }

  /* barra superior e rodapé (ícones coloridos do menu mantidos) */
  .app-topbar { background: var(--ui-material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ui-separator); box-shadow: none; }
  .app-topbar .nav-icon-label { color: var(--ui-label); font-weight: var(--ui-w-semibold); font-size: calc(var(--ui-fs-caption) * var(--menu-font-scale, 1)); line-height: var(--ui-lh-caption); letter-spacing: 0; }
  .app-dock, .status-dock { font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); }
  .app-dock .dock-item :is(span, a), .app-dock .dock-brand, .status-dock .dock-item :is(span, a) { font-size: var(--ui-fs-caption); }
  .app-dock .dock-item strong, .status-dock .dock-item strong { font-size: var(--ui-fs-footnote); font-weight: var(--ui-w-semibold); }
  .accessibility-panel { color: var(--ui-label); font-size: var(--ui-fs-callout); }
  .accessibility-panel :is(strong, b) { font-size: var(--ui-fs-body); font-weight: var(--ui-w-semibold); }
  .accessibility-panel :is(small, p, .accessibility-row-copy span) { font-size: var(--ui-fs-footnote); color: var(--ui-label-2); }
  .menu-cluster.is-active .nav-icon-label, .menu-cluster.is-active { color: var(--ui-accent-text); }
  .menu-cluster:hover, .menu-cluster:focus-within, .menu-cluster.is-active { background: var(--ui-fill); }
  .app-topbar .menu-dropdown { background: var(--ui-material); border-color: var(--ui-separator); box-shadow: var(--ui-shadow-pop); }
  .app-topbar .menu-dropdown .mega-menu-item { color: var(--ui-label); }
  .app-topbar .menu-dropdown .mega-menu-item:hover, .app-topbar .menu-dropdown .mega-menu-item:focus-visible, .app-topbar .menu-dropdown .mega-menu-item.is-active { background: var(--ui-surface); border-color: var(--ui-separator); }
  .mega-menu-eyebrow { color: var(--ui-accent-text); font-weight: var(--ui-w-bold); }
  .mega-menu-intro h2, .mega-menu-item-copy strong { color: var(--ui-label); }
  .mega-menu-intro p, .mega-menu-item-copy > span { color: var(--ui-label-2); }
  .mega-menu-item-icon { background: var(--ui-accent-tint); color: var(--ui-accent-text); }
  .topbar-action { background: var(--ui-fill); color: var(--ui-label); border-color: transparent; }
  .app-dock, .status-dock { background: var(--ui-material); color: var(--ui-label-2); border-top: 1px solid var(--ui-separator); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: none; }
  .app-dock :is(.app-dock-inner, .dock-item, .dock-item span, .dock-brand), .status-dock :is(.dock-item, .dock-item span) { color: var(--ui-label-2); }
  .app-dock strong, .status-dock strong, .dock-item strong { color: var(--ui-label); }
  .app-dock .dock-item .dock-avatar, .dock-avatar { background: var(--ui-accent); color: var(--ui-on-accent); }
  .tenant-badge { background: var(--ui-fill); color: var(--ui-label); border-color: transparent; }
  .app-dock a, .status-dock a, .app-footer a { color: var(--ui-accent-text); }
  .app-footer { color: var(--ui-label-2); background: var(--ui-material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--ui-separator); }
  /* ---------- 2.3 botões: altura única, sem quebra de linha ---------- */
  /* :where() = especificidade zero: regras mais específicas da ponte (ações em tabela, ícones) vencem */
  :where(.app-button, .app-button-primary, .app-button-secondary, .app-button-danger, .primary-button, .button, button.secondary, button.ghost, .ios-btn, .ios-btn-primary, .ios-btn-secondary, .report-btn, .ios-page-btn, .app-button-tab, .info-btn, .btn-info-pop, .parceiros-tab-btn, .pessoal-tab-btn, .tab-btn, .quick-action-btn, main button[type="submit"], main button[class="crm-action-button--blue"]:not([data-day]), main button[class="crm-action-button--green"]:not([data-day])) {
    box-sizing: border-box; height: var(--ui-control-h); min-height: var(--ui-control-h); max-height: none;
    padding-block: 0; padding-inline: var(--ui-s4); border-radius: var(--ui-r-control);
    font-family: var(--ui-font); font-size: var(--ui-fs-control); font-weight: var(--ui-w-semibold); line-height: 1.2; letter-spacing: 0; text-transform: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none; transform: none; text-decoration: none; vertical-align: middle;
  }
  /* As classes semânticas que o menu.js põe nas ações (crm-action-button--blue/--green) só pintavam de fato os botões
     de página (ios-page-btn, abas, ícones, botões sem classe); nos app-button-secondary prevalecia o secundário.
     A ponte reproduz isso com a cor da marca do portal. */
  .crm-action-button--blue, .crm-action-button--green { text-decoration: none; }
  /* primário (1 por área): cor da marca do portal com texto branco */
  :is(.app-button, .app-button-primary, .primary-button, .button.primary, .ios-btn-primary, .ios-btn--primary, .report-btn-primary, main button[type="submit"]:not(.app-button-secondary):not(.app-button-danger), button[class="crm-action-button--blue"]:not([data-day]):not(.cap-calendar *), :is(.ios-page-btn, .app-button-tab, .btn-info-pop, .info-btn, .quick-action-btn, .input-action-button, .ios-calendar-nav-btn).crm-action-button--blue) {
    background: var(--ui-accent); color: var(--ui-on-accent); border: 1px solid transparent;
  }
  :is(.app-button, .app-button-primary, .primary-button, .button.primary, .ios-btn-primary, .ios-btn--primary, .report-btn-primary, main button[type="submit"]:not(.app-button-secondary):not(.app-button-danger), button[class="crm-action-button--blue"]:not([data-day]):not(.cap-calendar *), :is(.ios-page-btn, .app-button-tab, .btn-info-pop, .info-btn, .quick-action-btn, .input-action-button, .ios-calendar-nav-btn).crm-action-button--blue):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--ui-accent) 88%, #000); color: var(--ui-on-accent); border-color: transparent;
  }
  /* secundário: preenchimento cinza, texto da marca */
  :is(.app-button-secondary, .button:not(.primary):not(.danger), button.secondary, button.ghost, .ios-btn, .ios-btn-secondary, .report-btn, .ios-page-btn, .app-button-tab, .info-btn, .btn-info-pop):not(.ios-btn--primary):not(.report-btn-primary):not(:is(.ios-page-btn, .app-button-tab, .btn-info-pop, .info-btn).crm-action-button--blue):not(:is(.ios-page-btn, .report-btn).crm-action-button--green) {
    background: var(--ui-fill); color: var(--ui-accent-text); border: 1px solid transparent;
  }
  :is(.app-button-secondary, .button:not(.primary):not(.danger), button.secondary, button.ghost, .ios-btn, .ios-btn-secondary, .report-btn, .ios-page-btn, .app-button-tab, .info-btn, .btn-info-pop):not(.ios-btn--primary):not(.report-btn-primary):not(:is(.ios-page-btn, .app-button-tab, .btn-info-pop, .info-btn).crm-action-button--blue):not(:is(.ios-page-btn, .report-btn).crm-action-button--green):is(:hover, :focus-visible) {
    background: var(--ui-accent-tint); color: var(--ui-accent-text); border-color: transparent; /* R9 (pedido W3): texto da marca sobre o tom da marca >= 4,5:1 nos 3 temas */
  }
  /* ações de arquivo (download/upload/importar/exportar) nos botões de página: verde */
  :is(.ios-page-btn, .report-btn, button[class="crm-action-button--green"]).crm-action-button--green { background: var(--ui-success-fill); color: #FFFFFF; border: 1px solid transparent; }
  :is(.ios-page-btn, .report-btn, button[class="crm-action-button--green"]).crm-action-button--green:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--ui-success-fill) 86%, #000); color: #FFFFFF; }
  /* destrutivo */
  :is(.app-button-danger, .ios-btn--destructive-solid) { background: var(--ui-destructive); color: #FFFFFF; border: 1px solid transparent; }
  :is(.app-button-danger):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--ui-destructive) 86%, #000); color: #FFFFFF; }
  .ios-btn.ios-btn--destructive { background: var(--ui-danger-tint); color: var(--ui-danger); }
  .ios-btn.ios-btn--plain { background: transparent; color: var(--ui-accent-text); padding-inline: var(--ui-s2); }
  .ios-btn.ios-btn--success { background: var(--ui-success-fill); color: #FFFFFF; }
  /* desabilitado */
  :is(.app-button, .app-button-primary, .app-button-secondary, .app-button-danger, .primary-button, .button, .ios-btn, .report-btn, .ios-page-btn, main button[type="submit"]):is(:disabled, [aria-disabled="true"]) {
    opacity: 0.45; cursor: not-allowed; filter: none;
  }
  /* abas como controle segmentado */
  :is(.app-button-tab, .tab-btn, .parceiros-tab-btn, .pessoal-tab-btn):not(.active) { background: var(--ui-fill); color: var(--ui-label); }
  :is(.app-button-tab, .tab-btn, .parceiros-tab-btn, .pessoal-tab-btn).active { background: var(--ui-accent); color: var(--ui-on-accent); }
  /* ícone (quadrado) */
  :is(.ios-page-btn, .btn-info-pop) { width: var(--ui-control-h); min-width: var(--ui-control-h); padding-inline: 0; display: inline-grid; place-items: center; }
  /* ações dentro de linha de tabela: 28 px (36 no celular) */
  :is(td, .table-actions, .row-actions) :is(.app-button, .app-button-primary, .app-button-secondary, .app-button-danger, .ios-btn, .report-btn, .cp-view, .cp-edit, .cg-edit),
  :is(.placeholder-table, .app-table, .crm-data-table, .renewal-table, .validation-table) td button:not([role="switch"]):not([class*="toggle"]),
  .ios-calendar-nav-btn {
    height: var(--ui-control-h-sm); min-height: var(--ui-control-h-sm); padding-inline: var(--ui-s3); font-size: var(--ui-fs-footnote); line-height: 1;
  }
  td:has(> :is(.app-button, .app-button-secondary, .app-button-danger, .ios-btn)), td:has(> div > :is(.app-button, .app-button-secondary, .app-button-danger, .ios-btn)) { white-space: nowrap; }
  /* grupos de ação */
  .crm-action-toolbar, .module-actions { gap: var(--ui-s2); align-items: center; }
  .crm-action-toolbar > :is(button, a, label.app-button, label.app-button-secondary) { min-height: var(--ui-control-h); }
  label.app-button, label.app-button-secondary, a:is(.app-button, .app-button-primary, .app-button-secondary, .app-button-danger):not([hidden]) { display: inline-flex; align-items: center; justify-content: center; }

  /* ---------- 2.4 campos: mesma altura do botão ---------- */
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), select:not([multiple]):not([size]:not([size="1"]))):not(.app-topbar *):not(.accessibility-panel *):not(.cmd-palette *) {
    box-sizing: border-box; height: var(--ui-control-h); min-height: var(--ui-control-h); max-height: none;
    padding-block: 0; border: 1px solid var(--ui-field-border); border-radius: var(--ui-r-control);
    background-color: var(--ui-surface); color: var(--ui-label); -webkit-text-fill-color: var(--ui-label); caret-color: var(--ui-label);
    font-family: var(--ui-font); font-size: var(--ui-fs-control); font-weight: var(--ui-w-regular); line-height: 1.25; letter-spacing: 0;
    box-shadow: none; vertical-align: middle;
  }
  select:not([multiple]):not([size]:not([size="1"])):not(.app-topbar *):not(.accessibility-panel *) {
    -webkit-appearance: none; appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238E8E93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
  }
  :is(textarea, select[multiple], select[size]:not([size="1"])):not(.app-topbar *):not(.accessibility-panel *) {
    box-sizing: border-box; border: 1px solid var(--ui-field-border); border-radius: var(--ui-r-control);
    background-color: var(--ui-surface); color: var(--ui-label); -webkit-text-fill-color: var(--ui-label); caret-color: var(--ui-label);
    font-family: var(--ui-font); font-size: var(--ui-fs-control); line-height: var(--ui-lh-body); box-shadow: none;
  }
  textarea:not(.app-topbar *):not(.accessibility-panel *) { min-height: 88px; padding-block: var(--ui-s2); }
  :is(input, textarea)::placeholder { color: var(--ui-placeholder); -webkit-text-fill-color: var(--ui-placeholder); opacity: 1; }
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus { border-color: var(--ui-accent-text); box-shadow: var(--ui-focus-ring); outline: none; }
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):is(:disabled, [readonly]) { background-color: var(--ui-surface-2); }
  :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--ui-danger); }
  select option { background-color: var(--ui-surface); color: var(--ui-label); -webkit-text-fill-color: var(--ui-label); }
  input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--ui-accent); }
  /* campos dentro de linha de tabela acompanham as ações da linha */
  td :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select:not([multiple])) { height: var(--ui-control-h-sm); min-height: var(--ui-control-h-sm); font-size: var(--ui-fs-footnote); }
  /* login: alvos maiores */
  .login-screen .hero-copy :is(.eyebrow, .login-feature-list li, .login-feature-list span) { color: #FFFFFF; }

  /* rótulos de campo: 13/600 secundário, acima do campo */
  :is(.field-group > label, .filter-group > span, .filter-group > label, .filter-item > label, .readonly-field > span, .readonly-field > label, .crm-search-field > span, .crm-search-panel label, .form-grid > label, .form-field > label, .schema-field-grid label > span) {
    font-family: var(--ui-font); font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); font-weight: var(--ui-w-semibold); letter-spacing: 0; text-transform: none; color: var(--ui-label-2);
  }

  /* campo legado em "caixinha" (.readonly-field) vira campo iOS: rótulo acima, sem moldura, alinhado pela base */
  .readonly-field { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .readonly-field > :is(span, label) { margin: 0; }
  /* painel aninhado em cartão (.schema-panel) vira grupo simples */
  .schema-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .schema-panel > h3 { margin: 0 0 var(--ui-s3); font-size: var(--ui-fs-body); font-weight: var(--ui-w-semibold); color: var(--ui-label); }

  /* ---------- 2.5 barras de filtro: ações alinhadas pela BASE dos campos ---------- */
  :is(.crm-search-panel, .filter-grid, .filter-bar, .module-filters, .filter-panel, .filters, .cap-filter-bar, .filter-row, .toolbar-filters) { align-items: end; }
  .crm-filter-action { min-height: 0; justify-content: flex-end; }
  .crm-filter-action > button, .crm-filter-button { min-height: var(--ui-control-h); }

  /* ---------- 2.6 tabelas ---------- */
  :is(.placeholder-table, .ios-table, .app-table, .crm-data-table, .validation-table, .renewal-table) { font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); }
  :is(.placeholder-table, .ios-table, .app-table, .crm-data-table, .validation-table, .renewal-table, .data-panel table, .app-card table) thead th {
    font-family: var(--ui-font); font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); font-weight: var(--ui-w-semibold);
    text-transform: none; letter-spacing: 0; color: var(--ui-label-2); background: var(--ui-surface-2);
    padding: var(--ui-s2) var(--ui-s4); border-top: 0; border-bottom: 1px solid var(--ui-separator);
  }
  :is(.placeholder-table, .ios-table, .app-table, .crm-data-table, .validation-table, .renewal-table, .data-panel table, .app-card table) tbody td {
    font-family: var(--ui-font); font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout);
    color: var(--ui-label); padding: var(--ui-s3) var(--ui-s4); border-bottom: 1px solid var(--ui-separator); background: transparent;
  }
  :is(.placeholder-table, .ios-table, .app-table, .crm-data-table, .validation-table, .renewal-table, .data-panel table, .app-card table) tbody td:has(> :is(button, .app-button, .app-button-secondary, .app-button-danger, a.app-button-secondary)) { padding-block: var(--ui-s2); }
  :is(.placeholder-table, .ios-table, .app-table, .crm-data-table, .validation-table, .renewal-table, .data-panel table, .app-card table) tbody tr:nth-child(even) td { background: transparent; }
  :is(.placeholder-table, .ios-table, .app-table, .crm-data-table, .validation-table, .renewal-table, .data-panel table, .app-card table) tbody tr:hover td { background: var(--ui-surface-2); }
  :is(.placeholder-table, .ios-table, .app-table, .crm-data-table, .validation-table, .renewal-table, .data-panel table, .app-card table) tbody tr:last-child td { border-bottom-color: transparent; }
  :is(.data-table-container, .table-shell, .table-wrapper, .placeholder-table-wrap) { border-color: var(--ui-separator); background: var(--ui-surface); border-radius: var(--ui-r-control); }
  /* celular: tabela vira lista de cartões (rótulo de cada célula vem de data-label, posto por crm-ui.js) */
  @media (max-width: 767px) {
    table[data-ui-stack] { display: block; width: 100%; min-width: 0; border: 0; }
    table[data-ui-stack] thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    table[data-ui-stack] tbody, table[data-ui-stack] tfoot { display: block; width: 100%; }
    table[data-ui-stack] tr { display: block; width: 100%; padding: var(--ui-s3) var(--ui-s4); border-bottom: 1px solid var(--ui-separator); background: var(--ui-surface); }
    table[data-ui-stack] tbody tr:hover td { background: transparent; }
    table[data-ui-stack] tbody td, table[data-ui-stack] tfoot td {
      display: flex; justify-content: space-between; align-items: center; gap: var(--ui-s3); width: 100%; min-width: 0; max-width: none; height: auto; min-height: 0;
      padding: var(--ui-s1) 0; border: 0; background: transparent; text-align: right; white-space: normal; overflow-wrap: anywhere;
    }
    table[data-ui-stack] tbody td::before, table[data-ui-stack] tfoot td::before { content: attr(data-label); flex: 0 0 auto; max-width: 48%; text-align: left; color: var(--ui-label-2); font-size: var(--ui-fs-footnote); font-weight: var(--ui-w-semibold); overflow-wrap: normal; }
    table[data-ui-stack] td:not([data-label])::before, table[data-ui-stack] td[data-label=""]::before { content: none; }
    table[data-ui-stack] td:not([data-label]), table[data-ui-stack] td[data-label=""] { justify-content: flex-start; text-align: left; }
    table[data-ui-stack] td[colspan] { justify-content: center; text-align: center; }
    table[data-ui-stack] td:has(> :is(button, .app-button, .app-button-secondary, .app-button-danger)) { flex-wrap: wrap; justify-content: flex-end; }
    table[data-ui-stack] td:has(> :is(button, .app-button, .app-button-secondary, .app-button-danger))::before { margin-right: auto; }
    :is(.placeholder-table-wrap, .data-table-container, .table-shell, .table-wrapper):has(> table[data-ui-stack]) { overflow-x: visible; overflow-y: visible; max-height: none; border: 0; background: transparent; } /* R9 (pedido W4): sem altura máxima, a lista de cartões não é cortada */
  }

  /* ---------- 2.7 selos ---------- */
  .status-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; height: auto; padding: 2px var(--ui-s2); border: 0; border-radius: var(--ui-r-pill); font-family: var(--ui-font); font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); font-weight: var(--ui-w-semibold); letter-spacing: 0; text-transform: none; white-space: nowrap; background: var(--ui-accent-tint); color: var(--ui-accent-text); }
  .status-badge.success, .status-badge.ativo, .status-badge.paid { background: var(--ui-success-tint); color: var(--ui-success); }
  .status-badge.warning, .status-badge.pending { background: var(--ui-warning-tint); color: var(--ui-warning); }
  .status-badge.danger, .status-badge.error { background: var(--ui-danger-tint); color: var(--ui-danger); }
  .status-badge.neutral, .status-badge.inactive, .status-badge.inativo { background: var(--ui-neutral-tint); color: var(--ui-neutral); }
  .status-badge.black { background: var(--ui-label); color: var(--ui-surface); }
  .dashboard-hero-card .status-badge { width: auto; max-width: max-content; }

  /* ---------- 2.8 modais -> folha (sheet) ---------- */
  .ios-modal-backdrop, .modal-overlay { background-color: var(--ui-scrim); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :is(.ios-modal-sheet, .modal-card, .modal-overlay > .modal-content) { background: var(--ui-surface); color: var(--ui-label); border: 0; border-radius: var(--ui-r-sheet); box-shadow: var(--ui-shadow-sheet); }
  :is(.ios-modal-header, .modal-card .modal-header, .modal-content .modal-header) { min-height: 56px; padding: var(--ui-s3) var(--ui-s3) var(--ui-s3) var(--ui-s5); background: transparent; border-bottom: 1px solid var(--ui-separator); gap: var(--ui-s3); }
  :is(.ios-modal-header, .modal-header) :is(h1, h2, h3) { margin: 0; font-family: var(--ui-font); font-size: var(--ui-fs-headline); line-height: var(--ui-lh-headline); font-weight: var(--ui-w-semibold); letter-spacing: -0.01em; color: var(--ui-label); }
  :is(.ios-modal-close-btn, .modal-close, .close-modal, .modal-header .close-btn, .ios-sheet-close) {
    width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%;
    background: var(--ui-fill); color: var(--ui-label-2); font: var(--ui-w-semibold) 18px/1 var(--ui-font); display: grid; place-items: center; flex: none; cursor: pointer;
  }
  .ios-modal-footer, .modal-footer, [data-modal-actions] { gap: var(--ui-s2); justify-content: flex-end; align-items: center; }
  dialog:not(.ios-sheet) { background: var(--ui-surface); color: var(--ui-label); border: 0; border-radius: var(--ui-r-sheet); box-shadow: var(--ui-shadow-sheet); }
  dialog::backdrop { background: var(--ui-scrim); }
  /* painel que recebe o foco ao abrir (crm-ui.js): sem anel em volta da folha inteira */
  :is(.ios-modal-sheet, .modal-card, .modal-content, dialog, [role="dialog"])[tabindex="-1"]:focus { outline: none; }
  .ios-grouped-section { background: var(--ui-surface-2); border: 0; border-radius: var(--ui-r-card); }
  .ios-grouped-row { border-bottom-color: var(--ui-separator); }
  .ios-grouped-row label { font-size: var(--ui-fs-body); font-weight: var(--ui-w-regular); color: var(--ui-label); }
  .ios-section-title { font-size: var(--ui-fs-footnote); font-weight: var(--ui-w-regular); color: var(--ui-label-2); text-transform: uppercase; letter-spacing: 0.02em; }
  /* celular: folha de baixo, botões em largura total */
  @media (max-width: 767px) {
    .ios-modal-backdrop, .modal-overlay { align-items: end; place-items: end stretch; padding: 0; }
    :is(.ios-modal-sheet, .modal-card) { width: 100%; max-width: 100%; max-height: 92vh; margin: 0; border-radius: var(--ui-r-sheet) var(--ui-r-sheet) 0 0; }
    .ios-modal-sheet::before { content: ""; display: block; flex: none; width: 36px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: var(--ui-separator); }
    :is(.ios-modal-footer, .modal-footer, [data-modal-actions]) > :is(button, .app-button, .app-button-secondary, .app-button-danger) { flex: 1 1 0; }
  }

  /* ---------- 2.9 avisos ---------- */
  .message-area.error, .message-box.error, .form-error { color: var(--ui-danger); }
  .message-area.success, .message-box.success { color: var(--ui-success); }

  /* ---------- 2.10 login ---------- */
  .login-screen .hero-copy { background: linear-gradient(145deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 72%, #000)); }
  .login-screen .hero-copy .lead { color: #FFFFFF; }
  .login-screen .login-card .section-title { font-family: var(--ui-font); font-size: var(--ui-fs-largetitle); line-height: var(--ui-lh-largetitle); font-weight: var(--ui-w-bold); letter-spacing: -0.02em; }
  .login-screen .login-hero-title { font-family: var(--ui-font); font-weight: var(--ui-w-bold); }
  .login-screen .app-footer { color: var(--ui-label-2); }

  /* ---------- 2.11 cromo comum (R9 onda 2): menu, gaveta, painel de acessibilidade e rodapé na escala de 7 tamanhos e 3 pesos ---------- */
  .app-topbar .menu-cluster .nav-icon-label, .app-topbar .menu-cluster.is-active .nav-icon-label { font-weight: var(--ui-w-semibold); }
  .app-topbar .menu-dropdown .mega-menu-intro h2 { font-size: var(--ui-fs-title); line-height: var(--ui-lh-title); font-weight: var(--ui-w-bold); letter-spacing: -0.01em; }
  .app-topbar .menu-dropdown .mega-menu-eyebrow { font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); font-weight: var(--ui-w-bold); letter-spacing: 0; }
  .app-topbar .menu-dropdown .mega-menu-item-icon { font-size: var(--ui-fs-title); line-height: 1; font-weight: var(--ui-w-bold); }
  .app-topbar .menu-dropdown .mega-menu-item-copy strong { font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); font-weight: var(--ui-w-semibold); }
  .app-topbar .menu-dropdown .mega-menu-item-copy > span { font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); font-weight: var(--ui-w-regular); }
  .app-topbar .menu-dropdown .mega-menu-item-arrow { font-size: var(--ui-fs-title); line-height: 1; font-weight: var(--ui-w-regular); }
  .ios-drawer-submenu-link { font-weight: var(--ui-w-regular); }
  .accessibility-panel .accessibility-panel-header h2 { font-size: var(--ui-fs-headline); line-height: var(--ui-lh-headline); font-weight: var(--ui-w-semibold); }
  .accessibility-panel button { font-weight: var(--ui-w-semibold); }
  .app-dock .dock-brand a, .status-dock .dock-brand a { font-weight: var(--ui-w-bold); }
  /* fechar de modal: o "×" na escala (20) */
  :is(.ios-modal-close-btn, .modal-close, .close-modal, .modal-header .close-btn, .ios-sheet-close) { font-size: var(--ui-fs-title); font-weight: var(--ui-w-regular); }
  /* interruptor iOS e aviso flutuante (toast) usados nos cadastros */
  .ios-switch-title { font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); font-weight: var(--ui-w-semibold); color: var(--ui-label); }
  .ios-switch-desc { font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); font-weight: var(--ui-w-regular); color: var(--ui-label-2); }
  .ios-toast-content { color: var(--ui-label); font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); }
  .ios-toast-content strong { font-size: var(--ui-fs-headline); line-height: var(--ui-lh-headline); font-weight: var(--ui-w-semibold); }

  .app-footer, .app-footer :is(span, p, small, strong, b) { font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); font-weight: var(--ui-w-regular); }
  .app-footer a { font-size: var(--ui-fs-caption); font-weight: var(--ui-w-semibold); }
  /* R9 (pedido W4): valor mascarado/destacado na escala de pesos (era 900 no layout.css) */
  .masked-value { font-weight: var(--ui-w-semibold); }
  /* R9: avisos flutuantes (toast) e telas de bloqueio/entrada na escala */
  .ios-toast-content pre { font-family: var(--ui-font-mono); font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); white-space: pre-wrap; overflow-wrap: anywhere; }
  :is(main, .app-card, .feature-panel) .eyebrow { font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); font-weight: var(--ui-w-semibold); letter-spacing: 0; color: var(--ui-accent-text); }
  :is(main, .app-card, .feature-panel) .lead { font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); font-weight: var(--ui-w-regular); color: var(--ui-label-2); }
  .feature-panel h1 { font-size: var(--ui-fs-largetitle); line-height: var(--ui-lh-largetitle); font-weight: var(--ui-w-bold); }
  /* ---------- 2.12 rodapé de tabela (totais e paginação Anterior/Próxima) ---------- */
  .ios-table-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3) var(--ui-s4); flex-wrap: wrap; margin-top: var(--ui-s4); }
  .ios-table-stats { display: flex; align-items: center; gap: var(--ui-s2); flex-wrap: wrap; font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); color: var(--ui-label-2); }
  .ios-table-stats strong { color: var(--ui-label); font-weight: var(--ui-w-semibold); font-variant-numeric: tabular-nums; }
  .ios-pagination-controls { display: flex; align-items: center; gap: var(--ui-s2); font-size: var(--ui-fs-callout); color: var(--ui-label); font-variant-numeric: tabular-nums; }
}

/* ===================================== 3. COMPONENTES ===================================== */
@layer ui-components {
  .ui-num, .tabular { font-variant-numeric: tabular-nums; }
  .ui-muted { color: var(--ui-label-2); }

  /* página */
  .ui-page { max-width: 1280px; margin: 0 auto; padding: var(--ui-s5) var(--ui-gutter) var(--ui-s7); display: flex; flex-direction: column; gap: var(--ui-s5); }
  .ui-page-header, .ios-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ui-s2) var(--ui-s4); flex-wrap: wrap; margin: 0 0 var(--ui-s4); }
  .ios-page-header > div:first-child { min-width: 0; flex: 1 1 320px; }
  .ios-page-header p, .ui-subtitle { margin: 0; color: var(--ui-label-2); font-size: var(--ui-fs-body); }
  .ui-actions, .ios-page-header .ios-actions { display: flex; gap: var(--ui-s2); flex-wrap: wrap; align-items: center; }
  .ui-eyebrow, .ios-eyebrow { display: inline-block; font: var(--ui-w-semibold) var(--ui-fs-footnote)/var(--ui-lh-footnote) var(--ui-font); color: var(--ui-accent-text); margin: 0 0 var(--ui-s1); }

  /* cartão e listas agrupadas */
  .ui-card, .ios-card { background: var(--ui-surface); border-radius: var(--ui-r-card); box-shadow: var(--ui-shadow-card); padding: var(--ui-s5); }
  .ios-card { padding: var(--ui-s4); margin: 0 0 var(--ui-s4); }
  :is(.ui-card, .ios-card) > header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); flex-wrap: wrap; margin-bottom: var(--ui-s2); }
  .ios-section-label { font-size: var(--ui-fs-footnote); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ui-label-2); margin: var(--ui-s4) var(--ui-s4) 6px; }
  .ios-group { background: var(--ui-surface); border-radius: var(--ui-r-card); overflow: hidden; margin: 0 0 var(--ui-s4); }
  .ios-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s4); min-height: var(--ui-row-h); padding: var(--ui-s2) var(--ui-s4); position: relative; }
  .ios-row + .ios-row::before { content: ""; position: absolute; top: 0; left: var(--ui-s4); right: 0; border-top: 1px solid var(--ui-separator); }
  .ios-row > .ios-row-label { color: var(--ui-label-2); font-size: var(--ui-fs-body); flex: 0 0 auto; }
  .ios-row > .ios-row-value { color: var(--ui-label); font-size: var(--ui-fs-body); text-align: right; min-width: 0; overflow-wrap: anywhere; }
  a.ios-row { color: inherit; text-decoration: none; }
  a.ios-row::after { content: "›"; color: var(--ui-label-2); font-size: 20px; line-height: 1; }
  .ios-row-title { font-weight: var(--ui-w-semibold); }
  .ios-row-sub, .ios-sub { display: block; font-size: var(--ui-fs-footnote); color: var(--ui-label-2); }
  .ios-grid-2, .ui-grid--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--ui-s4); }

  /* botões novos */
  .ui-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; height: var(--ui-control-h); padding: 0 var(--ui-s4); border: 0; border-radius: var(--ui-r-control); font: var(--ui-w-semibold) var(--ui-fs-control)/1 var(--ui-font); white-space: nowrap; cursor: pointer; text-decoration: none; background: var(--ui-fill); color: var(--ui-accent-text); }
  .ui-btn--primary { background: var(--ui-accent); color: var(--ui-on-accent); }
  .ui-btn--plain { background: transparent; padding: 0 var(--ui-s2); }
  .ui-btn--destructive { background: var(--ui-destructive); color: #FFFFFF; }
  .ui-btn--destructive-soft { background: var(--ui-danger-tint); color: var(--ui-danger); }
  .ui-btn--icon { width: var(--ui-control-h); padding: 0; }
  .ui-btn--sm { height: var(--ui-control-h-sm); padding: 0 var(--ui-s3); font-size: var(--ui-fs-footnote); }
  .ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
  .ios-btn--small { height: var(--ui-control-h-sm); min-height: var(--ui-control-h-sm); padding-inline: var(--ui-s3); font-size: var(--ui-fs-footnote); }

  /* campos novos */
  .ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .ui-field > label, .ui-label { font: var(--ui-w-semibold) var(--ui-fs-footnote)/var(--ui-lh-footnote) var(--ui-font); color: var(--ui-label-2); }
  .ui-hint { font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); color: var(--ui-label-2); }
  .ui-error { font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); color: var(--ui-danger); }
  .ui-input-group { display: flex; gap: var(--ui-s2); align-items: end; }
  .ui-input-group > input { flex: 1; min-width: 0; }

  /* barra de filtros nova */
  .ui-filterbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ui-s3) var(--ui-s4); align-items: end; }
  .ui-filterbar-actions { display: flex; gap: var(--ui-s2); justify-content: flex-end; }
  @media (max-width: 767px) { .ui-filterbar { grid-template-columns: 1fr 1fr; } .ui-filterbar-actions { grid-column: 1 / -1; } .ui-filterbar-actions > * { flex: 1 1 0; } }

  /* segmentado */
  /* segmentado: os segmentos têm a altura do controle (36/44) e o "respiro" de 2 px é desenhado por dentro,
     para alinharem com campos e botões vizinhos */
  .ui-segmented, .ios-segmented { display: inline-flex; height: var(--ui-control-h); padding: 0; gap: 0; background: var(--ui-fill); border-radius: var(--ui-r-control); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  :is(.ui-segmented, .ios-segmented) button { flex: 0 0 auto; height: var(--ui-control-h); min-height: var(--ui-control-h); border: 0; background: transparent; color: var(--ui-label); font: var(--ui-w-semibold) var(--ui-fs-footnote)/1 var(--ui-font); padding: 0 var(--ui-s3); border-radius: var(--ui-r-control); cursor: pointer; white-space: nowrap; box-shadow: none; }
  :is(.ui-segmented, .ios-segmented) button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-label); box-shadow: inset 0 0 0 2px var(--ui-fill), 0 1px 3px rgba(0, 0, 0, 0.12); }
  :root:is(.theme-dark, .theme-dim) :is(.ui-segmented, .ios-segmented) button[aria-pressed="true"] { background: #636366; color: #FFFFFF; }

  /* tabela nova */
  .ui-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); }
  .ui-table th { text-align: left; font: var(--ui-w-semibold) var(--ui-fs-footnote)/var(--ui-lh-footnote) var(--ui-font); color: var(--ui-label-2); background: var(--ui-surface-2); padding: var(--ui-s2) var(--ui-s4); white-space: nowrap; border-bottom: 1px solid var(--ui-separator); }
  .ui-table td { padding: var(--ui-s3) var(--ui-s4); height: var(--ui-row-h); border-bottom: 1px solid var(--ui-separator); vertical-align: middle; }
  .ui-table .num, .ios-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* selos novos e do CAP-UI */
  .ui-badge, .ios-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px var(--ui-s2); border-radius: var(--ui-r-pill); font: var(--ui-w-semibold) var(--ui-fs-caption)/var(--ui-lh-caption) var(--ui-font); white-space: nowrap; background: var(--ui-neutral-tint); color: var(--ui-neutral); }
  .ui-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  :is(.ui-badge--success, .ios-badge--green) { background: var(--ui-success-tint); color: var(--ui-success); }
  :is(.ui-badge--warning, .ios-badge--orange) { background: var(--ui-warning-tint); color: var(--ui-warning); }
  :is(.ui-badge--danger, .ios-badge--red) { background: var(--ui-danger-tint); color: var(--ui-danger); }
  :is(.ui-badge--info, .ios-badge--blue) { background: var(--ui-accent-tint); color: var(--ui-accent-text); }
  .ios-badge--gray { background: var(--ui-neutral-tint); color: var(--ui-neutral); }
  .ui-badge--violet { background: var(--ui-violet-bg); color: var(--ui-violet-text); }
  /* cor de agente/categoria: <span class="ui-agent" style="--ui-agent: var(--ui-series-agent-3)"> ou .ui-agent--1..8 */
  .ui-agent--1 { --ui-agent: var(--ui-series-agent-1); } .ui-agent--2 { --ui-agent: var(--ui-series-agent-2); } .ui-agent--3 { --ui-agent: var(--ui-series-agent-3); } .ui-agent--4 { --ui-agent: var(--ui-series-agent-4); }
  .ui-agent--5 { --ui-agent: var(--ui-series-agent-5); } .ui-agent--6 { --ui-agent: var(--ui-series-agent-6); } .ui-agent--7 { --ui-agent: var(--ui-series-agent-7); } .ui-agent--8 { --ui-agent: var(--ui-series-agent-8); }
  .ui-agent-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-agent, var(--ui-series-agent-1)); flex: none; }
  .ui-agent-bar { box-shadow: inset 3px 0 0 var(--ui-agent, var(--ui-series-agent-1)); }
  /* ação verde (arquivo/confirmação) */
  .ui-btn--success { background: var(--ui-success-fill); color: #FFFFFF; }

  /* indicadores */
  .ui-kpis, .ios-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--ui-s2); margin: 0 0 var(--ui-s4); }
  .ui-kpi, .ios-kpi { background: var(--ui-surface); border-radius: var(--ui-r-card); box-shadow: var(--ui-shadow-card); padding: var(--ui-s3) var(--ui-s4); display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; color: inherit; }
  :is(.ui-kpi, .ios-kpi) > span { font-size: var(--ui-fs-footnote); font-weight: var(--ui-w-semibold); color: var(--ui-label-2); }
  :is(.ui-kpi, .ios-kpi) > strong { font-size: var(--ui-fs-title); line-height: var(--ui-lh-title); font-weight: var(--ui-w-bold); color: var(--ui-label); font-variant-numeric: tabular-nums; }
  :is(.ui-kpi, .ios-kpi) > small { font-size: var(--ui-fs-caption); color: var(--ui-label-2); }
  .ios-kpi--red > strong { color: var(--ui-danger); }
  .ios-kpi--green > strong { color: var(--ui-success); }
  .ios-kpi--blue { box-shadow: inset 3px 0 0 var(--ui-accent), var(--ui-shadow-card); }
  .ios-kpi--orange { box-shadow: inset 3px 0 0 var(--ui-warning), var(--ui-shadow-card); }
  .ios-kpi--green-bar { box-shadow: inset 3px 0 0 var(--ui-success), var(--ui-shadow-card); }
  @media (max-width: 767px) { .ui-kpis, .ios-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* avisos e vazio */
  .ui-note, .ios-note { display: flex; gap: var(--ui-s3); align-items: flex-start; padding: var(--ui-s3) var(--ui-s4); border-radius: var(--ui-r-card); background: var(--ui-accent-tint); color: var(--ui-label); margin: 0 0 var(--ui-s4); font-size: var(--ui-fs-callout); }
  :is(.ui-note--warning, .ios-note--warning) { background: var(--ui-warning-tint); }
  :is(.ui-note--danger, .ios-note--danger) { background: var(--ui-danger-tint); }
  :is(.ui-note, .ios-note) strong { display: block; font-size: var(--ui-fs-body); margin-bottom: 2px; }
  /* R9 (pedido W6): regras internas valem para .ui-note e .ios-note */
  :is(.ui-note, .ios-note) :is(p, ol, ul) { margin: 4px 0 0; font-size: var(--ui-fs-callout); }
  :is(.ui-note, .ios-note) :is(ol, ul) { padding-left: 20px; }
  :is(.ui-note, .ios-note) a { color: var(--ui-accent-text); font-weight: var(--ui-w-semibold); }
  :is(.ui-note, .ios-note) :is(.ui-note-icon, .ios-note-icon) { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-accent); color: var(--ui-on-accent); font: var(--ui-w-bold) var(--ui-fs-footnote)/1 var(--ui-font); }
  :is(.ui-note--warning, .ios-note--warning) :is(.ui-note-icon, .ios-note-icon) { background: var(--ui-warning); color: var(--ui-surface); }
  :is(.ui-note--danger, .ios-note--danger) :is(.ui-note-icon, .ios-note-icon) { background: var(--ui-destructive); color: #FFFFFF; }
  .ui-empty, .ios-empty { padding: var(--ui-s5) var(--ui-s4); text-align: center; color: var(--ui-label-2); font-size: var(--ui-fs-callout); }
  :is(.ui-empty, .ios-empty) strong { display: block; color: var(--ui-label); font-size: var(--ui-fs-body); margin-bottom: 4px; }
  /* estados padrão (R9): vazio / carregando / erro — em bloco (.ui-empty) ou na célula de tabela (<td colspan class="ui-empty">) */
  td.ui-empty, .ui-empty--loading, .ui-empty--error { font-weight: var(--ui-w-regular); }
  td.ui-empty { padding: var(--ui-s5) var(--ui-s4); text-align: center; white-space: normal; }
  .ui-empty--loading::before { content: ""; display: inline-block; vertical-align: -3px; width: 14px; height: 14px; margin-right: var(--ui-s2); border: 2px solid var(--ui-separator); border-top-color: var(--ui-accent-text); border-radius: 50%; animation: ui-spin 0.8s linear infinite; }
  .ui-empty--error, :is(.ui-empty, .ios-empty).ui-empty--error, :is(.ui-empty, .ios-empty).ui-empty--error strong { color: var(--ui-danger); }
  @keyframes ui-spin { to { transform: rotate(360deg); } }

  /* ---------- R9: utilitários de layout (grade de 8) e de texto — substituem style="" nas telas ---------- */
  .ui-stack { display: flex; flex-direction: column; gap: var(--ui-s3); min-width: 0; }
  .ui-stack--sm { gap: var(--ui-s2); }
  .ui-stack--lg { gap: var(--ui-s5); }
  .ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2) var(--ui-s3); min-width: 0; }
  .ui-row--start { align-items: flex-start; }
  .ui-row--end { justify-content: flex-end; }
  .ui-row--between { justify-content: space-between; }
  .ui-row--nowrap { flex-wrap: nowrap; }
  .ui-row--base { align-items: flex-end; }
  .ui-grow { flex: 1 1 auto; min-width: 0; }
  .ui-shrink-0 { flex-shrink: 0; }
  .ui-m-0 { margin: 0; }
  .ui-mt-0 { margin-top: 0; } .ui-mt-1 { margin-top: var(--ui-s1); } .ui-mt-2 { margin-top: var(--ui-s2); } .ui-mt-3 { margin-top: var(--ui-s3); } .ui-mt-4 { margin-top: var(--ui-s4); } .ui-mt-5 { margin-top: var(--ui-s5); }
  .ui-mb-0 { margin-bottom: 0; } .ui-mb-1 { margin-bottom: var(--ui-s1); } .ui-mb-2 { margin-bottom: var(--ui-s2); } .ui-mb-3 { margin-bottom: var(--ui-s3); } .ui-mb-4 { margin-bottom: var(--ui-s4); } .ui-mb-5 { margin-bottom: var(--ui-s5); }
  .ui-p-0 { padding: 0; }
  .ui-w-full { width: 100%; }
  .ui-maxw-xs { max-width: 120px; } .ui-maxw-sm { max-width: 200px; } .ui-maxw-md { max-width: 320px; } .ui-maxw-lg { max-width: 480px; }
  .ui-text-left { text-align: left; } .ui-text-center { text-align: center; } .ui-text-right { text-align: right; }
  .ui-nowrap { white-space: nowrap; }
  .ui-break { overflow-wrap: anywhere; word-break: normal; }
  .ui-pre { white-space: pre-wrap; }
  .ui-mono { font-family: var(--ui-font-mono); }
  .ui-text-title { font-size: var(--ui-fs-title); line-height: var(--ui-lh-title); font-weight: var(--ui-w-bold); }
  .ui-text-headline { font-size: var(--ui-fs-headline); line-height: var(--ui-lh-headline); font-weight: var(--ui-w-semibold); }
  .ui-text-body { font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); }
  .ui-text-callout { font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); }
  .ui-text-footnote { font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); }
  .ui-text-caption { font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); }
  .ui-text-regular { font-weight: var(--ui-w-regular); } .ui-text-strong { font-weight: var(--ui-w-semibold); } .ui-text-bold { font-weight: var(--ui-w-bold); }
  .ui-text-primary { color: var(--ui-label); } .ui-text-secondary { color: var(--ui-label-2); } .ui-text-accent { color: var(--ui-accent-text); }
  .ui-text-success { color: var(--ui-success); } .ui-text-warning { color: var(--ui-warning); } .ui-text-danger { color: var(--ui-danger); }
  .ui-divider { border: 0; border-top: 1px solid var(--ui-separator); margin: var(--ui-s4) 0; }

  /* grade de formulário de 12 colunas (6/4/3 -> 6 no tablet -> 1 no celular) */
  .ui-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ui-s4) var(--ui-s5); align-items: end; }
  .ui-form-grid > * { grid-column: span 6; min-width: 0; }
  .ui-form-grid > .ui-span-3 { grid-column: span 3; } .ui-form-grid > .ui-span-4 { grid-column: span 4; } .ui-form-grid > .ui-span-8 { grid-column: span 8; } .ui-form-grid > .ui-span-12 { grid-column: 1 / -1; }
  @media (max-width: 1023px) { .ui-form-grid > :is(.ui-span-3, .ui-span-4) { grid-column: span 6; } .ui-form-grid > .ui-span-8 { grid-column: 1 / -1; } }
  @media (max-width: 767px) { .ui-form-grid { grid-template-columns: 1fr; gap: var(--ui-s3); } .ui-form-grid > * { grid-column: 1 / -1; } }

  /* rodapé de tabela: totais à esquerda, Anterior/Próxima à direita */
  .ui-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3) var(--ui-s4); flex-wrap: wrap; margin-top: var(--ui-s4); font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); color: var(--ui-label-2); }
  .ui-pager strong { color: var(--ui-label); font-weight: var(--ui-w-semibold); font-variant-numeric: tabular-nums; }
  .ui-pager-controls { display: flex; align-items: center; gap: var(--ui-s2); color: var(--ui-label); font-variant-numeric: tabular-nums; }

  /* área de envio de arquivo (arrastar e soltar) */
  .ui-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-s1); padding: var(--ui-s5) var(--ui-s4); border: 2px dashed var(--ui-field-border); border-radius: var(--ui-r-card); background: var(--ui-surface-2); color: var(--ui-label); text-align: center; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
  .ui-dropzone:is(:hover, :focus-within, .dragover, .is-dragover) { border-color: var(--ui-accent-text); background: var(--ui-accent-tint); }
  .ui-dropzone svg { color: var(--ui-accent-text); margin-bottom: var(--ui-s2); }
  .ui-dropzone-title { font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); font-weight: var(--ui-w-semibold); }
  .ui-dropzone-hint { font-size: var(--ui-fs-footnote); line-height: var(--ui-lh-footnote); color: var(--ui-label-2); }

  /* lista de pares rótulo/valor (detalhe de registro) */
  .ui-kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--ui-s2) var(--ui-s4); margin: 0; font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); }
  .ui-kv > dt { color: var(--ui-label-2); font-weight: var(--ui-w-semibold); font-size: var(--ui-fs-footnote); }
  .ui-kv > dd { margin: 0; color: var(--ui-label); overflow-wrap: anywhere; }
  @media (max-width: 767px) { .ui-kv { grid-template-columns: 1fr; gap: 2px; } .ui-kv > dd { margin-bottom: var(--ui-s2); } }

  /* etiqueta neutra (sem ponto), para listas de itens/permissões */
  .ui-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px var(--ui-s2); border-radius: var(--ui-r-control); background: var(--ui-fill); color: var(--ui-label); font: var(--ui-w-semibold) var(--ui-fs-caption)/var(--ui-lh-caption) var(--ui-font); white-space: nowrap; }
  .ui-tags { display: flex; flex-wrap: wrap; gap: var(--ui-s1); }

  /* caixa de seleção com rótulo (checkbox/radio) alinhada */
  .ui-check { display: inline-flex; align-items: center; gap: var(--ui-s2); min-height: var(--ui-control-h-sm); font-size: var(--ui-fs-body); line-height: var(--ui-lh-body); font-weight: var(--ui-w-regular); color: var(--ui-label); cursor: pointer; }
  .ui-check > input { width: 18px; height: 18px; margin: 0; flex: none; }

  /* R9 (pedido W5): legenda e medidor de gráfico */
  .ui-legend { display: flex; flex-wrap: wrap; gap: var(--ui-s1) var(--ui-s3); margin: 0 0 var(--ui-s2); padding: 0; list-style: none; font-size: var(--ui-fs-caption); line-height: var(--ui-lh-caption); color: var(--ui-label-2); }
  .ui-legend > * { display: inline-flex; align-items: center; gap: 6px; }
  .ui-legend > *::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ui-legend-color, var(--ui-series-info)); }
  .ui-legend .is-good { --ui-legend-color: var(--ui-series-good); } .ui-legend .is-info { --ui-legend-color: var(--ui-series-info); } .ui-legend .is-bad { --ui-legend-color: var(--ui-series-bad); }
  .ui-meter { height: 6px; border-radius: var(--ui-r-pill); background: var(--ui-chart-track); overflow: hidden; }
  .ui-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--ui-series-info); }

  /* R9 (pedido W7): contador numérico (pendências) — menu "Aprovações" e título da fila */
  .ui-count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ui-r-pill); background: var(--ui-destructive); color: #FFFFFF; font: var(--ui-w-bold) var(--ui-fs-caption)/1 var(--ui-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ui-count--corner { position: absolute; top: -6px; right: -6px; z-index: 2; pointer-events: none; box-shadow: 0 0 0 2px var(--ui-bg); }
  .ios-drawer-accordion-btn > .ui-count { margin-left: auto; }

  /* componentes acima que definem display: o atributo hidden continua escondendo */
  :is(.ui-stack, .ui-row, .ui-pager, .ui-pager-controls, .ui-dropzone, .ui-kv, .ui-tag, .ui-tags, .ui-check, .ui-legend, .ui-count, .ui-form-grid, .ui-empty, .ui-note, .ui-btn, .ui-badge, .ui-field, .ui-filterbar, .ui-segmented)[hidden] { display: none; }

  /* folha nativa (<dialog class="ios-sheet">) */
  dialog.ios-sheet, .ui-sheet { border: 0; padding: 0; border-radius: var(--ui-r-sheet); background: var(--ui-bg); color: var(--ui-label); width: min(640px, calc(100vw - 32px)); max-height: min(88vh, 900px); overflow: auto; box-shadow: var(--ui-shadow-sheet); }
  .ios-sheet-header, .ui-sheet-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s2); min-height: 56px; padding: var(--ui-s3) var(--ui-s4); background: var(--ui-material); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--ui-separator); }
  :is(.ios-sheet-header, .ui-sheet-header) h2 { margin: 0; font-size: var(--ui-fs-headline); line-height: var(--ui-lh-headline); font-weight: var(--ui-w-semibold); }
  /* R9 (pedido W3): folha larga (800 px) */
  :is(dialog.ios-sheet, .ui-sheet).ui-sheet--wide { width: min(800px, calc(100vw - 32px)); }
  .ios-sheet-body, .ui-sheet-body { padding: var(--ui-s4); }
  .ios-sheet-footer, .ui-sheet-footer { display: flex; justify-content: flex-end; gap: var(--ui-s2); flex-wrap: wrap; padding: var(--ui-s3) var(--ui-s4) var(--ui-s4); }
  .ios-sheet-hero { text-align: center; padding: var(--ui-s2) 0 var(--ui-s4); }
  .ios-sheet-hero .ios-sheet-amount { display: block; font-size: var(--ui-fs-largetitle); font-weight: var(--ui-w-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 4px 0 var(--ui-s2); }
  .ios-sheet-hero .ios-sheet-title { font-size: var(--ui-fs-headline); font-weight: var(--ui-w-semibold); }
  .ios-sheet .ios-section-label { margin-left: var(--ui-s4); }
  .ios-sheet .ios-group { margin-bottom: var(--ui-s2); }
  @media (max-width: 767px) {
    dialog.ios-sheet, .ui-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--ui-r-sheet) var(--ui-r-sheet) 0 0; max-height: 92vh; }
    .ios-sheet-footer > *, .ui-sheet-footer > * { flex: 1 1 0; }
  }

  /* ---------- R13: pop-up de comunicado obrigatório (auth.js) ----------
     O fundo do cartão é a cor escolhida no cadastro do comunicado (única propriedade dinâmica, posta pelo auth.js).
     Título e mensagem usam preto ou branco conforme a luminância WCAG desse fundo (classe --escuro, decidida pelo
     isDarkColor), o que dá >= 4,58:1 em qualquer cor. Os botões ficam com o fundo opaco dos tokens do crm-ui
     (app-button-primary: accent/on-accent; app-button-secondary: fill/accent-text), AA nos 3 temas; o aviso de erro usa
     danger/danger-tint. O contorno dos botões acompanha o fundo do cartão para o botão não "sumir" nele. */
  .comunicado-popup-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: var(--ui-s4); background: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .comunicado-popup { box-sizing: border-box; width: 100%; max-width: 580px; max-height: 100%; overflow-y: auto; padding: 40px; border: 2px solid rgba(0, 0, 0, 0.12); border-radius: 20px; background: #FFFFFF; color: #000000; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
  .comunicado-popup--escuro { border-color: rgba(255, 255, 255, 0.15); color: #FFFFFF; }
  .comunicado-popup .comunicado-popup__titulo { margin: 10px 0 20px; font-size: 1.6rem; line-height: 1.25; color: #000000; overflow-wrap: anywhere; }
  .comunicado-popup .comunicado-popup__mensagem { max-height: 200px; overflow-y: auto; margin: 15px 0 25px; padding: var(--ui-s3); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: var(--ui-r-control); font-size: 1rem; line-height: 1.5; color: #000000; text-align: left; overflow-wrap: anywhere; }
  .comunicado-popup--escuro .comunicado-popup__titulo, .comunicado-popup--escuro .comunicado-popup__mensagem { color: #FFFFFF; }
  .comunicado-popup--escuro .comunicado-popup__mensagem { border-color: rgba(255, 255, 255, 0.15); }
  .comunicado-popup__imagem { display: block; max-width: 100%; max-height: 300px; margin: 0 auto 20px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
  .comunicado-popup__imagem--grande { max-height: 450px; }
  .comunicado-popup .comunicado-popup__aviso { margin: 0 0 var(--ui-s3); padding: var(--ui-s2) var(--ui-s3); border-radius: var(--ui-r-control); background: var(--ui-danger-tint); color: var(--ui-danger); font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); text-align: left; }
  .comunicado-popup .comunicado-popup__aviso:empty { display: none; }
  .comunicado-popup__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-s3); margin-top: 10px; }
  .comunicado-popup .comunicado-popup__acoes > button { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
  .comunicado-popup--escuro .comunicado-popup__acoes > button { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
  @media (max-width: 480px) {
    .comunicado-popup { padding: var(--ui-s5) var(--ui-s4); }
    .comunicado-popup__acoes > button { flex: 1 1 auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms; animation-duration: 0.01ms; animation-iteration-count: 1; scroll-behavior: auto; }
  }
}

/* R8 H3: a regra que esconde ações negadas pela matriz ([data-permission-blocked]) é injetada por gestao-master-permissoes.js, fora desta folha sem !important. */