/* ===== shared/ui/theme/tokens.css (cópia literal, sem @import) ===== */
/*
 * 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, sem @import) ===== */
/* 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, sem @import) ===== */
/* 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 (cópia literal, sem @import) ===== */

/*
 * Tokens do shell de acesso — skill `design-login-cnpj-otp`, references/visual-spec.md §2.
 *
 * Os dois acentos do produto são `--access-context` (ciano) e `--access-action`
 * (laranja). O par foi escolhido rodando o validador da skill, não por gosto:
 *   scripts/validate-login-palette.py --context '#0891b2' --action '#ea580c'
 *   → passed: true  (branco 3.68/3.56 · dark 4.92/5.09 · page 5.47/5.66)
 * O laranja canônico do wordmark, #f97316, REPROVA (2.8:1 no branco) — por isso
 * o acento é o #ea580c, que preserva matiz e passa. Trocar qualquer um dos dois
 * exige rodar o validador de novo; contraste aqui é gate, não preferência.
 *
 * O wordmark NÃO usa estes tokens: `i #f97316` / `cons #ffffff` / `.ai #ef4444`
 * são a marca corporativa e são imutáveis (skill `logo`). Cor de produto vive no
 * favicon e na UI.
 */
/*
 * O FALLBACK VAI DENTRO DO var(), e a vírgula não substitui isso.
 *
 * Estava `var(--font-jakarta), "Plus Jakarta Sans", system-ui, sans-serif`. A
 * vírgula parece uma cadeia de fallback de font-family, e não é: `var()` SEM
 * fallback próprio, quando a variável não existe, torna a declaração INTEIRA
 * inválida em tempo de valor computado. A propriedade não cai para o próximo
 * item da lista — ela deixa de existir.
 *
 * `--font-jakarta` e companhia são nomes do `next/font`, do APLICATIVO. O ativo
 * da porta é implantado em aplicativos que não os declaram, e ali as cinco
 * variáveis viravam vazias. Medido em produção no tools em 27/08/2026:
 *     --font-logo=[]  --font-logo-i=[]  --font-ui=[]
 * e o `i` do wordmark, que é Libre Baskerville serifada, renderizando em sans.
 *
 * A impressão digital não via: ela compara o TEXTO dos dois lados, e
 * `var(--font-jakarta)` é idêntico a `var(--font-jakarta)`. Declaração idêntica
 * que não resolve continua idêntica e continua quebrada.
 */
: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;
}

* {
  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;
}

/* ── Wordmark icons.ai — skill `logo`, cores imutáveis ─────────────────────── */
.logo-iconsai { display: inline-flex; align-items: center; gap: 0.02em; font-family: var(--font-logo); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; cursor: pointer; line-height: 1; }
.logo-i { font-family: var(--font-logo-i); font-size: 1.55em; font-weight: 700; font-style: normal; color: #f97316; -webkit-text-fill-color: #f97316; }
.logo-cons { font-weight: 800; color: var(--logo-cons); -webkit-text-fill-color: var(--logo-cons); }
.logo-ai { font-weight: 800; color: #ef4444; -webkit-text-fill-color: #ef4444; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Painel autenticado ───────────────────────────────────────────────────── */
.painel {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  background: var(--access-bg);
}
.painel-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px clamp(12px, 2vw, 24px);
  border-bottom: 1px solid var(--access-border);
  background: var(--access-header, #080b12);
  color: var(--access-text);
  backdrop-filter: blur(16px);
  min-width: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
/* ── A NAV QUEBRA LINHA, E NÃO ROLA ───────────────────────────────────────────
 *
 * Medido pelo dono em 26/08/2026, viewport de 1324px: "Ecossistema" vazava
 * **108px** de `.painel-nav-links`, e o item anterior renderizava cortado
 * ("DEPLO"). São 13 itens numa linha só.
 *
 * O pai tinha `overflow-x: auto`, e é aí que o defeito deixa de ser cosmético:
 * a régua horizontal de um contêiner interno não tem affordance nenhuma — não
 * aparece barra até o mouse entrar, e ninguém rola dentro de uma barra de menu.
 * **"Ecossistema" e "Skills" existiam no DOM e eram inalcançáveis por clique.**
 * Duas rotas do console fora de alcance.
 *
 * `flex-wrap: wrap` resolve sem esconder nada: os itens que não cabem descem
 * para a segunda linha e continuam clicáveis. A nav fica mais alta, e isso é
 * intencional — o `ResizeObserver` deste componente já publica a altura real em
 * `--painel-nav-height`, então tudo que se ancora nela acompanha sozinho.
 *
 * Não usei menu "mais" porque esconder item de navegação atrás de um segundo
 * clique é a mesma perda de alcance com outro nome, e porque 13 itens em duas
 * linhas cabem — a rolagem era desnecessária desde o começo. */
.painel-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  flex: 1;
  min-width: 0;
}
.painel-nav a {
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--access-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.painel-nav > .logo-iconsai {
  text-transform: none;
}
.painel-nav .painel-header-link { font-size: 12px !important; line-height: 1; }
.painel-nav a:hover {
  color: var(--access-text);
}
.painel-nav a[aria-current="page"] {
  color: var(--access-text);
  border-bottom-color: var(--access-context);
}
.painel-who {
  min-width: 0;
  max-width: 13ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--access-dim);
}
.painel-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 0 0 auto;
}
.painel-tools > .btn {
  height: 34px;
  padding: 0 13px;
  border-radius: 6px;
  font-size: 12px;
}
.painel-main {
  width: min(var(--painel-max-width), calc(100% - 40px));
  min-width: 0;
  margin: 0 auto;
  padding: 36px 0 72px;
}

/* Fallback de `app/(painel)/loading.tsx`. Deliberadamente discreto: com o
   prefetch que aquele arquivo destrava, a maioria das trocas de tela nem chega
   a mostrá-lo — ele existe para que o clique tenha resposta imediata quando o
   servidor demora, não para virar uma tela de espera. */
.painel-carregando {
  margin: 0;
  color: var(--access-muted);
  font-size: 14px;
}

@media (max-width: 900px) {
  .painel-nav {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .painel-nav-links {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    padding-bottom: 4px;
  }
  .painel-who {
    display: none;
  }
}
/* Abaixo de 680px o gestor canônico quebra em linhas (degrau do ativo), mas só
   quebra se o host lhe der um teto: com `.painel-tools` em `0 0 auto` ele tomava
   a largura de conteúdo e saía da tela — medido em 17/10/2026, 390px de viewport
   e gestor terminando em 517px, com o botão de sair cortado pelo `overflow`
   da nav. Isto só posiciona o host; nenhum token do gestor muda. */
@media (max-width: 680px) {
  .painel-tools {
    flex: 1 1 100%;
    max-width: 100%;
    justify-content: flex-end;
  }
  .painel-session-host {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }
}
.painel-h1 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.painel-lede {
  font-size: 14px;
  color: var(--access-muted);
  margin: 0 0 28px;
  max-width: 70ch;
  line-height: 1.6;
}

.card {
  background: var(--access-surface);
  border: 1px solid var(--access-border);
  border-radius: 16px;
  padding: 22px;
}
.card + .card {
  margin-top: 20px;
}
.card h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.stat {
  background: var(--access-input);
  border: 1px solid var(--access-border);
  border-radius: 12px;
  padding: 16px;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--access-dim);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  margin-top: 6px;
  letter-spacing: -0.02em;
}
.stat-sub {
  font-size: 12px;
  color: var(--access-muted);
  margin-top: 4px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}
.filter-row label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--access-muted);
  font-size: 12px;
}
.filter-row select {
  min-width: 150px;
  border: 1px solid var(--access-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--access-input);
  color: var(--access-text);
  cursor: pointer;
}
.erro-grave { color: var(--access-danger); }
.erro-medio { color: var(--access-action); }
.erro-baixo { color: var(--access-context); }

.table-wrap {
  overflow-x: auto;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--access-dim);
  font-weight: 600;
  padding: 0 14px 10px 0;
  white-space: nowrap;
}
table.data td {
  padding: 11px 14px 11px 0;
  border-top: 1px solid var(--access-border);
  color: var(--access-text);
  white-space: nowrap;
}
table.data td.num {
  font-family: var(--font-mono);
}
.empty {
  padding: 28px 0;
  text-align: center;
  color: var(--access-dim);
  font-size: 14px;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--access-context) 40%, transparent);
  color: var(--access-context);
}
.badge.live {
  border-color: color-mix(in srgb, var(--access-action) 45%, transparent);
  color: var(--access-action);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  align-items: flex-end;
}
.filters .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filters select,
.filters input {
  height: 40px;
  padding: 0 12px;
  background: var(--access-input);
  border: 1px solid var(--access-field-border);
  border-radius: 8px;
  color: var(--access-text);
  font-family: var(--font-ui);
  font-size: 14px;
}
.filters select:focus-visible,
.filters input:focus-visible {
  outline: none;
  border-color: var(--access-context);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--access-context) 30%, transparent);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--access-field-border);
  background: var(--access-input);
  color: var(--access-text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover:not(:disabled) {
  border-color: var(--access-context);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn.primary {
  background: var(--access-action);
  border-color: var(--access-action);
  color: #fff;
}
.btn.danger {
  color: var(--access-danger);
  border-color: color-mix(in srgb, var(--access-danger) 40%, transparent);
}

/* ── Ecossistema ───────────────────────────────────────────────────────────────
 * Severidade usa SÓ token que já existe neste arquivo: `--access-danger` para o
 * bloqueante, `--access-action` para o desvio, `--access-context` para o conforme.
 * Nenhuma cor nova entra aqui de propósito — cor nova obriga a rodar
 * `validate-login-palette.py` de novo, e as três já passaram.
 */
.eco-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.eco-head h2 {
  margin: 0;
}
.eco-def {
  font-size: 13px;
  color: var(--access-muted);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 80ch;
}

.eco-toggles {
  display: flex;
  gap: 6px;
}
.eco-toggle {
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--access-field-border);
  background: var(--access-input);
  color: var(--access-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.eco-toggle:hover {
  color: var(--access-text);
}
.eco-toggle.on.sev-crit {
  color: var(--access-danger);
  border-color: color-mix(in srgb, var(--access-danger) 55%, transparent);
  background: color-mix(in srgb, var(--access-danger) 12%, var(--access-input));
}
.eco-toggle.on.sev-warn {
  color: var(--access-action);
  border-color: color-mix(in srgb, var(--access-action) 55%, transparent);
  background: color-mix(in srgb, var(--access-action) 12%, var(--access-input));
}
.eco-toggle.on.sev-ok {
  color: var(--access-context);
  border-color: color-mix(in srgb, var(--access-context) 55%, transparent);
  background: color-mix(in srgb, var(--access-context) 12%, var(--access-input));
}

/* `table.data td` é `nowrap` porque as outras tabelas são de números curtos.
   Esta é de prosa: sem o `normal`, cada linha viraria uma faixa horizontal. */
table.data.eco td {
  white-space: normal;
  vertical-align: top;
  line-height: 1.55;
}
table.data.eco {
  table-layout: fixed;
}
table.data.eco .eco-c-nome {
  width: 15%;
}
table.data.eco .eco-c-url {
  width: 20%;
}
table.data.eco .eco-c-exp {
  width: 30%;
}
table.data.eco .eco-c-prob {
  width: 35%;
}
/* Trilho de severidade na borda esquerda da linha: a cor fica ao lado do fato,
   sem gastar uma coluna só para repetir o que o chip já diz. */
table.data.eco tbody tr td:first-child {
  border-left: 3px solid transparent;
  padding-left: 11px;
}
table.data.eco tbody tr.sev-crit td:first-child {
  border-left-color: var(--access-danger);
}
table.data.eco tbody tr.sev-warn td:first-child {
  border-left-color: var(--access-action);
}
table.data.eco tbody tr.sev-ok td:first-child {
  border-left-color: var(--access-context);
}

.eco-nome {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.eco-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--access-dim);
  margin-top: 3px;
}
.eco-url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--access-context);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.eco-url:hover {
  text-decoration: underline;
}
.eco-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.eco-chip.sev-crit {
  color: var(--access-danger);
  border: 1px solid color-mix(in srgb, var(--access-danger) 40%, transparent);
}
.eco-chip.sev-warn {
  color: var(--access-action);
  border: 1px solid color-mix(in srgb, var(--access-action) 40%, transparent);
}
.eco-chip.sev-ok {
  color: var(--access-context);
  border: 1px solid color-mix(in srgb, var(--access-context) 40%, transparent);
}
.eco-prob {
  margin: 0;
  font-size: 13px;
  color: var(--access-muted);
}
table.data.eco code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--access-input);
  border: 1px solid var(--access-border);
  overflow-wrap: anywhere;
}
table.data.eco b {
  color: var(--access-text);
  font-weight: 700;
}

/* Abaixo de ~900px a tabela de 4 colunas não cabe sem virar coluna de uma
   palavra. Vira cartão empilhado, com o rótulo da coluna à esquerda. */
@media (max-width: 900px) {
  table.data.eco,
  table.data.eco tbody,
  table.data.eco tr,
  table.data.eco td {
    display: block;
    width: 100%;
  }
  table.data.eco thead {
    display: none;
  }
  table.data.eco tbody tr {
    border-top: 1px solid var(--access-border);
    padding: 14px 0;
  }
  table.data.eco tbody tr td {
    border-top: none;
    padding: 4px 0;
  }
  table.data.eco tbody tr td:first-child {
    border-left: none;
    padding-left: 10px;
  }
  table.data.eco tbody tr.sev-crit {
    border-left: 3px solid var(--access-danger);
    padding-left: 10px;
  }
  table.data.eco tbody tr.sev-warn {
    border-left: 3px solid var(--access-action);
    padding-left: 10px;
  }
  table.data.eco tbody tr.sev-ok {
    border-left: 3px solid var(--access-context);
    padding-left: 10px;
  }
}

/* Árvore de deploy — só o que a tela não tinha: o conector da sequência e o
   motivo do botão desabilitado. O resto reusa .card, .badge, .btn e .table-wrap. */
.deploy-seq { font-family: var(--font-mono); color: var(--access-dim); white-space: nowrap; }
.table-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:14px 0; }
.table-controls label { display:grid; gap:5px; color:var(--access-dim); font:600 .68rem var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
.table-controls input, .table-controls select { min-width:220px; padding:8px 10px; border:1px solid var(--access-border); border-radius:6px; background:var(--access-panel); color:var(--access-text); font:500 .72rem var(--font-mono); }
.deploy-motivo { margin-top: 4px; font-size: 12px; color: var(--access-muted); max-width: 34ch; }
/* O campo de motivo do cancelamento. Ele existe porque `window.prompt` devolve
   `null` quando o navegador bloqueia diálogos — clique dado, zero efeito, zero
   explicação (medido em 01/09/2026). Sem estilo declarado ele herdava o input
   cru do navegador, branco sobre painel escuro. */
.deploy-motivo-campo {
  display: block;
  margin-top: 6px;
  width: min(30ch, 100%);
  padding: 5px 8px;
  border: 1px solid var(--access-border);
  border-radius: 7px;
  background: var(--access-bg);
  color: var(--access-text);
  font: 400 12px/1.4 var(--font-mono);
}
.deploy-motivo-campo::placeholder { color: var(--access-dim) }
.deploy-motivo-campo:focus-visible { outline: 2px solid var(--access-context); outline-offset: 1px }

/* ── Gestor de sessão ────────────────────────────────────────────────────────
   A barra saiu daqui em 19/09/2026. Ela é o ATIVO da skill `session-toggle`
   (3.1.0), implantado no bloco «GESTOR DE SESSÃO CANÔNICO» mais abaixo, e
   nenhuma regra local pode mudar largura, altura, gap, padding ou tipografia
   dele — o harness da skill reprova, nome por nome, quem tentar. As 48 regras
   `.top-nav-session-*` / `.session-*` que viviam aqui eram a "variante compacta
   do painel operacional": a nona maneira de desenhar a mesma barra no
   ecossistema, e a razão de oito aplicativos terem divergido sem ninguém ver.

   O que SOBRA local é o que não é o gestor: o posicionamento do hospedeiro
   (`.painel-tools`, logo abaixo), o aviso de estado para leitor de tela — que
   fica FORA do componente justamente para não empurrar as medidas do contrato —
   e o loading do `$hard-reload`. */
.top-nav-session-a11y { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Loading do hard reload (`$hard-reload` 2.1.0, `data-hard-reload-loading`).
   Cobre a tela do clique até `location.reload()` e, no documento novo, enquanto
   a aba é reatada: sem ele a tela ficava viva e clicável durante a espera. */
.session-loading-overlay { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--session-loading-veu); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.session-loading-caixa { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: min(90vw, 300px); max-width: 420px; padding: 26px 28px 22px; border: 1px solid var(--access-border); border-radius: 14px; background: var(--access-panel); text-align: center; box-shadow: 0 18px 60px rgb(0 0 0 / .35); }
.session-loading-spinner { width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; border: 3px solid var(--access-border); border-top-color: var(--access-context); animation: session-loading-spin .8s linear infinite; }
.session-loading-titulo { margin: 0; color: var(--access-text); font-size: 15px; font-weight: 600; line-height: 1.4; }
.session-loading-detalhe { margin: 0; color: var(--access-muted); font-size: 13px; line-height: 1.5; }
@keyframes session-loading-spin { to { transform: rotate(360deg); } }

/* MODO ESPERA (hard-reload@1.3.0, ordem do dono 07/10/2026). Toast dos 5 min finais,
   com o arco de `.access-timer-ring`.
   Só tokens `--access-*` (definidos em :root nos dois temas). */
.idle-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2147483000; display: flex; align-items: center; gap: 12px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid var(--access-border); border-radius: 12px; background: var(--access-panel); color: var(--access-text); box-shadow: 0 12px 40px rgb(0 0 0 / .3); }
.idle-toast-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.idle-toast-mensagem { font-size: 13px; line-height: 1.45; color: var(--access-text); }
.idle-toast-valor { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--access-context); }
/* A trava do CPF saiu daqui (09/10/2026): é a canônica de `modules/config/ui/trava-de-cpf.css`,
   autocontida, com tokens próprios medidos (`hard_reload/telas.py contraste`). */
@media (max-width: 480px) { .idle-toast { left: 16px; right: 16px; transform: translateY(-50%); max-width: none; } }
@media (prefers-reduced-motion: reduce) { .session-loading-spinner { animation-duration: 2.4s; } }
.conversas-table{min-width:0;table-layout:fixed}.conversas-table td,.conversas-table th{overflow-wrap:anywhere;word-break:break-word}.consolidado-text{color:var(--access-text)}.consolidado-text small{color:var(--access-warn,#c2410c);font-weight:700}


/* ═══ NADA ROLA NA HORIZONTAL ═════════════════════════════════════════════════
 *
 * Duas ordens do dono, 25/08/2026: "eliminar com os scrolls horizontais" e
 * "só fazer maior que a soma total de espaço existente" — nada pode exceder o
 * espaço disponível.
 *
 * ── POR QUE NÃO `overflow-x: hidden` NO BODY ──────────────────────────────────
 *
 * Seria uma linha e faria o sintoma sumir. Também esconderia o conteúdo que não
 * coube, sem deixar rastro — o mesmo defeito que uma barra de progresso a 40%
 * sem medição: a tela para de acusar e o problema fica. O conserto é fazer o
 * conteúdo CABER.
 *
 * ── O QUE EMPURRAVA, MEDIDO ───────────────────────────────────────────────────
 *
 *   .tabela  (Dod)      min-width:  760px
 *   .table   (Erros)    min-width: 1100px
 *   .table   (Prompts)  min-width: 1080px
 *   .table   (Conversas)min-width: 1160px
 *
 * `table-layout: fixed` é o que permite a tabela ignorar a largura natural do
 * conteúdo e dividir o espaço que existe. Sem ele, uma célula com um comando
 * longo dita a largura da tabela inteira, e nenhum `max-width` no pai segura. */
/* `table-layout: fixed` foi a primeira tentativa e o e2e a reprovou: numa tabela
 * de muitas colunas ele divide o espaço por igual e espreme alguma até a largura
 * zero — o teste `tokens` achou o elemento e recebeu `hidden`. Largura zero é
 * conteúdo perdido, do mesmo jeito que `overflow:clip` era.
 *
 * O layout `auto` encolhe sozinho DESDE QUE nenhuma célula tenha um trecho
 * inquebrável. É isso que `overflow-wrap: anywhere` garante abaixo — e é por
 * onde o defeito entrava: `min-width` fixo mandava a tabela ser maior que o pai
 * independentemente do conteúdo. */
table {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
}
th, td { overflow-wrap: anywhere; word-break: normal; min-width: 0 }

/* O invólucro CONTINUA `auto`, e isso é decisão medida, não descuido.
 *
 * A primeira versão pôs `overflow-x: clip` aqui — e o e2e reprovou na hora:
 * `tokens relaciona dia, LLM, usage e custo` achou o elemento e recebeu
 * `hidden`. `clip` não faz o conteúdo caber; faz ele sumir. Foi exatamente o
 * que eu tinha escrito quatro linhas acima que não se deve fazer, e fiz mesmo
 * assim — o gate viu o que eu não vi.
 *
 * Com `table-layout: fixed` a tabela cabe, e a régua nunca aparece. Se um dia
 * aparecer, é conteúdo que voltou a estourar e precisa ser CORRIGIDO — não
 * escondido por folha de estilo. */
.table-wrap { overflow-x: auto }

/* `<code>` e `<pre>` são a exceção legítima: quebrar comando no meio destrói a
 * capacidade de copiar. Eles rolam DENTRO da própria caixa e nunca empurram o
 * pai. */
pre, code { max-width: 100%; overflow-x: auto }

/* O documento inteiro, por último: se algo escapar de tudo acima, é defeito e
 * o gate tem de pegar — não a folha de estilo tem de esconder. */
html, body { max-width: 100% }

/* As quatro etapas do processo de deploy, na página /deploy. Lista numerada e
   não parágrafo corrido: a reclamação medida em 03/09/2026 foi "o processo não
   está claro", e o que estava faltando era a SEQUÊNCIA — quem faz o quê, em que
   ordem. Parágrafo esconde ordem; lista numerada é a ordem. */
.painel-passos {
  margin: 0 0 22px;
  padding: 0 0 0 1.4em;
  max-width: 92ch;
  color: var(--access-muted);
  font-size: 14px;
  line-height: 1.62;
}
.painel-passos li { margin-bottom: 8px }
.painel-passos li::marker { color: var(--access-context); font-weight: 700 }
.painel-passos strong { color: var(--access-text) }
.painel-passos em { color: var(--access-warn, #fdba74); font-style: normal }

/* ══════ PORTA CANÔNICA IconsAI · INÍCIO ══════ */
/* Ativo da skill `login`. NÃO EDITE AQUI: melhoria de porta entra pelo
   ativo e chega a todos os aplicativos de uma vez.
   origem ffe94d8 · 317 declarações
   reimplantar: node ~/.claude/skills/login/scripts/porta.mjs --implanta . */
:root {
  --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;
}

/* Cores da porta nos dois temas, `color-scheme`, o véu do hard reload e a tinta de
   destaque (`--access-header/accent/warn/bad/ok/wait`) vivem em
   shared/ui/theme/tokens.css — o único arquivo com seletor de tema (gate:tema-unico).
   `data-theme` vence o sistema. Sem atributo, o sistema decide. */

/* ── Wordmark icons.ai — skill `logo`, cores imutáveis ─────────────────────── */

.logo-iconsai { display: inline-flex; align-items: center; gap: 0.02em; font-family: var(--font-logo); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; cursor: pointer; line-height: 1;
}

.logo-i { font-family: var(--font-logo-i); font-size: 1.55em; font-weight: 700; font-style: normal; color: #f97316; -webkit-text-fill-color: #f97316;
}

.logo-cons { font-weight: 800; color: var(--logo-cons); -webkit-text-fill-color: var(--logo-cons);
}

.logo-ai { font-weight: 800; color: #ef4444; -webkit-text-fill-color: #ef4444;
}

/* ── Shell de acesso (visual-spec §4) ─────────────────────────────────────── */

/* Regras `.access-*` da porta vivem em modules/config/design_system/porta.css (CDS-02); importado no topo deste arquivo. */

.painel-nav > .logo-iconsai {
  text-transform: none;
}

/* ══════ PORTA CANÔNICA IconsAI · FIM ══════ */


/* O kicker crava #22d3ee no escuro (1,60:1 sobre a areia); no claro, #094c5b (8,48:1).
   A sombra da caixa também muda por tema. Os dois valores vivem em
   shared/ui/theme/tokens.css: `--access-kicker-context` e `--access-card-shadow`. */

/* BOLA DE ALERTAS DA NAVEGACAO — pedido do dono, 04/09/2026.
 *
 * As cores foram MEDIDAS par a par, nao escolhidas (CLAUDE.md global §11). O
 * par obvio — branco sobre `--access-danger` — da 3.76:1 e REPROVA para texto
 * normal; o numero da bola e texto pequeno, entao vale o piso de 4.5:1.
 *   alta   #0b0f17 sobre #ef4444 = 5.10:1
 *   aviso  #ffffff sobre #c2410c = 5.18:1
 * Trocar qualquer um dos dois exige medir de novo. */
/* O item da nav embrulha link + bola para que a bola NAO entre no nome
 * acessivel do link. `.painel-nav-links` e flex com gap: o embrulho vira o
 * flex item que o <a> era, entao o espacamento da barra nao muda. */
.painel-nav-item { display: inline-flex; align-items: center; }

.painel-nav-bola {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.painel-nav-bola[data-severidade="alta"] { background: var(--access-danger); color: var(--access-panel); }
.painel-nav-bola[data-severidade="aviso"] { background: var(--access-action); color: #ffffff; }

/* O SINO DOS AVISOS — a metade que diz O QUE, ao lado da marca que diz ONDE.
 *
 * Ordem do dono, 04/09/2026. `AvisosSino` estava mergeado desde o #93 e nunca
 * foi montado; junto com ele faltava TODO o estilo — em `origin/main`,
 * `grep -c painel-sino app/globals.css` devolvia 0. Montar o componente sem
 * isto poria um botão sem forma e um modal transparente na barra.
 *
 * Pares medidos sobre `--access-panel` #0b0f17 (CLAUDE.md global §11):
 *   ícone repouso  #94a3b8 = 7.48:1   ·  ícone hover  #eef2ff = 17.15:1
 *   título de área #22d3ee = 10.61:1  ·  detalhe      #94a3b8 = 7.48:1
 * A contagem reusa exatamente os dois pares já medidos da bola — 5.10:1 e
 * 5.18:1 —, e reusar é o ponto: duas escalas de severidade na mesma barra
 * ensinariam duas leituras para a mesma cor. */
.painel-sino {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--access-border);
  border-radius: 6px;
  background: transparent;
  color: var(--access-muted);
  cursor: pointer;
}
.painel-sino:hover { color: var(--access-text); border-color: var(--access-field-border); }
.painel-sino:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.painel-sino svg { width: 19px; height: 19px; display: block; }

/* A contagem monta sobre o canto do sino. `min-width` com `padding` lateral
 * deixa o 1 redondo e o 12 em cápsula, sem cortar o segundo dígito. */
.painel-sino-conta {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.painel-sino[data-severidade="alta"] .painel-sino-conta { background: var(--access-danger); color: var(--access-panel); }
.painel-sino[data-severidade="aviso"] .painel-sino-conta { background: var(--access-action); color: #ffffff; }

/* `position: fixed` E `inset: 0` porque o teste mede a altura do fundo contra
 * `window.innerHeight`: o modal sai da barra por portal justamente para não
 * herdar o `backdrop-filter` dela, que criaria um conteiner de posicionamento
 * e devolveria 1440x84 em vez da janela inteira. */
.painel-sino-fundo {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 6vh, 72px) 16px 16px;
  background: rgba(3, 6, 12, 0.72);
  overflow-y: auto;
}
.painel-sino-modal {
  width: min(560px, 100%);
  padding: 20px 22px 22px;
  border: 1px solid var(--access-border);
  border-radius: 12px;
  background: var(--access-panel);
  color: var(--access-text);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.55);
}
.painel-sino-modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.painel-sino-modal h2 { margin: 0; font-family: var(--font-display); font-size: 19px; }
.painel-sino-area { margin-top: 16px; }
.painel-sino-area h3 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--access-accent);
}
.painel-sino-area ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
/* A severidade tem borda E o texto do título: cor sozinha não comunica estado. */
.painel-sino-area li {
  padding: 10px 12px;
  border: 2px solid var(--access-action);
  border-radius: 8px;
  background: var(--access-input);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.painel-sino-area li[data-severidade="alta"] { border-color: var(--access-danger); }
.painel-sino-area li strong { font-size: 14px; font-weight: 600; }
.painel-sino-area li span { font-size: 12.5px; color: var(--access-muted); line-height: 1.5; }

/* Tokens que o CSS canônico do accident lê, no ESCOPO do overlay e não em :root.
   `Ecossistema.module.css` já usa `var(--border)`/`var(--foreground)` sem defini-los;
   declarar em :root mudaria aquela tela em silêncio. Cores medidas sobre o painel
   #0b0f17: texto #eef2ff 17,15:1 · muted #94a3b8 7,48:1 · Ficar usa o par fixo #eef2ff sobre #151d29 em todos os temas (15,15:1) · Sair #fff sobre #b91c1c 6,47:1. */
.accident-overlay{--border:var(--access-field-border);--surface-elevated:var(--access-panel);--foreground:var(--access-text);--foreground-muted:var(--access-muted);--focus:#22d3ee;--secondary:#151d29;--secondary-foreground:#eef2ff;--error:#b91c1c;--error-foreground:#ffffff}
/* ══════ ACCIDENT CANÔNICO 2.0.0 · INÍCIO ══════ */
/* Ativo da skill `accident`. NÃO EDITE AQUI: reimplantar com
   node ~/.claude/skills/accident/scripts/harness.mjs --implanta <raiz> */
.accident-overlay{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(2,6,12,.72);pointer-events:auto}
.accident-overlay[data-accident-overlay="notice"]{background:transparent;pointer-events:none}
.accident-dialog{width:min(100%,440px);border:1px solid var(--border);border-radius:16px;background:var(--surface-elevated);color:var(--foreground);padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.45);pointer-events:auto}
.accident-dialog h2{margin:0 0 8px;font-size:20px}.accident-dialog p{margin:0;color:var(--foreground-muted)}
.accident-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.accident-actions button{min-width:96px;min-height:44px;border-radius:10px;cursor:pointer}.accident-actions button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[data-accident-action="stay"]{border:1px solid var(--border);background:var(--secondary);color:var(--secondary-foreground)}
[data-accident-action="leave"]{border:1px solid var(--error);background:var(--error);color:var(--error-foreground)}
@media(max-width:520px){.accident-overlay{padding:16px}.accident-dialog{padding:20px}.accident-actions{flex-direction:column}.accident-actions button{width:100%}}
/* ══════ ACCIDENT CANÔNICO 2.0.0 · FIM ══════ */

/* ══════ GESTOR DE SESSÃO CANÔNICO · INÍCIO ══════ */
/* Ativo da skill `session-toggle`. NÃO EDITE AQUI: melhoria de gestor entra
   pelo ativo e chega a todos os aplicativos de uma vez.
   reimplantar: node ~/.claude/skills/session-toggle/scripts/harness.mjs --implanta . */
/* Gestor de sessão canônico 3.3.0 — contrato dimensional.
   ESTRUTURA é imutável e igual em Light e Dark; só as cores mudam, e as cores
   moram em `session-theme.css`, implantado no arquivo de tokens de tema do app
   (CSS único: nenhum seletor de tema fora dele).
   Toda medida sai de um token: nenhuma largura depende do texto exibido. */
.session-manager{
  --session-height:34px;--session-gap:12px;--session-radius:8px;
  --session-identity-width:170px;--session-mode-width:104px;--session-mode-item:28px;
  --session-time-width:198px;--session-time-value-width:84px;
  --session-ring-size:28px;--session-hours-width:42px;--session-hours-height:26px;
  --session-switch-width:20px;--session-switch-height:11px;--session-thumb-size:8px;
  --session-action-size:34px;--session-reload-width:37px;--session-logout-width:37px;
  --session-icon:15px;
  display:inline-flex;height:var(--session-height);min-width:0;align-items:center;gap:var(--session-gap);
  margin-inline-start:auto;margin-left:auto;justify-content:flex-end;color:var(--session-muted);white-space:nowrap;
}
.session-identity{display:flex;flex-direction:column;justify-content:center;overflow:hidden;width:var(--session-identity-width);max-width:var(--session-identity-width);flex:0 0 var(--session-identity-width);color:var(--session-muted);font-size:12px;font-weight:600;line-height:1.15;text-align:right;white-space:normal}
.session-identity-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Mode Session — Claro · Escuro · Sistema. O rótulo vive no `title`.
   O gestor reserva o slot; o seletor que o ocupa é o do app (`modeControl`). */
.session-mode-slot{display:inline-flex;width:var(--session-mode-width);height:var(--session-height);flex:0 0 var(--session-mode-width);align-items:center}
.session-mode{display:inline-flex;width:var(--session-mode-width);height:var(--session-height);flex:0 0 var(--session-mode-width);align-items:center;justify-content:space-between;margin:0;padding:0 5px;border:1px solid var(--session-border);border-radius:var(--session-radius);background:transparent}
.session-mode-opcao{display:inline-flex;width:var(--session-mode-item);height:var(--session-mode-item);align-items:center;justify-content:center;border-radius:6px;cursor:pointer}
.session-mode-opcao input{position:absolute;width:1px;height:1px;border:0;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.session-mode-opcao svg{width:16px;height:16px;fill:none;stroke:var(--session-muted);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.session-mode-opcao:hover{background:var(--session-hover)}
.session-mode-opcao:has(input:checked){background:var(--session-hover)}
.session-mode-opcao:has(input:checked) svg{stroke:var(--session-fg)}
.session-mode-opcao:has(input:focus-visible){outline:2px solid var(--session-accent);outline-offset:1px}

/* Tempo — contagem com presença vertical, largura fixa por token. */
.session-time{display:inline-flex;width:var(--session-time-width);height:var(--session-height);flex:0 0 var(--session-time-width);align-items:center;gap:8px}
.session-ring{display:inline-flex;width:var(--session-ring-size);height:var(--session-ring-size);flex:0 0 var(--session-ring-size);align-items:center;justify-content:center}
.session-ring svg{display:block;width:var(--session-ring-size);height:var(--session-ring-size);transform:rotate(-90deg)}
.session-ring-track,.session-ring-value{fill:none;stroke-width:2.5}
.session-ring-track{stroke:var(--session-border)}
.session-ring-value{stroke:var(--session-accent);stroke-dasharray:1;stroke-linecap:round}
.session-countdown{width:var(--session-time-value-width);flex:0 0 var(--session-time-value-width);color:var(--session-countdown);font:650 17px/1 var(--font-mono,"JetBrains Mono",ui-monospace,monospace);font-variant-numeric:tabular-nums;letter-spacing:.02em;text-align:left}
.session-hours{display:inline-flex;width:var(--session-hours-width);flex:0 0 var(--session-hours-width);align-items:center}
.session-hours input{box-sizing:border-box;width:var(--session-hours-width);height:var(--session-hours-height);padding:0 5px;border:1px solid var(--session-border);border-radius:7px;outline:none;background:var(--session-surface);color:var(--session-fg);font:600 12px/1 var(--font-mono,"JetBrains Mono",ui-monospace,monospace);text-align:center;font-variant-numeric:tabular-nums}
.session-toggle{display:inline-flex;width:var(--session-switch-width);height:var(--session-height);flex:0 0 var(--session-switch-width);align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}
.session-track{position:relative;display:block;width:var(--session-switch-width);height:var(--session-switch-height);border-radius:999px;background:var(--session-border)}
.session-thumb{position:absolute;top:1px;left:1px;width:var(--session-thumb-size);height:var(--session-thumb-size);border-radius:50%;background:var(--session-surface)}
.session-toggle[aria-checked="true"] .session-track{background:var(--session-accent)}
.session-toggle[aria-checked="true"] .session-thumb{left:11px}

.session-reload,.session-logout{display:inline-flex;height:var(--session-action-size);align-items:center;justify-content:center;padding:0;border:1px solid var(--session-border);border-radius:var(--session-radius);background:transparent;color:var(--session-muted);cursor:pointer}
.session-reload{width:var(--session-reload-width);flex:0 0 var(--session-reload-width)}
.session-logout{width:var(--session-logout-width);flex:0 0 var(--session-logout-width)}
.session-reload:hover,.session-logout:hover{background:var(--session-hover);color:var(--session-fg)}
.session-reload svg,.session-logout svg{width:var(--session-icon);height:var(--session-icon);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.session-reload:focus-visible,.session-logout:focus-visible,.session-toggle:focus-visible,.session-hours input:focus-visible{outline:2px solid var(--session-accent);outline-offset:1px}

/* Abaixo de 980px a identidade cede largura — e é o ATIVO que decide quanto,
   não o app. Medido em 19/09/2026 no piloto do `tools`: com 170px fixos, a
   página de Skills em tablet (834px) passou a ter rolagem horizontal (881px).
   O token muda por LARGURA, nunca por tema: Light e Dark seguem idênticos. */
@media(max-width:980px){.session-manager{--session-identity-width:96px}}
@media(max-width:680px){.session-manager{height:auto;flex-wrap:wrap;justify-content:flex-end;gap:9px}.session-identity{width:100%;max-width:100%;flex:1 0 100%}}
/* ══════ GESTOR DE SESSÃO CANÔNICO · FIM ══════ */
/* ===== modules/user_registration/ui/TabelaCadastro.module.css (cópia literal, sem @import) ===== */
.bloco { container-type:inline-size; margin: 18px 0 8px; min-width:0; max-width:100%; }
.barra { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:10px; }
.pesquisa { display:grid; gap:6px; min-width:min(360px,100%); color:var(--access-muted); font-size:12px; }
.pesquisa input { border:1px solid var(--access-border); border-radius:8px; background:var(--access-surface); color:var(--access-text); padding:10px 11px; font:inherit; }
.conta { color:var(--access-muted); font:600 11px var(--font-mono); letter-spacing:.05em; }
.conta strong { color:var(--access-text); }
.ordemCompacta { display:none; }
.ordemCompacta label { display:grid; gap:6px; min-width:0; color:var(--access-muted); font-size:12px; }
.ordemCompacta select { min-width:0; border:1px solid var(--access-border); border-radius:8px; background:var(--access-surface); color:var(--access-text); padding:10px 11px; font:inherit; }

.tableWrap { width:100%; min-width:0; }
.tabela { width:100%; table-layout:fixed; }
.tabela th:nth-child(1) { width:18%; }
.tabela th:nth-child(2) { width:13%; }
.tabela th:nth-child(3) { width:14%; }
.tabela th:nth-child(4) { width:20%; }
.tabela th:nth-child(5) { width:7%; }
.tabela th:nth-child(6) { width:12%; }
/* Reserva a linha inteira de ferramentas, incluindo os dez botões de confirmação. */
.tabela thead tr:first-child th:nth-child(1):nth-last-child(7), .tabela thead tr:first-child th:nth-child(4):nth-last-child(4) { width:auto; }
.tabela thead tr:first-child th:nth-child(2):nth-last-child(6) { width:145px; }
.tabela thead tr:first-child th:nth-child(3):nth-last-child(5) { width:155px; }
.tabela thead tr:first-child th:nth-child(5):nth-last-child(3) { width:70px; }
.tabela thead tr:first-child th:nth-child(6):nth-last-child(2) { width:155px; }
.tabela th:nth-child(7) { width:420px; }
.tabela td,.tabela th { white-space:normal; overflow-wrap:anywhere; }
.tabela td { font-size:12px; }
.copyValue { min-width:0; overflow-wrap:anywhere; }
.tabelaCentral { table-layout:auto; }
.emailSemQuebra .copyValue { white-space:nowrap; overflow-wrap:normal; flex-shrink:0; }
.emailSemQuebra .cpfComCopia { max-width:100%; overflow-x:auto; }
.paginacao { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; font-size:12px; color:var(--access-muted); }
.paginacao > div { display:flex; gap:8px; }

.tabela td:last-child { overflow:visible; }
/* Identificadores curtos preservados; nomes e e-mails adaptam-se à largura disponível. */
.tabela td.quebra { white-space:normal; overflow-wrap:anywhere; min-width:0; }
.tabela td.semQuebra { white-space:nowrap; overflow-wrap:normal; }
.ordenavel { display:inline-flex; align-items:center; gap:6px; width:100%; cursor:pointer; border:0; background:transparent; padding:0 0 10px; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; text-align:left; }
.ordenavel:hover { color:var(--access-context); }
.seta { opacity:.28; font-size:9px; line-height:1; }
.setaAtiva { opacity:1; color:var(--access-context); }
.linhaFiltro th { padding-bottom:12px; }
.filtro { width:100%; min-width:0; box-sizing:border-box; border:1px solid var(--access-border); border-radius:6px; background:var(--access-input,var(--access-surface)); color:var(--access-text); padding:6px 8px; font:400 12px var(--font-sans); }
.filtroAtivo { border-color:var(--access-context); }

.socio { display:inline-block; padding:1px 7px; border:1px solid color-mix(in srgb,var(--access-context) 55%,var(--access-border)); border-radius:999px; background:color-mix(in srgb,var(--access-context) 12%,transparent); color:var(--access-context); font:700 10px var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.nao { color:var(--access-dim); font-size:12px; }
.acoes { display:flex; flex-wrap:nowrap; align-items:center; gap:5px; overflow:visible; }
.acoes > button { flex-shrink:0; }
.cpfComCopia { display:inline-flex; align-items:center; gap:7px; max-width:100%; }
.feedbackAcessivel { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.copiar { width:28px; height:28px; }
/* Copiar sem caixa: só o ícone, ao lado do valor (ordem do dono, 14/10/2026). */
.copiarNu { position:relative; flex:none; width:22px; height:22px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; background:none; color:var(--access-muted,var(--access-text)); cursor:pointer; }
.copiarNu:hover, .copiarNu:focus-visible { color:var(--access-context); }
.copiarNu svg { width:14px; height:14px; }
.copiarNu[data-dica]::after { content:attr(data-dica); position:absolute; right:0; bottom:calc(100% + 6px); z-index:5; transform:none; padding:5px 8px; border-radius:6px; background:var(--access-panel); color:var(--access-text); border:1px solid var(--access-border); font:600 11px var(--font-sans); letter-spacing:.02em; white-space:nowrap; opacity:0; pointer-events:none; }
.copiarNu:hover::after, .copiarNu:focus-visible::after { opacity:1; }
.feedbackCopia { margin:8px 0 0; color:var(--access-ok); font-size:12px; }
.local { white-space:nowrap; }
.icone { position:relative; width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--access-border); background:var(--access-input,var(--access-surface)); color:var(--access-text); cursor:pointer; }
.icone:hover:not(:disabled) { background:color-mix(in srgb,var(--access-context) 15%,var(--access-panel)); border-color:var(--access-context); color:var(--access-context); }
.icone:disabled { opacity:.45; cursor:not-allowed; }
.perigo:hover:not(:disabled) { border-color:var(--access-action); color:var(--access-action); }
.icone[data-dica]::after {
  content: attr(data-dica);
  position:absolute; left:50%; top:calc(100% + 8px); z-index:5;
  transform:translateX(-50%);
  padding:5px 8px; border-radius:6px;
  background:var(--access-panel); color:var(--access-text);
  border:1px solid var(--access-border);
  font:600 11px var(--font-sans); letter-spacing:.02em; white-space:nowrap;
  opacity:0; pointer-events:none;
}
.icone[data-dica]:hover::after, .icone[data-dica]:focus-visible::after { opacity:1; }
/* Na linha da tabela a dica abre ACIMA e alinhada pela direita do botão. Centrada e abaixo,
 * a do último botão passava da borda direita e a da última linha passava do rodapé: mesmo
 * com opacity:0 ela conta como conteúdo do .table-wrap (overflow-x:auto) e criava a régua
 * horizontal e vertical. Overflow para cima e para a esquerda não gera rolagem. */
.acoes .icone[data-dica]::after { left:auto; right:0; top:auto; bottom:calc(100% + 8px); transform:none; }
.aviso { border:1px solid color-mix(in srgb,var(--access-action) 55%,var(--access-border)); background:color-mix(in srgb,var(--access-action) 9%,transparent); border-radius:10px; padding:13px 15px; color:var(--access-text); margin:12px 0 0; }
.sucessoAviso { border:1px solid color-mix(in srgb,var(--access-ok) 55%,var(--access-border)); background:color-mix(in srgb,var(--access-ok) 9%,transparent); border-radius:10px; padding:13px 15px; color:var(--access-text); margin:12px 0 0; }
.modalFundo { position:fixed; inset:0; z-index:1400; display:grid; place-items:center; padding:20px; background:rgba(2,6,12,.78); }
.modal { width:min(1320px,100%); max-height:min(820px,90vh); overflow:auto; border:1px solid var(--access-border); border-radius:12px; background:var(--access-surface); padding:20px; box-shadow:0 28px 80px rgba(0,0,0,.55); }
.modalTopo { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.modalTopo h2 { margin:0; }
.modalEstreito { width:min(560px,100%); }
.campanhas { margin:0; padding:0; border:0; display:grid; gap:8px; }
.campanhas legend { margin-bottom:8px; }
.campanha { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border:1px solid var(--access-border); border-radius:10px; cursor:pointer; }
.campanha:hover { border-color:var(--access-context); }
.campanha input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--access-context); }
.campanha > span { display:grid; gap:2px; }
.rodapeModal { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.destinoAviso { margin:8px 0 0; color:var(--access-text); font:600 13px var(--font-mono); white-space:nowrap; overflow-x:auto; }
.muted { color:var(--access-muted); font-size:12px; line-height:1.5; }
.logs { margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.logs code { color:var(--access-context); font-size:11px; }

/* Ordem do dono (04/11/2026), «Acesso e permissões em <app>» de toda empresa:
 * sem rolagem horizontal e sem quebra dentro de palavra ou número. A fonte, o espaçamento
 * e os botões encolhem com a largura do bloco (cqi) em vez de quebrar ou rolar. */
.semRolagem { min-width:0; max-width:100%; }
.tabelaCentral.tabela th { width:auto !important; }
.tabelaCentral.tabela td, .tabelaCentral.tabela th { white-space:nowrap; overflow-wrap:normal; word-break:keep-all; padding-right:clamp(4px,.55cqi,14px); }
.tabelaCentral.tabela td { font-size:clamp(9px,.72cqi,12px); padding-top:clamp(6px,.6cqi,11px); padding-bottom:clamp(6px,.6cqi,11px); }
.tabelaCentral.tabela th { font-size:clamp(8px,.62cqi,10px); letter-spacing:.06em; }
.tabelaCentral .copyValue { white-space:nowrap; overflow-wrap:normal; }
.tabelaCentral .cpfComCopia { gap:4px; }
.tabelaCentral .copiarNu { width:clamp(16px,1.3cqi,22px); height:clamp(16px,1.3cqi,22px); }
.tabelaCentral .copiarNu svg { width:clamp(11px,.9cqi,14px); height:clamp(11px,.9cqi,14px); }
.tabelaCentral .acoes { gap:clamp(2px,.3cqi,5px); }
.tabelaCentral .acoes > .icone, .tabelaCentral .acoes > button { width:clamp(22px,2.1cqi,36px); height:clamp(22px,2.1cqi,36px); }
.tabelaCentral .acoes svg { width:clamp(12px,1cqi,16px); height:clamp(12px,1cqi,16px); }
.tabelaCentral .socio { font-size:clamp(8px,.6cqi,10px); padding:1px clamp(4px,.45cqi,7px); white-space:nowrap; }
/* Cada pill com o seu tom de verde; o texto mistura o verde com a cor do texto do tema
 * para manter contraste no claro e no escuro. */
.verdeSuperadmin, .verdeGestor, .verdeAtivo, .verdePaciente, .verdeProfissional, .verdeParceiro, .verdeRepresentante {
  border-color:color-mix(in srgb,var(--verde) 60%,var(--access-border)) !important;
  background:color-mix(in srgb,var(--verde) 16%,transparent) !important;
  color:color-mix(in srgb,var(--verde) 72%,var(--access-text)) !important;
}
.verdeSuperadmin { --verde:#15803d; }
.verdeGestor { --verde:#10b981; }
.verdeAtivo { --verde:#84cc16; }
.verdePaciente { --verde:#22c55e; }
.verdeProfissional { --verde:#14b8a6; }
.verdeParceiro { --verde:#4d7c0f; }
.verdeRepresentante { --verde:#047857; }

@container (max-width:1280px) {
  .ordemCompacta { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; max-width:100%; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display:block; width:100%; box-sizing:border-box; }
  .tabela thead tr:first-child { display:none; }
  .tabela thead { display:block; width:100%; }
  .tabela .linhaFiltro { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
  .tabela .linhaFiltro th { display:block; padding:0; width:100%; }
  .linhaFiltro th:last-child { display:none; }
  .tabela tbody tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:16px; margin:0 0 10px; padding:12px; border:1px solid var(--access-border); border-radius:12px; background:color-mix(in srgb,var(--panel-success) 4%,var(--panel-surface)); }
  .tabela td { display:flex; flex-direction:column; gap:5px; padding:6px 0; border:0; white-space:nowrap !important; overflow-wrap:normal !important; word-break:keep-all; min-width:0; }
  .tabelaCentral.tabela td { font-size:clamp(9px,1.25cqi,12px); padding:6px 0; }
  .tabela td[data-label="E-mail"], .tabela td[data-label="CPF"] { grid-column:span 2; }
  .tabela td::before { content:attr(data-label); color:var(--access-muted); font:700 11px/1.4 var(--font-sans); }
  .tabela td:last-child { grid-column:1/-1; flex-direction:row; align-items:center; gap:14px; }
  .cpfComCopia { justify-content:flex-start; align-self:flex-start; }
}
@container (max-width:500px) {
  .acoes { gap:3px; }
  .acoes > button { width:26px; height:32px; }
  .acoes:has(> button:nth-of-type(10)) { gap:2px; }
  .acoes:has(> button:nth-of-type(10)) > button { width:24px; }
  .tabela tbody tr { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; }
  .tabela td[data-label="E-mail"], .tabela td[data-label="CPF"], .tabela td[data-label="Nome"] { grid-column:1/-1; }
  .tabelaCentral.tabela td { font-size:clamp(9px,2.6cqi,12px); }
  .tabela .linhaFiltro { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tabela td:last-child { flex-direction:column; align-items:flex-start; }
  .paginacao { align-items:flex-start; flex-direction:column; }
  .paginacao > div { align-self:flex-end; }
}
.papeis { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
/* ===== composição desta tela (só layout, cores dos tokens) ===== */
.pagina { max-width: 1440px; margin: 0 auto; padding: 32px 16px 64px; }
.area { display: grid; gap: 12px; padding: 20px 0; border-top: 1px solid var(--access-field-border); }
.area:first-of-type { border-top: 0; padding-top: 4px; }
.areaTopo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.areaTopo h3 { margin: 0; }
.areaTopo p { margin: 4px 0 0; }
.areaTopo > div { min-width: 0; flex: 1 1 200px; }
.areaTopo h3, .pagina h2, .areaTopo p { overflow-wrap: anywhere; }
.areaTopo .btn { flex: 0 1 auto; max-width: 100%; height: auto; min-height: 44px; padding: 10px 20px; white-space: normal; text-align: center; }
@media (max-width: 420px) {
  .pagina { padding: 16px 8px 40px; }
  .pagina .card { padding: 14px; }
}
/* Leitura mínima de 12 px (F1) e pílulas com respiro (R9): vale para as três áreas. */
.area .tabelaCentral.tabela td { font-size: 13px; padding-top: 10px; padding-bottom: 10px; padding-right: 14px; }
.area .tabelaCentral.tabela th { font-size: 12px; padding-right: 14px; }
.area .muted, .area .conta { font-size: 13px; }
.area .socio { font-size: 12.5px; padding: 4px 10px; line-height: 1.4; }
.area .acoes { gap: 8px; }
.area .pesquisa { display: grid; gap: 6px; font-size: 13px; min-width: min(320px, 100%); }
.area .pesquisa input { width: 100%; }
/* Abaixo de 1100 px de área útil, cada pessoa vira um cartão com rótulo por campo: nada encolhe nem se encosta. */
@container (max-width: 1100px) {
  .area .tabelaCentral.tabela thead { display: none; }
  .area .tabelaCentral.tabela, .area .tabelaCentral.tabela tbody { display: block; width: 100%; }
  .area .tabelaCentral.tabela tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; margin-bottom: 12px;
    border: 1px solid var(--access-field-border); border-radius: 12px; }
  .area .tabelaCentral.tabela td { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px;
    min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
  .area .tabelaCentral.tabela td > * { min-width: 0; }
  .area .tabelaCentral.tabela td::before { content: attr(data-label); font: 600 12px var(--font-mono); color: var(--access-muted);
    text-transform: uppercase; letter-spacing: .04em; }
  .area .acoes { flex-wrap: wrap; }
  .area .acoes .icone[data-dica]::after { display: none; }
}
@container (max-width: 380px) {
  .area .tabelaCentral.tabela td { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .area .tabelaCentral.tabela tr { padding: 12px; }
}