/* shared/ui/theme/tokens.css (cópia literal) */
/*
 * TOKENS DE TEMA — o ÚNICO arquivo CSS com seletor de tema (ordem do dono, 10/10/2026:
 * «O CSS precisa ser único e determinístico»). `npm run gate:tema-unico` reprova
 * `[data-theme` ou `prefers-color-scheme` em qualquer outro .css do repositório
 * (exceção declarada: `modules/config/`, módulo portável — ver o cabeçalho do gate).
 *
 * Semântica, igual à de antes da mudança:
 *   <html data-theme="light">  força claro
 *   <html data-theme="dark">   força escuro
 *   <html> sem `data-theme`    segue `prefers-color-scheme` (modo sistema)
 *
 * Aqui só se declaram custom properties em `:root`. Quem pinta é o arquivo do
 * componente, sempre por `var(--x)`; nenhum componente decide tema. Token de módulo
 * leva o prefixo do módulo (`--gpu-*`, `--mail-*`, `--panel-*`, `--consumo-*`).
 * `--ds-*` é o Design System universal (preset «superadmin», 23/10/2026, canônico em
 * docs/DESIGN-SYSTEM-CANONICO.md); `--panel-*` é alias dele — uma origem só.
 * Os valores vieram LITERAIS dos blocos de tema que existiam em cada arquivo — trocar
 * um deles exige medir o contraste de novo (validadores citados em cada seção).
 *
 * Importado no topo de `app/globals.css`.
 */

/* ── Escuro: padrão sem preferência clara, e o forçado por data-theme="dark" ── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Véu atrás do carregamento do hard reload. */
  --session-loading-veu: rgba(2, 6, 12, .82);
  /* Wordmark: `cons` é #ffffff no escuro (skill `logo`). */
  --logo-cons: #ffffff;


  /* /gpus — modules/gpus/ui/GpuDashboard.module.css. */
  --gpu-background: #0b111b;
  --gpu-surface: #0f1724;
  --gpu-elevated: #162235;
  --gpu-foreground: #f8fafc;
  --gpu-muted: #b6c3d1;
  --gpu-subtle: #91a3b8;
  --gpu-accent: #22d3ee;
  --gpu-accent-foreground: #051016;
  --gpu-border: #64748b;
  --gpu-border-soft: #334155;
  --gpu-focus: #facc15;
  --gpu-success: #6ee7b7;
  --gpu-warning: #fbbf24;
  --gpu-danger: #fca5a5;
  --gpu-series-memory: #a78bfa;
  --gpu-series-power: #fbbf24;
  /* Placa TEXT: acento laranja no lugar do ciano. */
  --gpu-text-accent: #fb923c;
  --gpu-text-accent-foreground: #1a0b02;

  /* E-mail — modules/mailbox/ui/Email.module.css (aparência do iCloud no escuro). */
  /* literal = --access-panel escuro de modules/config/design_system/tokens.css: test:email-contraste só resolve var() no próprio bloco */
  --mail-background: #0b0f17;
  --mail-surface: #1d222c;
  --mail-surface-elevated: #282f3b;
  --mail-foreground: #f3f5f9;
  --mail-foreground-muted: #b7c1d0;
  --mail-foreground-subtle: #aab6c8;
  --mail-primary: #7ac7f5;
  --mail-primary-foreground: #101c28;
  --mail-secondary: #303b4c;
  --mail-secondary-foreground: #f3f5f9;
  --mail-border: #748296;
  --mail-divider: #3c4656;
  --mail-focus: #91d3fa;
  --mail-success: #9be4b4;
  --mail-warning: #f4d295;
  --mail-error: #ffb6be;
  --mail-info: #a4cfff;
  --mail-selected: #34475d;
  /* Correio: leitura, contas e janelas compartilham o tema da sessão. */
  --mail-sidebar:#202022;--mail-list:#1c1c1e;--mail-paper:#1c1c1e;
  --mail-line:#3d3d42;--mail-search:#333337;--mail-topbar:#242426;
  --mail-ink:#f5f5f7;--mail-muted:#b1b1ba;--mail-blue:#70b5ff;
  --mail-selection:#075fce;--mail-selected-ink:#fff;--mail-control-border:#80808a;
  --mail-action-bg:#233349;--mail-danger:#ffb1ad;--mail-danger-bg:#392728;
  --mail-positive:#a0ddbb;--mail-positive-bg:#203b30;
  --mail-caution:#f4d295;--mail-caution-bg:#3b3221;


  /* ── Design System universal `--ds-*`, preset «superadmin» (ordem do dono, 23/10/2026;
     canônico em docs/DESIGN-SYSTEM-CANONICO.md, achado 1 «dois design systems»).
     `--ds-*` é a ÚNICA origem; `--panel-*` abaixo é ALIAS (var(--ds-*)). Valores idênticos
     aos que `--panel-*` tinha — paleta teal/areia medida, nenhuma cor trocada. Nomes seguem
     financeiro/modules/design_system/design/gerar_tokens.py (`_`→`-`: brand-soft, on-brand,
     tab-area, tab-border). tab-area/tab-border já coincidem com o universal nos dois temas. ── */
  --ds-paper: var(--access-panel);
  --ds-hero: #07172e;          /* regra nova 2 (dono, 23/10/2026): hero sempre da mesma cor, nos dois temas */
  --ds-on-hero: #f8f9fe;
  --ds-surface: #0b0f17;
  --ds-brand-soft: #0d2630;
  --ds-surface-elevated: #141c29;
  --ds-ink: #edf2fa;
  --ds-muted: #a3b1c6;
  --ds-subtle: #8f9eb4;
  --ds-brand: #67dced;
  --ds-on-brand: #05070d;
  --ds-secondary: #a3b1c6;
  --ds-on-secondary: #05070d;
  --ds-line: #65758b;
  --ds-focus-ring: #67dced;
  --ds-positive: #8de5c3;
  --ds-on-positive: #05070d;
  --ds-warning: #ffbb83;
  --ds-on-warning: #05070d;
  --ds-danger: #ff9e9e;
  --ds-on-danger: #05070d;
  --ds-info: #67dced;
  --ds-on-info: #05070d;
  --ds-tab-background: #0b1721;
  --ds-tab-area: #0b1019;
  --ds-tab-border: #24414c;
  /* Medidas, sem tema (declaradas uma vez: `:root` casa em todo tema). */
  /* divergência registrada: universal 16px (tokens.json forma.raio.cartao); decisão do dono pendente. */
  --ds-radius-cartao: 12px;
  --ds-radius-botao: 12px; /* aba, Voltar, LabelButton (REQUISITOS); igual ao universal */
  --ds-radius-area: 14px; /* área de conteúdo das abas (REQUISITOS) */
  --ds-target-min: 40px; /* altura mínima de controle (REQUISITOS, contrato.ts) */
  /* Escala de espaço (canônico, item 5: «precisam virar space-1…8»). Premissa desta frente:
     grade de 4 px inferida dos valores literais do REQUISITOS (8/12/16/20/24); sem consumidor
     ainda; o dono pode trocar sem efeito em tela. */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;
  /* Modal canônico (ordem do dono, 23/10/2026: abre no centro, move e redimensiona; componente
     único do DS = modules/design_system/ui/SystemDialog). Sem tema: medidas e véus pretos translúcidos. */
  --ds-modal-radius: 16px;
  --ds-modal-shadow: 0 8px 24px rgba(13,15,34,.06);
  --ds-modal-backdrop: rgba(13, 15, 34, 0.56);
  --ds-modal-z: 400;
  --ds-modal-sm: 480px;
  --ds-modal-md: 720px;
  --ds-modal-lg: 960px;
  --ds-modal-xl: min(1200px, calc(100vw - 48px));
  --ds-modal-min-w: 360px;
  --ds-modal-min-h: 240px;
  --ds-modal-margin: 16px;
  --ds-modal-margin-xl: 48px;
  --ds-modal-mobile: 600px;
  --ds-modal-step: 16px;
  --ds-modal-step-shift: 64px;
  --ds-modal-handle: 8px;

  /* Painéis de catálogo — mesma paleta em Ecossistema, Aplicativos do sistema,
     Módulos reutilizáveis e Clone da estação. Cada `.root` mapeia `--surface` etc.
     para estes. Desde 23/10/2026 são ALIASES de `--ds-*` (acima); valor computado
     inalterado. `--panel-universal-surface` = caixa de destaque dos módulos universais
     (14/10/2026); `--panel-tab-*` = área de conteúdo das abas (17/10/2026). */
  --panel-background: var(--ds-paper);
  --panel-surface: var(--ds-surface);
  --panel-universal-surface: var(--ds-brand-soft);
  --panel-surface-elevated: var(--ds-surface-elevated);
  --panel-foreground: var(--ds-ink);
  --panel-foreground-muted: var(--ds-muted);
  --panel-foreground-subtle: var(--ds-subtle);
  --panel-primary: var(--ds-brand);
  --panel-primary-foreground: var(--ds-on-brand);
  --panel-secondary: var(--ds-secondary);
  --panel-secondary-foreground: var(--ds-on-secondary);
  --panel-border: var(--ds-line);
  --panel-focus: var(--ds-focus-ring);
  --panel-success: var(--ds-positive);
  --panel-success-foreground: var(--ds-on-positive);
  --panel-warning: var(--ds-warning);
  --panel-warning-foreground: var(--ds-on-warning);
  --panel-error: var(--ds-danger);
  --panel-error-foreground: var(--ds-on-danger);
  --panel-info: var(--ds-info);
  --panel-info-foreground: var(--ds-on-info);
  --panel-tab-background: var(--ds-tab-background);
  --panel-tab-area-background: var(--ds-tab-area);
  --panel-tab-area-border: var(--ds-tab-border);

  /* /consumo — faixas de governança (RegrasDeConsumo) e atividade do CLI (Consumo). */
  --consumo-faixa-verde: #4ade80;
  --consumo-faixa-amarelo: #facc15;
  --consumo-faixa-vermelho: #f87171;
  --consumo-activity-active: #4ade80;
  --consumo-activity-inactive: #f87171;
  --consumo-activity-unknown: #94a3b8;

  /* /token › Regras de consumo (K6–K10, 31/10/2026): séries do gráfico, badge Code/Codex e estados da máquina. */
  --serie-code: #f0a36b;
  --serie-codex: #4fd1a1;
  --ia-code-fundo: #24180f;
  --ia-code-borda: #5c3b22;
  --ia-code-badge: #3b2616;
  --ia-code-texto: #fdd2b0;
  --ia-codex-fundo: #1b1d21;
  --ia-codex-borda: #41464e;
  --ia-codex-badge: #2b2f35;
  --ia-codex-texto: #d6d9de;
  --consumo-estado-ok: #34d399;
  --consumo-estado-warn: #fdba74;
  --consumo-estado-action: #c2410c;
  --consumo-estado-bad: #fca5a5;
  --consumo-estado-muted: #94a3b8;
}

/* ── Claro. O MESMO conteúdo vale para os dois gatilhos abaixo: `data-theme="light"`
   e o sistema claro sem `data-theme="dark"`. Mudou um, muda o outro. ── */
:root[data-theme="light"] {
  color-scheme: light;

  --session-loading-veu: rgba(244, 241, 234, .88);
  --logo-cons: #111111;


  --gpu-background: #f4f1ea;
  --gpu-surface: #fbf9f4;
  --gpu-elevated: #ffffff;
  --gpu-foreground: #14171a;
  --gpu-muted: #4a4d52;
  --gpu-subtle: #5c5f64;
  --gpu-accent: #0e7490;
  --gpu-accent-foreground: #ffffff;
  --gpu-border: #857f73;
  --gpu-border-soft: #d6d1c6;
  --gpu-focus: #1d4ed8;
  --gpu-success: #047857;
  --gpu-warning: #b45309;
  --gpu-danger: #b91c1c;
  --gpu-series-memory: #6d28d9;
  --gpu-series-power: #b45309;
  --gpu-text-accent: #c2410c;
  --gpu-text-accent-foreground: #ffffff;

  --mail-background: #f4f1ea;
  --mail-surface: #fbf9f4;
  --mail-surface-elevated: #ffffff;
  --mail-foreground: #14171a;
  --mail-foreground-muted: #4a4d52;
  --mail-foreground-subtle: #5c5f64;
  --mail-primary: #0e718c;
  --mail-primary-foreground: #ffffff;
  --mail-secondary: #ede9e0;
  --mail-secondary-foreground: #14171a;
  --mail-border: #8f897d;
  --mail-divider: #d6d1c6;
  --mail-focus: #0e718c;
  --mail-success: #047857;
  --mail-warning: #b83e0b;
  --mail-error: #b91c1c;
  --mail-info: #0e718c;
  --mail-selected: #ede9e0;
  /* Correio: leitura, contas e janelas compartilham o tema da sessão. */
  --mail-sidebar:#f5f5f7;--mail-list:#fff;--mail-paper:#fff;
  --mail-line:#dedee3;--mail-search:#e8e8ed;--mail-topbar:#f7f7f8;
  --mail-ink:#202024;--mail-muted:#62626b;--mail-blue:#005bc8;
  --mail-selection:#0063d9;--mail-selected-ink:#fff;--mail-control-border:#85858d;
  --mail-action-bg:#f0f5fc;--mail-danger:#a92b27;--mail-danger-bg:#fff4f3;
  --mail-positive:#246345;--mail-positive-bg:#eef8f2;
  --mail-caution:#674a12;--mail-caution-bg:#fff8e7;


  /* ── Design System universal `--ds-*`, preset «superadmin» (ordem do dono, 23/10/2026;
     canônico em docs/DESIGN-SYSTEM-CANONICO.md, achado 1 «dois design systems»).
     `--ds-*` é a ÚNICA origem; `--panel-*` abaixo é ALIAS (var(--ds-*)). Valores idênticos
     aos que `--panel-*` tinha — paleta teal/areia medida, nenhuma cor trocada. Nomes seguem
     financeiro/modules/design_system/design/gerar_tokens.py (`_`→`-`: brand-soft, on-brand,
     tab-area, tab-border). tab-area/tab-border já coincidem com o universal nos dois temas. ── */
  --ds-paper: #f4f1ea;
  --ds-hero: #07172e;          /* regra nova 2 (dono, 23/10/2026): hero sempre da mesma cor, nos dois temas */
  --ds-on-hero: #f8f9fe;
  --ds-surface: #fbf9f4;
  --ds-brand-soft: #ecf6f8;
  --ds-surface-elevated: #ffffff;
  --ds-ink: #14171a;
  --ds-muted: #4a4d52;
  --ds-subtle: #5c5f64;
  --ds-brand: #0e7490;
  --ds-on-brand: #ffffff;
  --ds-secondary: #334155;
  --ds-on-secondary: #ffffff;
  --ds-line: #8f897d;
  --ds-focus-ring: #0e7490;
  --ds-positive: #047857;
  --ds-on-positive: #ffffff;
  --ds-warning: #c2410c;
  --ds-on-warning: #ffffff;
  --ds-danger: #b91c1c;
  --ds-on-danger: #ffffff;
  --ds-info: #0e7490;
  --ds-on-info: #ffffff;
  --ds-tab-background: #e8eeec;
  --ds-tab-area: #fdfcf9;
  --ds-tab-border: #cfe1e7;

  /* Painéis de catálogo: aliases de `--ds-*` (23/10/2026). */
  --panel-background: var(--ds-paper);
  --panel-surface: var(--ds-surface);
  --panel-universal-surface: var(--ds-brand-soft);
  --panel-surface-elevated: var(--ds-surface-elevated);
  --panel-foreground: var(--ds-ink);
  --panel-foreground-muted: var(--ds-muted);
  --panel-foreground-subtle: var(--ds-subtle);
  --panel-primary: var(--ds-brand);
  --panel-primary-foreground: var(--ds-on-brand);
  --panel-secondary: var(--ds-secondary);
  --panel-secondary-foreground: var(--ds-on-secondary);
  --panel-border: var(--ds-line);
  --panel-focus: var(--ds-focus-ring);
  --panel-success: var(--ds-positive);
  --panel-success-foreground: var(--ds-on-positive);
  --panel-warning: var(--ds-warning);
  --panel-warning-foreground: var(--ds-on-warning);
  --panel-error: var(--ds-danger);
  --panel-error-foreground: var(--ds-on-danger);
  --panel-info: var(--ds-info);
  --panel-info-foreground: var(--ds-on-info);
  --panel-tab-background: var(--ds-tab-background);
  --panel-tab-area-background: var(--ds-tab-area);
  --panel-tab-area-border: var(--ds-tab-border);

  --consumo-faixa-verde: #047857;
  --consumo-faixa-amarelo: #8a5a00;
  --consumo-faixa-vermelho: #b91c1c;
  --consumo-activity-active: #047857;
  --consumo-activity-inactive: #b91c1c;
  --consumo-activity-unknown: #475569;

  /* /token › Regras de consumo (K6–K10, 31/10/2026). */
  --serie-code: #c2410c;
  --serie-codex: #047857;
  --ia-code-fundo: #fbefe6;
  --ia-code-borda: #e9c4a6;
  --ia-code-badge: #f6dcc8;
  --ia-code-texto: #7c2d12;
  --ia-codex-fundo: #f2f3f5;
  --ia-codex-borda: #d0d4da;
  --ia-codex-badge: #e4e7eb;
  --ia-codex-texto: #374151;
  --consumo-estado-ok: #047857;
  --consumo-estado-warn: #c2410c;
  --consumo-estado-action: #9a3412;
  --consumo-estado-bad: #b91c1c;
  --consumo-estado-muted: #4a4d52;
}

/* ── Sistema claro, sem tema forçado. Cópia exata do bloco claro acima. ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --session-loading-veu: rgba(244, 241, 234, .88);
    --logo-cons: #111111;


    --gpu-background: #f4f1ea;
    --gpu-surface: #fbf9f4;
    --gpu-elevated: #ffffff;
    --gpu-foreground: #14171a;
    --gpu-muted: #4a4d52;
    --gpu-subtle: #5c5f64;
    --gpu-accent: #0e7490;
    --gpu-accent-foreground: #ffffff;
    --gpu-border: #857f73;
    --gpu-border-soft: #d6d1c6;
    --gpu-focus: #1d4ed8;
    --gpu-success: #047857;
    --gpu-warning: #b45309;
    --gpu-danger: #b91c1c;
    --gpu-series-memory: #6d28d9;
    --gpu-series-power: #b45309;
    --gpu-text-accent: #c2410c;
    --gpu-text-accent-foreground: #ffffff;

    --mail-background: #f4f1ea;
    --mail-surface: #fbf9f4;
    --mail-surface-elevated: #ffffff;
    --mail-foreground: #14171a;
    --mail-foreground-muted: #4a4d52;
    --mail-foreground-subtle: #5c5f64;
    --mail-primary: #0e718c;
    --mail-primary-foreground: #ffffff;
    --mail-secondary: #ede9e0;
    --mail-secondary-foreground: #14171a;
    --mail-border: #8f897d;
    --mail-divider: #d6d1c6;
    --mail-focus: #0e718c;
    --mail-success: #047857;
    --mail-warning: #b83e0b;
    --mail-error: #b91c1c;
    --mail-info: #0e718c;
    --mail-selected: #ede9e0;
  /* Correio: leitura, contas e janelas compartilham o tema da sessão. */
  --mail-sidebar:#f5f5f7;--mail-list:#fff;--mail-paper:#fff;
  --mail-line:#dedee3;--mail-search:#e8e8ed;--mail-topbar:#f7f7f8;
  --mail-ink:#202024;--mail-muted:#62626b;--mail-blue:#005bc8;
  --mail-selection:#0063d9;--mail-selected-ink:#fff;--mail-control-border:#85858d;
  --mail-action-bg:#f0f5fc;--mail-danger:#a92b27;--mail-danger-bg:#fff4f3;
  --mail-positive:#246345;--mail-positive-bg:#eef8f2;
  --mail-caution:#674a12;--mail-caution-bg:#fff8e7;


    /* ── Design System universal `--ds-*`, preset «superadmin» (ordem do dono, 23/10/2026;
       canônico em docs/DESIGN-SYSTEM-CANONICO.md, achado 1 «dois design systems»).
       `--ds-*` é a ÚNICA origem; `--panel-*` abaixo é ALIAS (var(--ds-*)). Valores idênticos
       aos que `--panel-*` tinha — paleta teal/areia medida, nenhuma cor trocada. Nomes seguem
       financeiro/modules/design_system/design/gerar_tokens.py (`_`→`-`: brand-soft, on-brand,
       tab-area, tab-border). tab-area/tab-border já coincidem com o universal nos dois temas. ── */
    --ds-paper: #f4f1ea;
    --ds-hero: #07172e;          /* regra nova 2 (dono, 23/10/2026): hero sempre da mesma cor, nos dois temas */
    --ds-on-hero: #f8f9fe;
    --ds-surface: #fbf9f4;
    --ds-brand-soft: #ecf6f8;
    --ds-surface-elevated: #ffffff;
    --ds-ink: #14171a;
    --ds-muted: #4a4d52;
    --ds-subtle: #5c5f64;
    --ds-brand: #0e7490;
    --ds-on-brand: #ffffff;
    --ds-secondary: #334155;
    --ds-on-secondary: #ffffff;
    --ds-line: #8f897d;
    --ds-focus-ring: #0e7490;
    --ds-positive: #047857;
    --ds-on-positive: #ffffff;
    --ds-warning: #c2410c;
    --ds-on-warning: #ffffff;
    --ds-danger: #b91c1c;
    --ds-on-danger: #ffffff;
    --ds-info: #0e7490;
    --ds-on-info: #ffffff;
    --ds-tab-background: #e8eeec;
    --ds-tab-area: #fdfcf9;
    --ds-tab-border: #cfe1e7;

    /* Painéis de catálogo: aliases de `--ds-*` (23/10/2026). */
    --panel-background: var(--ds-paper);
    --panel-surface: var(--ds-surface);
    --panel-universal-surface: var(--ds-brand-soft);
    --panel-surface-elevated: var(--ds-surface-elevated);
    --panel-foreground: var(--ds-ink);
    --panel-foreground-muted: var(--ds-muted);
    --panel-foreground-subtle: var(--ds-subtle);
    --panel-primary: var(--ds-brand);
    --panel-primary-foreground: var(--ds-on-brand);
    --panel-secondary: var(--ds-secondary);
    --panel-secondary-foreground: var(--ds-on-secondary);
    --panel-border: var(--ds-line);
    --panel-focus: var(--ds-focus-ring);
    --panel-success: var(--ds-positive);
    --panel-success-foreground: var(--ds-on-positive);
    --panel-warning: var(--ds-warning);
    --panel-warning-foreground: var(--ds-on-warning);
    --panel-error: var(--ds-danger);
    --panel-error-foreground: var(--ds-on-danger);
    --panel-info: var(--ds-info);
    --panel-info-foreground: var(--ds-on-info);
    --panel-tab-background: var(--ds-tab-background);
    --panel-tab-area-background: var(--ds-tab-area);
    --panel-tab-area-border: var(--ds-tab-border);

    --consumo-faixa-verde: #047857;
    --consumo-faixa-amarelo: #8a5a00;
    --consumo-faixa-vermelho: #b91c1c;
    --consumo-activity-active: #047857;
    --consumo-activity-inactive: #b91c1c;
    --consumo-activity-unknown: #475569;

    /* /token › Regras de consumo (K6–K10, 31/10/2026). */
    --serie-code: #c2410c;
    --serie-codex: #047857;
    --ia-code-fundo: #fbefe6;
    --ia-code-borda: #e9c4a6;
    --ia-code-badge: #f6dcc8;
    --ia-code-texto: #7c2d12;
    --ia-codex-fundo: #f2f3f5;
    --ia-codex-borda: #d0d4da;
    --ia-codex-badge: #e4e7eb;
    --ia-codex-texto: #374151;
    --consumo-estado-ok: #047857;
    --consumo-estado-warn: #c2410c;
    --consumo-estado-action: #9a3412;
    --consumo-estado-bad: #b91c1c;
    --consumo-estado-muted: #4a4d52;
  }
}

/* ══════ CORES DO GESTOR DE SESSÃO · INÍCIO ══════ */
/* Ativo da skill `session-toggle`. NÃO EDITE AQUI.
   reimplantar: node ~/.claude/skills/session-toggle/scripts/harness.mjs --implanta . */
/* Cores do gestor de sessão canônico 3.3.0 — as MESMAS medidas nos dois temas.
   Implantado no arquivo de tokens de tema do app (o único com seletor de tema).
   Sem `data-theme`, vale o modo do sistema; com ele, o modo escolhido.
   Contraste medido: texto ≥ 4,5:1, contorno ≥ 3:1. */
:root{
  --session-accent:#22d3ee;--session-fg:#e2e8f0;--session-muted:#9ca3af;
  --session-surface:#0c1018;--session-border:#526278;--session-countdown:#67e8f9;
  --session-danger:#7f1d1d;--session-danger-fg:#ffffff;--session-hover:#111827;
}
:root[data-theme="light"]{
  --session-accent:#0e7490;--session-fg:#0f172a;--session-muted:#475569;
  --session-surface:#ffffff;--session-border:#7c8ba3;--session-countdown:#0e7490;
  --session-danger:#b91c1c;--session-danger-fg:#ffffff;--session-hover:#e2e8f0;
}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --session-accent:#0e7490;--session-fg:#0f172a;--session-muted:#475569;
    --session-surface:#ffffff;--session-border:#7c8ba3;--session-countdown:#0e7490;
    --session-danger:#b91c1c;--session-danger-fg:#ffffff;--session-hover:#e2e8f0;
  }
}
/* ══════ CORES DO GESTOR DE SESSÃO · FIM ══════ */

/* modules/config/design_system/tokens.css (cópia literal) */
/* GERADO por gerar_tokens.py de tokens.json v1.0.0 — não editar à mão. */
/* Porta canônica IconsAI — tokens --access-* dos dois temas e derivados da marca (CDS-01, CDS-04). */

/* Derivados do bloco `marca` (iguais nos dois temas). */
:root {
  --access-action: #c2410c;
  --access-context: #0e7490;
  --access-on-action: #ffffff;
  --access-on-context: #ffffff;
  --access-action-wash: rgba(194, 65, 12, 0.09);
  --access-context-wash: rgba(14, 116, 144, 0.14);
  --access-focus-ring: rgba(14, 116, 144, 0.30);
  --access-hover-brightness: 1.1;
}

/* Escuro: padrão sem preferência clara, e o forçado por data-theme="dark". */
:root,
:root[data-theme="dark"] {
  --access-bg: #05070d;
  --access-surface: rgba(12, 16, 24, 0.88);
  --access-input: #080b12;
  --access-panel: #0b0f17;
  --access-border: #1e293b;
  --access-field-border: #334155;
  --access-text: #eef2ff;
  --access-muted: #94a3b8;
  --access-dim: #7c8ba3;
  --access-danger: #ef4444;
  --access-header: #080b12;
  --access-accent: #67e8f9;
  --access-warn: #fdba74;
  --access-bad: #fca5a5;
  --access-ok: #34d399;
  --access-wait: #f0abfc;
  --access-kicker-context: #22d3ee;
  --access-card-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}

/* Claro. O MESMO conteúdo vale para data-theme="light" e para o sistema claro sem data-theme="dark". */
:root[data-theme="light"] {
  --access-bg: #f4f1ea;
  --access-surface: rgba(255, 255, 255, 0.92);
  --access-input: #ffffff;
  --access-panel: #fbf9f4;
  --access-border: #d6d1c6;
  --access-field-border: #8f897d;
  --access-text: #14171a;
  --access-muted: #4a4d52;
  --access-dim: #5c5f64;
  --access-danger: #b91c1c;
  --access-header: #f9f9f7;
  --access-accent: #0e7490;
  --access-warn: #c2410c;
  --access-bad: #b91c1c;
  --access-ok: #047857;
  --access-wait: #7e22ce;
  --access-kicker-context: #094c5b;
  --access-card-shadow: 0 18px 44px rgba(62, 48, 28, 0.10);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --access-bg: #f4f1ea;
    --access-surface: rgba(255, 255, 255, 0.92);
    --access-input: #ffffff;
    --access-panel: #fbf9f4;
    --access-border: #d6d1c6;
    --access-field-border: #8f897d;
    --access-text: #14171a;
    --access-muted: #4a4d52;
    --access-dim: #5c5f64;
    --access-danger: #b91c1c;
    --access-header: #f9f9f7;
    --access-accent: #0e7490;
    --access-warn: #c2410c;
    --access-bad: #b91c1c;
    --access-ok: #047857;
    --access-wait: #7e22ce;
    --access-kicker-context: #094c5b;
    --access-card-shadow: 0 18px 44px rgba(62, 48, 28, 0.10);
  }
}

/* modules/config/design_system/console/headings.css (cópia literal) */
/* Referência do dono: /sistema?tab=aplicativos, 25/10/2026.
   O componente PageHeading e os títulos legados usam o mesmo contrato. */
:root {
  --console-title-font: 800 clamp(36px, 7vw, 68px)/0.95 var(--font-display);
  --console-title-tracking: -0.055em;
  --console-title-margin: 8px 0 12px;
}

/* A prioridade canônica vence também cabeçalhos legados com três classes/atributos.
   Apenas o painel; documentos e caixas de diálogo conservam sua hierarquia. */
html:root .painel-main.painel-main h1:not(:where(article h1, dialog h1, [role="dialog"] h1)) {
  margin: var(--console-title-margin);
  color: var(--access-text);
  font: var(--console-title-font);
  letter-spacing: var(--console-title-tracking);
  text-align: left;
  overflow-wrap: anywhere;
}

/* app/globals.css :root (largura 1600 px e fontes, cópia literal) */
:root {
  /* Painéis operacionais compartilham o mesmo teto: o Superadmin administra
     tabelas densas, e 1600px mantém identificadores e ferramentas legíveis. */
  --painel-max-width: 1600px;

  /* `--access-panel` e `--access-dim` (com o histórico das medições de 27/08/2026)
     vivem em shared/ui/theme/tokens.css, o único arquivo com seletor de tema. */

  --font-display: var(--font-jakarta, "Plus Jakarta Sans"), system-ui, sans-serif;
  --font-ui: var(--font-inter, Inter), system-ui, sans-serif;
  --font-mono: var(--font-mono-jb, "JetBrains Mono"), ui-monospace, monospace;
  --font-logo: var(--font-jakarta, "Plus Jakarta Sans"), system-ui, sans-serif;
  --font-logo-i: var(--font-baskerville, "Libre Baskerville"), Georgia, serif;
}
:root{--font-inter:'Inter';--font-mono-jb:'JetBrains Mono';--font-jakarta:'Plus Jakarta Sans';--font-sans:var(--font-ui)}
/* app/globals.css base */ *{box-sizing:border-box}html,body{margin:0;padding:0;max-width:100%;overflow-x:clip}body{background:var(--access-bg);color:var(--access-text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
/* app/globals.css .painel-main (cópia literal, §4) */
.painel-main {
  width: min(var(--painel-max-width), calc(100% - 40px));
  min-width: 0;
  margin: 0 auto;
  padding: 36px 0 72px;
}
/* modules/design_system/ui/Tabs.module.css (prefixo tb-, como o CSS Modules) */
/* Abas canônicas do Design System (ordem do dono, 17/10/2026).
   Toda régua de abas do painel usa estas três classes:
   - `.tb-regua`  — a fileira de abas;
   - `.tb-aba`    — cada aba, no formato e comportamento do botão «Voltar»
                 (modules/person/ui/CartoesAplicativos.tb-module.tb-css, `.tb-voltar`);
   - `.tb-area`   — o painel do conteúdo da aba: separado da régua, fundo um tom
                 mais claro que o do sistema e borda clara de cor própria.
   Aba selecionada: `aria-current="page"` (navegação por URL) ou
   `aria-selected="true"` (role="tab"). Tokens em shared/ui/theme/tokens.tb-css. */

.tb-regua {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tb-aba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--access-border);
  border-radius: 12px;
  background: var(--panel-tab-background);
  color: var(--access-text);
  font: 600 14px/1.2 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--access-border) 78%, transparent);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease,
    background-color 160ms ease, color 160ms ease;
}
.tb-aba:hover {
  border-color: color-mix(in srgb, var(--access-context) 55%, var(--access-border));
  transform: translateY(-1px);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--access-context) 14%, transparent);
}
.tb-aba:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--access-border) 78%, transparent);
}
.tb-aba:focus-visible {
  outline: 2px solid var(--access-context);
  outline-offset: 2px;
}
.tb-aba[aria-current="page"],
.tb-aba[aria-selected="true"] {
  background: var(--panel-primary);
  border-color: var(--panel-primary);
  color: var(--panel-primary-foreground);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--panel-primary) 45%, transparent);
}
.tb-aba:disabled,
.tb-aba[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.tb-area {
  display: grid;
  gap: 20px;
  min-width: 0;
  margin-top: 16px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid var(--panel-tab-area-border);
  border-radius: 14px;
  background: var(--panel-tab-area-background);
}

@media (prefers-reduced-motion: reduce) {
  .tb-aba {
    transition: none;
  }
  .tb-aba:hover,
  .tb-aba:active {
    transform: none;
  }
}

/* modules/design_system/ui/System.module.css (prefixo sy-, como o CSS Modules) */
/* Os valores por tema de `--background`, `--surface`… são `--panel-*`, em
   shared/ui/theme/tokens.sy-css — o único arquivo com seletor de tema. */
.sy-root {
  /* All functional foregrounds pair with background/surface, including hover. */
  --background: var(--panel-background);
  --surface: var(--panel-surface);
  --surface-elevated: var(--panel-surface-elevated);
  --foreground: var(--panel-foreground);
  --foreground-muted: var(--panel-foreground-muted);
  --foreground-subtle: var(--panel-foreground-subtle);
  --primary: var(--panel-primary);
  --primary-foreground: var(--panel-primary-foreground);
  --secondary: var(--panel-secondary);
  --secondary-foreground: var(--panel-secondary-foreground);
  --border: var(--panel-border);
  --focus: var(--panel-focus);
  --success: var(--panel-success);
  --success-foreground: var(--panel-success-foreground);
  --warning: var(--panel-warning);
  --warning-foreground: var(--panel-warning-foreground);
  --error: var(--panel-error);
  --error-foreground: var(--panel-error-foreground);
  --info: var(--panel-info);
  --info-foreground: var(--panel-info-foreground);
  color: var(--foreground);
  min-width: 0;
}

.sy-root button,
.sy-root a,
.sy-root select,
.sy-root summary {
  cursor: pointer;
}
.sy-root {
  display: grid;
  gap: 20px;
  padding: 24px 16px 48px;
  width: 100%;
  max-width: var(--painel-max-width, 1600px);
  margin: 0 auto;
  overflow-wrap: anywhere;
}
.sy-root code {
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
.sy-root a {
  color: var(--primary);
}
.sy-root :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.sy-intro {
  display: grid;
  gap: 6px;
}
.sy-intro h1 {
  margin: 0;
  font-size: 1.6rem;
}
.sy-intro p {
  margin: 0;
  color: var(--foreground-muted);
  max-width: 72ch;
}
.sy-eyebrow {
  color: var(--foreground-subtle);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sy-lido {
  font-size: 0.85rem;
}
.sy-aviso,
.sy-erro {
  border: 1px solid var(--warning);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface);
}
.sy-erro {
  border-color: var(--error);
}
.sy-origem {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.88rem;
}
.sy-contagem {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.88rem;
}
.sy-grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.sy-grade > li {
  min-width: 0;
  display: grid;
}
.sy-cartao {
  display: grid;
  gap: 14px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
  min-width: 0;
}
.sy-topo {
  display: grid;
  gap: 6px;
}
.sy-topo h3 {
  margin: 0;
  font-size: 1.1rem;
}
.sy-nomeVersao {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.sy-nomeVersao > span:first-child { min-width: 0; }
.sy-versao {
  flex: none;
  white-space: nowrap;
  color: var(--foreground-muted);
  font: 500 0.78rem/1.4 var(--font-mono);
}
.sy-id {
  color: var(--foreground-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sy-harness {
  justify-self: start;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--success);
  color: var(--success-foreground);
}
.sy-harness[data-status="fail"] {
  background: var(--error);
  color: var(--error-foreground);
}
.sy-descricao {
  margin: 0;
  line-height: 1.5;
}
.sy-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sy-tags li {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  border: 1px solid var(--primary);
  color: var(--foreground);
  background: var(--surface-elevated);
}
.sy-nota {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.84rem;
}
.sy-uso {
  display: inline-block;
  margin-left: 4px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 0.74rem;
  border: 1px solid var(--border);
  color: var(--foreground-muted);
}
.sy-uso[data-uso="produção"] {
  background: var(--success);
  border-color: var(--success);
  color: var(--success-foreground);
}
.sy-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sy-botao,
.sy-botaoSecundario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  white-space: nowrap;
  text-decoration: none;
}
.sy-botao {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
.sy-root .sy-botaoSecundario {
  border: 1px solid var(--border);
  color: var(--foreground);
  background: var(--surface-elevated);
}
.sy-trazer {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.sy-trazerTopo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sy-trazerRotulo {
  font-weight: 600;
}
.sy-comando {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--foreground);
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sy-detalhes summary {
  color: var(--foreground-muted);
  font-size: 0.88rem;
}
.sy-detalhes[open] summary {
  margin-bottom: 10px;
}
.sy-campos {
  display: grid;
  grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
  font-size: 0.88rem;
}
.sy-campos dt {
  color: var(--foreground-muted);
}
.sy-campos dd {
  margin: 0;
  min-width: 0;
}
/* Um app por par dt/dd, sem quebrar a grade de duas colunas de `.sy-campos`. */
.sy-par {
  display: contents;
}
.sy-item {
  display: inline-block;
  margin: 0 6px 4px 0;
}
.sy-lista {
  margin: 0;
  padding-left: 1.2em;
}
@media (max-width: 1100px) {
  .sy-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .sy-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .sy-campos {
    grid-template-columns: minmax(0, 1fr);
  }
  .sy-campos dd {
    margin-bottom: 6px;
  }
}
.sy-abas {
  /* Só a posição da régua de seções; formato e comportamento das abas vêm de
     Tabs.module.css (`.regua`, `.aba`, `.area`). */
  padding: 16px 16px 0;
  width: 100%;
  min-width: 0;
  max-width: var(--painel-max-width, 1600px);
  margin: 0 auto;
}

.sy-supermodulo {
  display: grid;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  min-width: 0;
}
.sy-supermodulo h2, .sy-supermodulo h3, .sy-supermodulo p { margin: 0; }

/* ── Módulos universais × módulos globais (ordem do dono, 14/10/2026) ── */
.sy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
}
@media (min-width: 1100px) {
  .sy-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }
  .sy-menu {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}
.sy-conteudo {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.sy-menu {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  min-width: 0;
}
.sy-menuTitulo {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground-muted);
}
.sy-menuRaiz,
.sy-arvore {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.sy-menuRaiz > li[data-ramo="global"] {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.sy-menuBotao {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  text-align: left;
}
.sy-menuBotao:hover {
  background: var(--surface-elevated);
}
.sy-chevron {
  display: inline-block;
  width: 1em;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
.sy-chevron[data-aberto="true"] {
  transform: rotate(90deg);
}
.sy-menuNome {
  flex: 1;
  font-weight: 700;
}
.sy-menuConta {
  font-size: 0.78rem;
  color: var(--foreground-muted);
}
.sy-menuIr {
  display: inline-block;
  margin: 2px 0 4px 28px;
  font-size: 0.82rem;
}
.sy-arvore {
  margin-left: 14px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.sy-arvore .sy-arvore {
  margin-left: 6px;
}
.sy-folha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 4px 6px;
  border-radius: 6px;
  min-height: 32px;
  text-decoration: none;
}
a.sy-folha:hover {
  background: var(--surface-elevated);
}
.sy-folha code {
  font-weight: 600;
}
.sy-folhaTitulo {
  font-size: 0.78rem;
  color: var(--foreground-muted);
}
.sy-folha[data-estado="nao_publicado"] code {
  color: var(--foreground-muted);
}

.sy-universal,
.sy-soltos {
  display: grid;
  gap: 18px;
  border: 2px solid var(--primary);
  border-radius: 14px;
  background: var(--panel-universal-surface);
  padding: 22px;
  min-width: 0;
  scroll-margin-top: calc(var(--painel-nav-height, 56px) + 16px);
}
.sy-soltos {
  background: var(--surface-elevated);
  border-color: var(--foreground-muted);
}
.sy-universalTopo {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.sy-selo,
.sy-seloGlobal {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sy-selo {
  background: var(--primary);
  color: var(--primary-foreground);
}
.sy-seloGlobal {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
}
.sy-universalNome {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--foreground);
}
.sy-universalId {
  color: var(--foreground);
  font-weight: 600;
}
.sy-universalConta {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.88rem;
}
.sy-membros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.sy-membro {
  min-width: 0;
}
.sy-membro[data-composto="sim"] {
  grid-column: 1 / -1;
}
.sy-membro > section {
  display: grid;
  gap: 10px;
}
.sy-membroTopo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sy-membroNome {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--foreground);
}
/* Nome do módulo universal ao qual o global pertence: logo abaixo do nome, menor e em negrito. */
.sy-membroUniversal {
  margin: -4px 0 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--foreground-muted);
}
.sy-compostoNome {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.sy-supermodulo h4 {
  margin: 0;
}
.sy-cartao {
  scroll-margin-top: calc(var(--painel-nav-height, 56px) + 16px);
}
.sy-cartao:target {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
@media (max-width: 1100px) {
  .sy-membros {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .sy-universal,
  .sy-soltos {
    padding: 14px;
  }
  .sy-universalNome {
    font-size: 1.5rem;
  }
}

/* modules/design_system/ui/PageHeading.module.css (prefixo ph-, como o CSS Modules) */
/* Referência única: /sistema?tab=aplicativos; tokens no DS unificado/console. */
.ph-cabecalho {
  min-width: 0;
}

.ph-kicker {
  margin: 0;
  color: var(--access-context);
  font: 800 10px var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.ph-titulo {
  margin: var(--console-title-margin);
  color: var(--access-text);
  font: var(--console-title-font);
  letter-spacing: var(--console-title-tracking);
  overflow-wrap: anywhere;
}

.ph-apoio {
  display: grid;
  gap: 6px;
  max-width: 68ch;
  color: var(--access-muted);
  font-size: 14px;
  line-height: 1.7;
}

.ph-apoio > p {
  margin: 0;
}

/* modules/design_system/ui/SectionHeading.module.css (prefixo sh-, como o CSS Modules) */
/* Título de seção: sempre à esquerda, alinhado com a régua de abas.
   Ordem do dono, 18/10/2026. Nada de margem automática: dentro da `area`
   (grid) ela encolhe o cabeçalho e o centraliza. */
.sh-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  min-width: 0;
  text-align: left;
}
.sh-cabecalho h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--panel-foreground);
}
/* Blocos internos seguem a escala do P9 aprovado; h1 conserva seu contrato. */
.sh-cabecalho h2,
.sh-cabecalho h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  color: var(--panel-foreground);
}
.sh-cabecalho h2 { font-size: 20px; }
.sh-cabecalho h3 { font-size: 16px; }
.sh-acoes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* modules/design_system/ui/HelpButton.module.css (prefixo hb-, como o CSS Modules) */
/* Botão de ajuda: «?» em círculo; cor e negrito só em hover/foco (DESIGN-SYSTEM-SUPERADMIN §5). */
.hb-raiz {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.hb-botao {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--access-border);
  border-radius: 50%;
  background: transparent;
  color: var(--access-muted);
  font: 400 13px/1 var(--font-mono);
  cursor: help;
}

.hb-botao:hover,
.hb-botao:focus-visible,
.hb-botao[aria-expanded="true"] {
  border-width: 2px;
  border-color: var(--access-context);
  color: var(--access-context);
  font-weight: 800;
  outline: none;
}

.hb-painel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: min(360px, 80vw);
  padding: 10px 12px;
  border: 1px solid var(--access-border);
  border-radius: 8px;
  background: var(--access-panel);
  color: var(--access-text);
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}

.hb-painel[hidden] {
  display: none;
}

/* modules/infra_health/ui/InfraHealth.module.css (prefixo ih-, como o CSS Modules) */
.ih-secao { display: flex; flex-direction: column; gap: 16px; }
.ih-aviso { margin: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--panel-border); background: var(--panel-surface); font-size: .875rem; }
.ih-aviso[data-tone="warning"] { border-color: var(--panel-warning); }
.ih-aviso[data-tone="error"] { border-color: var(--panel-error); }
.ih-cartao { border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-surface); padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ih-cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.ih-nome { margin: 0; font: 700 1rem/1.3 var(--font-inter), sans-serif; }
.ih-sub { font-size: .8rem; color: var(--panel-foreground-muted); }
.ih-barra { display: flex; align-items: center; gap: 10px; }
.ih-trilho { flex: 1; height: 8px; border-radius: 4px; background: var(--panel-surface-elevated); overflow: hidden; }
.ih-preenchido { height: 8px; background: var(--panel-success); }
.ih-preenchido[data-tone="warning"] { background: var(--panel-warning); }
.ih-preenchido[data-tone="error"] { background: var(--panel-error); }
.ih-pct { min-width: 44px; text-align: right; font: 700 .85rem/1 var(--font-mono), monospace; font-variant-numeric: tabular-nums; }
.ih-alertas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .875rem; }
.ih-alertas li { display: flex; gap: 8px; align-items: baseline; }
.ih-marca { font-weight: 700; }
.ih-marca[data-tone="error"] { color: var(--panel-error); }
.ih-marca[data-tone="warning"] { color: var(--panel-warning); }
.ih-tabelaBox { overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 12px; }
.ih-tabela { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .875rem; }
.ih-tabela th { text-align: left; padding: 10px 12px; font-weight: 600; color: var(--panel-foreground-muted); background: var(--panel-surface-elevated); }
.ih-tabela td { padding: 10px 12px; border-top: 1px solid var(--panel-border); }
.ih-mono { font-family: var(--font-mono), monospace; font-size: .8rem; overflow-wrap: anywhere; }
.ih-num { text-align: right; font-variant-numeric: tabular-nums; }
.ih-lista { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .875rem; }
.ih-lista dt { color: var(--panel-foreground-muted); }
.ih-lista dd { margin: 0; font-weight: 600; }

/* modules/infra_health/mini_graficos/MiniGraficos.module.css (prefixo mg-, como o CSS Modules) */
/* Resumo com mini gráficos: grade do DESIGN-SYSTEM-SUPERADMIN §3 (260px, gap 12), modelo do resumo da aba «Tokens de IA». */
.mg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mg-cartao { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-surface); }
.mg-cartao[data-tone="warning"] { border-color: var(--panel-warning); }
.mg-cartao[data-tone="error"] { border-color: var(--panel-error); }
.mg-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mg-rotulo { color: var(--panel-foreground-muted); font-size: .8rem; font-weight: 600; }
.mg-corpo { display: flex; gap: 12px; align-items: center; min-width: 0; }
.mg-grafico { flex: none; display: flex; align-items: center; }
.mg-numeros { display: grid; gap: 2px; min-width: 0; }
.mg-valor { color: var(--panel-foreground); font: 800 1.15rem/1.2 var(--font-mono), monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mg-nota { color: var(--panel-foreground-muted); font-size: .78rem; line-height: 1.4; }

.mg-anel { display: block; width: 64px; height: 64px; }
.mg-anelFundo { fill: none; stroke: var(--panel-surface-elevated); stroke-width: 6; }
.mg-anelValor { fill: none; stroke: var(--panel-primary); stroke-width: 6; stroke-linecap: round; }
.mg-anel[data-tone="success"] .mg-anelValor { stroke: var(--panel-success); }
.mg-anel[data-tone="warning"] .mg-anelValor { stroke: var(--panel-warning); }
.mg-anel[data-tone="error"] .mg-anelValor { stroke: var(--panel-error); }
.mg-anelTexto { fill: var(--panel-foreground); font: 800 13px var(--font-mono), monospace; }

.mg-barras { display: block; width: 96px; height: 40px; }
.mg-barra { fill: var(--panel-primary); }
.mg-barra[data-tone="success"] { fill: var(--panel-success); }
.mg-barra[data-tone="warning"] { fill: var(--panel-warning); }
.mg-barra[data-tone="error"] { fill: var(--panel-error); }
.mg-barraAusente { fill: var(--panel-border); }
.mg-semGrafico { color: var(--panel-foreground-muted); font-size: .85rem; min-width: 64px; text-align: center; }

@media (max-width: 480px) {
  .mg-grade { grid-template-columns: 1fr; }
}

/* modules/deploy_runs/passos/Passos.module.css (prefixo ps-, como o CSS Modules) */
.ps-secao { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.ps-titulo { margin: 0; font: 700 1.05rem/1.3 var(--font-inter), sans-serif; }
.ps-sub { margin: 0; font-size: .8rem; color: var(--panel-foreground-muted); }
.ps-aviso { margin: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--panel-border); background: var(--panel-surface); font-size: .875rem; }
.ps-aviso[data-tone="warning"] { border-color: var(--panel-warning); }
.ps-aviso[data-tone="error"] { border-color: var(--panel-error); }
.ps-escolha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; }
.ps-escolha span { color: var(--panel-foreground-muted); font-weight: 600; }
.ps-escolha select { max-width: 100%; padding: 6px 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-surface); color: var(--panel-foreground); font: inherit; }
.ps-tabelaBox { overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 12px; }
.ps-tabela { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .875rem; }
.ps-tabela th { text-align: left; padding: 10px 12px; font-weight: 600; color: var(--panel-foreground-muted); background: var(--panel-surface-elevated); }
.ps-tabela td { padding: 10px 12px; border-top: 1px solid var(--panel-border); }
.ps-mono { font-family: var(--font-mono), monospace; font-size: .8rem; overflow-wrap: anywhere; }
.ps-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-estado { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--panel-border); font-size: .78rem; font-weight: 600; }
.ps-estado[data-tone="success"] { border-color: var(--panel-success); color: var(--panel-success-foreground); background: var(--panel-success); }
.ps-estado[data-tone="error"] { border-color: var(--panel-error); color: var(--panel-error-foreground); background: var(--panel-error); }
.ps-trilho { min-width: 120px; height: 8px; border-radius: 4px; background: var(--panel-surface-elevated); overflow: hidden; }
.ps-preenchido { height: 8px; background: var(--panel-primary); }
.ps-preenchido[data-tone="error"] { background: var(--panel-error); }

.painel{display:flex}.hb-painel{white-space:normal}.ps-tabela td{vertical-align:top}