/*
 * TOKENS DE TEMA do Financeiro — o arquivo CSS com o seletor de tema do aplicativo
 * (skill `login`, «Tema: um modo só, da porta à sessão», 10/10/2026). Quem pinta lê `var(--x)`.
 *   <html data-theme="light">  força claro (padrão da máquina theme-mode)
 *   <html data-theme="dark">   força escuro
 *   <html> sem `data-theme`    segue `prefers-color-scheme` (modo sistema)
 * Exceção declarada: a folha da porta canônica (entre sentinelas em app/globals.css) traz os
 * próprios seletores de tema, porque `porta.mjs --afere` compara byte a byte com o ativo.
 * Importado no topo de `app/globals.css`.
 */

/* Tipografia 4DO da área logada (ativos do dono, 4DO-brand; mesma família da prévia comercial). */
@font-face { font-family: "Montserrat 4DO"; src: url("./fonts/montserrat-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat 4DO"; src: url("./fonts/montserrat-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex 4DO"; src: url("./fonts/plex-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ── Escuro: padrão sem preferência clara, e o forçado por data-theme="dark" ── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05070d;
  --text: #e2e8f0;
  --surface: #0b0f17;
  --surface-2: #080b12;
  --border: #1e293b;
  --muted: #94a3b8;
  --accent: #67e8f9;
  --danger: #fca5a5;
  --session-loading-veu: rgba(2, 6, 12, .82);
  /* Área logada — shared/ui/app-shell e module-table. Paleta 4DO (ciano #01e2fe, violeta #9c08fe). */
  --fin-bg: #010214; --fin-surface: #101731; --fin-surface-2: #050823; --fin-border: #303b60; --fin-line: #69799e; --fin-text: #f8f9fe; --fin-muted: #b6c0dd;
  --fin-primary: #cc9bff; --fin-accent: #01e2fe; --fin-accent-ink: #010214; --fin-chip: #241a4d; --fin-side: #050823; --fin-side-text: #b6c0dd;
  --fin-ok: #5eead4; --fin-ok-bg: #0b2b33; --fin-danger: #ffb8ce; --fin-danger-bg: #3a0f22;
  /* Porta /admin na identidade 4DO: o bloco do app em app/globals.css liga estes aos `--access-*` da porta canônica. */
  --door-bg: #010214; --door-surface: rgba(16, 23, 49, .88); --door-input: #050823; --door-panel: #050823; --door-border: #303b60; --door-field-border: #69799e;
  --door-text: #f8f9fe; --door-muted: #b6c0dd; --door-danger: #ffb8ce; --door-context: #cc9bff; --door-context-ink: #010214; --door-kicker: #01e2fe;
  --door-action: #01e2fe; --door-action-ink: #010214; --door-shadow: 0 28px 70px rgba(0, 0, 0, .55);
}

/* ── Claro forçado ── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1ea;
  --text: #14171a;
  --surface: #fbf9f4;
  --surface-2: #ffffff;
  --border: #d6d1c6;
  --muted: #4a4d52;
  --accent: #0e7490;
  --danger: #b91c1c;
  --session-loading-veu: rgba(244, 241, 234, .88);
  --fin-bg: #f8f9fe; --fin-surface: #ffffff; --fin-surface-2: #eef1fa; --fin-border: #c3ccde; --fin-line: #647390; --fin-text: #050823; --fin-muted: #495777;
  --fin-primary: #7100be; --fin-accent: #01e2fe; --fin-accent-ink: #010214; --fin-chip: #f1e6fb; --fin-side: #eef1fa; --fin-side-text: #495777;
  --fin-ok: #0b6b57; --fin-ok-bg: #e0f5ef; --fin-danger: #790b39; --fin-danger-bg: #fde8ef;
  --door-bg: #f8f9fe; --door-surface: rgba(255, 255, 255, .92); --door-input: #ffffff; --door-panel: #eef1fa; --door-border: #c3ccde; --door-field-border: #647390;
  --door-text: #050823; --door-muted: #495777; --door-danger: #790b39; --door-context: #7100be; --door-context-ink: #ffffff; --door-kicker: #7100be;
  --door-action: #01e2fe; --door-action-ink: #010214; --door-shadow: 0 18px 44px rgba(5, 8, 35, .10);
}

/* ── Sistema claro, sem escolha explícita ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f4f1ea;
    --text: #14171a;
    --surface: #fbf9f4;
    --surface-2: #ffffff;
    --border: #d6d1c6;
    --muted: #4a4d52;
    --accent: #0e7490;
    --danger: #b91c1c;
    --session-loading-veu: rgba(244, 241, 234, .88);
    --fin-bg: #f8f9fe; --fin-surface: #ffffff; --fin-surface-2: #eef1fa; --fin-border: #c3ccde; --fin-line: #647390; --fin-text: #050823; --fin-muted: #495777;
    --fin-primary: #7100be; --fin-accent: #01e2fe; --fin-accent-ink: #010214; --fin-chip: #f1e6fb; --fin-side: #eef1fa; --fin-side-text: #495777;
    --fin-ok: #0b6b57; --fin-ok-bg: #e0f5ef; --fin-danger: #790b39; --fin-danger-bg: #fde8ef;
    --door-bg: #f8f9fe; --door-surface: rgba(255, 255, 255, .92); --door-input: #ffffff; --door-panel: #eef1fa; --door-border: #c3ccde; --door-field-border: #647390;
    --door-text: #050823; --door-muted: #495777; --door-danger: #790b39; --door-context: #7100be; --door-context-ink: #ffffff; --door-kicker: #7100be;
    --door-action: #01e2fe; --door-action-ink: #010214; --door-shadow: 0 18px 44px rgba(5, 8, 35, .10);
  }
}

/* ══════ 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 ══════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


body {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ══════ 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 81539ce · 348 declarações
   reimplantar: node ~/.claude/skills/login/scripts/porta.mjs --implanta . */
:root {
  --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-context: #0e7490;
  --access-action: #c2410c;
  --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;
}

/* ── 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: #ffffff; -webkit-text-fill-color: #ffffff;
}

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

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

.access-page {
  /* A PORTA PINTA O PRÓPRIO TEXTO.
   *
   * `.access-h1` e `.access-card h2` não declaram `color` — herdavam do
   * `body { color: var(--access-text) }` daqui. Mas o ativo da porta NÃO leva o
   * `body`: levá-lo repintaria o aplicativo inteiro, e isso já foi medido como
   * defeito no fiscal em 27/08/2026.
   *
   * Resultado: a porta chegava nos outros aplicativos com a cor de texto do
   * HOSPEDEIRO. No Atlas, cujo body é #020817, a manchete renderizou PRETA
   * SOBRE FUNDO PRETO — `getComputedStyle('.access-h1').color = rgb(2, 8, 23)`
   * — com o gate respondendo CONFORME 290.
   *
   * É a família do CLAUDE.md §1: as 290 declarações estavam certas e
   * respondiam a outra pergunta — "a folha está certa?", não "a tela está
   * legível?". `.access-page` já pinta o próprio fundo; pinta o próprio texto
   * pelo mesmo motivo, e com o token do próprio ativo. */
  color: var(--access-text);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--access-context) 14%, transparent), transparent 32rem),
    radial-gradient(circle at 82% 90%, color-mix(in srgb, var(--access-action) 9%, transparent), transparent 30rem),
    var(--access-bg);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .access-page {
      background:
        radial-gradient(circle at 18% 12%, rgba(8, 145, 178, 0.14), transparent 32rem),
        radial-gradient(circle at 82% 90%, rgba(234, 88, 12, 0.09), transparent 30rem),
        var(--access-bg);
  }
}

.access-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(22px, 5vw, 72px);
}

.access-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.access-product {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--access-dim);
}

.access-back {
  font-size: 13px;
  color: var(--access-muted);
  text-decoration: none;
  cursor: pointer;
}

.access-back:hover {
  color: var(--access-context);
}

.access-main {
  width: min(1040px, calc(100% - 36px));
  margin: 0 auto;
  padding: 52px 0 76px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(36px, 7vw, 86px);
  align-items: center;
}

.access-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --access-context: #22d3ee;
  color: var(--access-context);
  margin: 0 0 18px;
}

.access-h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  /* SEM ISTO A MANCHETE DEIXA PALAVRA ÓRFÃ.
   *
   * Medido em 28/08/2026 no tools: "A central de / ferramentas / do /
   * ecossistema." — a preposição "do" sozinha numa linha. `text-wrap: wrap`
   * quebra onde couber; `balance` distribui as linhas para não sobrar uma
   * palavra solta.
   *
   * A porta é implantada em N produtos, e cada um tem uma manchete de
   * comprimento diferente: o que cabe bem aqui quebra mal lá. Deixar isso para
   * quem escreve o texto é pedir que ele conte caracteres — e ele não vai. */
  text-wrap: balance;
}

.access-h1 em {
  font-style: normal;
  color: var(--access-action);
}

@media (max-width: 1440px) {
  .access-h1 {
      font-size: clamp(30px, 3.2vw, 40px);
  }
}

.access-lede {
  font-size: 16px;
  line-height: 1.68;
  color: var(--access-muted);
  max-width: 48ch;
  margin: 0;
}

.access-card {
  background: var(--access-surface);
  border: 1px solid var(--access-border);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
  max-width: 560px;
  width: 100%;
}

.access-card h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.access-card-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--access-muted);
  margin: 0 0 24px;
}

/* ═══ TRILHA DAS ETAPAS ═══════════════════════════════════════════════════════
 *
 * A porta tinha as três etapas e não as mostrava: quem estava na tela do código
 * não sabia se faltava uma etapa ou cinco. O `process` e o `tools` já mostram; a
 * forma aqui é a do `tools` (número + rótulo, concluída em ciano), com os tokens
 * medidos deste produto — `--access-context` para o passo vencido e o gradiente
 * de contexto para o atual. Nenhuma cor nova entra: as duas foram validadas por
 * `validate-login-palette.py` e trocar qualquer uma exige rodá-lo de novo. */

.access-progress {
  display: grid;
  /* O NÚMERO DE ETAPAS NÃO É TRÊS. É o que o fluxo tiver.
   *
   * Estava `repeat(3, 1fr)`, escrito na pedra. O fluxo multiempresa tem QUATRO
   * — CNPJ → CPF → CANAL → CÓDIGO — e medido no scraping em 28/08/2026 a quarta
   * caía na linha de baixo, com o traço conector do terceiro item apontando
   * para o vazio.
   *
   * A skill `login` define DUAS máquinas de estados, uma de três etapas e outra
   * de quatro. Uma trilha que só sabe desenhar uma delas contradiz o contrato
   * que ela existe para mostrar. `grid-auto-flow: column` desenha quantas
   * houver, sem ninguém precisar contar. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.access-progress-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--access-dim);
}

/* O traço entre um passo e o próximo. `::after` no item, e não uma borda no
 * contêiner, porque ele não pode aparecer depois do último. */

.access-progress-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(100% - 6px);
  width: 14px;
  height: 1px;
  background: var(--access-border);
}

.access-progress-item > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--access-field-border);
  border-radius: 50%;
  background: var(--access-input);
  color: var(--access-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.access-progress-item small {
  overflow: visible;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

.access-progress-item.is-complete > span {
  border-color: color-mix(in srgb, var(--access-context) 58%, transparent);
  background: color-mix(in srgb, var(--access-context) 10%, transparent);
  color: var(--access-context);
}

.access-progress-item.is-active {
  color: var(--access-text);
}

.access-progress-item.is-active > span {
  border-color: transparent;
  background: var(--access-context);
  color: #ffffff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--access-context) 18%, transparent);
}

@media (max-width: 420px) {
  .access-progress-item small {
      font-size: 9px;
      letter-spacing: 0.06em;
  }
}

/* ═══ CONTAGEM REGRESSIVA DO CÓDIGO ═══════════════════════════════════════════
 *
 * "Vale por 5 minutos" era uma frase, não uma medida — não contava nada, e quem
 * voltasse à aba minutos depois só descobria o vencimento digitando um código
 * morto. Números TABULARES não são preferência: sem eles cada segundo muda a
 * largura do bloco e a linha inteira treme a cada tique. */

.access-timer {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
}

.access-timer-ring { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
}

.access-timer-ring svg { width: 44px; height: 44px; transform: rotate(-90deg);
}

.access-timer-ring circle { fill: none; stroke-width: 4;
}

.access-timer-ring-track { stroke: color-mix(in srgb, var(--access-context) 22%, var(--access-border));
}

.access-timer-ring-progress { stroke: var(--access-context); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 18;
}

.access-timer.is-expired .access-timer-ring-track { stroke: color-mix(in srgb, var(--access-danger) 18%, var(--access-border));
}

.access-timer.is-expired .access-timer-ring-progress { stroke: var(--access-danger); stroke-dashoffset: 113;
}

.access-timer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--access-dim);
}

.access-timer-value {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--access-context);
}

.access-timer.is-expired .access-timer-label,
.access-timer.is-expired .access-timer-value {
  color: var(--access-danger);
}

.access-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--access-muted);
  margin: 0 0 8px;
}

.access-input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  background: var(--access-input);
  border: 1px solid var(--access-field-border);
  border-radius: 10px;
  color: var(--access-text);
  font-family: var(--font-ui);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.access-input:focus-visible {
  border-color: var(--access-context);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--access-context) 30%, transparent);
}

.access-input::placeholder {
  color: var(--access-dim);
}

.access-otp {
  height: 54px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 26px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

.access-cta {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--access-action);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}

.access-cta:hover:not(:disabled) {
  filter: brightness(1.1);
}

/*
 * Desabilitado precisa CONTINUAR LEGÍVEL (visual-spec §9: "CTA desabilitado sem
 * desaparecer"). A 0.45 o rótulo caía abaixo de 4.5:1 contra o fundo do card e
 * o botão lia como decoração. 0.6 mantém o estado óbvio sem apagar o texto.
 */

.access-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Canais empilhados, nunca lado a lado (visual-spec §7). */

.access-channels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.access-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 0 18px 0 16px;
  background: var(--access-input);
  border: 1px solid var(--access-field-border);
  border-radius: 10px;
  color: var(--access-text);
  font-family: var(--font-ui);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}

.access-channel:hover:not(:disabled) {
  border-color: var(--access-context);
}

.access-channel:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.access-channel-dest {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--access-muted);
}

.access-channel-action {
  color: var(--access-context);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.access-channel-separator {
  margin: 14px 0 10px;
  color: var(--access-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.access-rebind-note {
  margin: 0 0 8px;
  color: var(--access-muted);
  font-size: 13px;
  line-height: 1.35;
}

.access-link {
  display: inline-block;
  margin-top: 18px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--access-dim);
  cursor: pointer;
}

.access-link:hover {
  color: var(--access-context);
}

.access-error {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--access-danger);
}

.access-status {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--access-muted);
}

.access-dev {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--access-field-border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--access-muted);
}

.access-footer {
  padding: 0 0 28px;
  text-align: center;
  font-size: 11px;
  color: var(--access-dim);
}

@media (max-width: 760px) {
  .access-main {
      grid-template-columns: 1fr;
      padding: 28px 0 56px;
      width: calc(100% - 36px);
  }
  
  .access-card {
      max-width: none;
  }
}

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

/* Claro medido em 26/09/2026: areia, papel e branco. O escuro acima não muda.
   data-theme vence o sistema. Sem atributo, o sistema decide. Escuro explícito
   vence um sistema operacional claro. Os tokens ficam na própria porta para a
   impressão digital enxergá-los. */
:root[data-theme="light"] .access-page {
  --access-bg: #f4f1ea;
  --access-surface: rgba(255, 255, 255, 0.92);
  --access-input: #ffffff;
  --access-panel: #fbf9f4;
  --access-header: #f9f9f7;
  --access-border: #d6d1c6;
  --access-field-border: #8f897d;
  --access-text: #14171a;
  --access-muted: #4a4d52;
  --access-dim: #5c5f64;
  --access-danger: #b91c1c;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .access-page {
    --access-bg: #f4f1ea;
    --access-surface: rgba(255, 255, 255, 0.92);
    --access-input: #ffffff;
    --access-panel: #fbf9f4;
    --access-header: #f9f9f7;
    --access-border: #d6d1c6;
    --access-field-border: #8f897d;
    --access-text: #14171a;
    --access-muted: #4a4d52;
    --access-dim: #5c5f64;
    --access-danger: #b91c1c;
    color-scheme: light;
  }
}
/* O kicker crava #22d3ee. Sobre a areia isso mede 1,60:1. No claro, #094c5b mede 8,48:1. */
:root[data-theme="light"] .access-kicker { --access-context: #094c5b; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .access-kicker { --access-context: #094c5b; }
}
/* No claro a caixa é papel sobre areia. A sombra preta de 0.55 é do escuro. */
:root[data-theme="light"] .access-card {
  box-shadow: 0 18px 44px rgba(62, 48, 28, 0.10);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .access-card {
    box-shadow: 0 18px 44px rgba(62, 48, 28, 0.10);
  }
}
:root[data-theme="light"] .logo-cons { color: #111111; -webkit-text-fill-color: #111111; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-cons { color: #111111; -webkit-text-fill-color: #111111; }
}

@keyframes session-countdown-pulse { 50% { opacity: 0.58; } }
/* ══════ PORTA CANÔNICA IconsAI · 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 ══════ */

/* ══════ 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 ══════ */

/* ══════ FINANCEIRO · porta e sessão (do app, fora dos ativos) ══════ */
/* Só `var(--…)`: nenhum seletor de tema aqui (tokens em shared/ui/theme/tokens.css). */
/* O contêiner canônico fornece as medidas do seletor de tema da porta. */
.access-header-actions { display: flex; align-items: center; gap: 16px; }
.access-aviso {
  width: min(560px, 100%); margin: 0 auto 16px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--access-border); background: var(--access-surface); color: var(--access-text); font-size: 14px;
}
[data-hard-reload-aviso] {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; margin: 0; width: auto; max-width: min(420px, calc(100% - 32px));
  border-color: var(--border); background: var(--surface); color: var(--text);
}
.session-loading-overlay {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.session-loading-caixa {
  display: grid; justify-items: center; gap: 10px; width: min(360px, 100%); padding: 28px 24px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: center;
}
.session-loading-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--text); animation: session-loading-giro 0.9s linear infinite;
}
.session-loading-titulo { margin: 0; font-weight: 600; }
.session-loading-detalhe { margin: 0; font-size: 14px; opacity: 0.8; }
@keyframes session-loading-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .session-loading-spinner { animation-duration: 2.4s; } }
@media (max-width: 520px) {
  .access-header { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .access-header-actions { gap: 12px; }
}
/* Identidade 4DO na porta (ordem do dono, 13/10/2026). A folha canônica acima fica byte a byte;
   aqui os `--access-*` dela passam a ler os `--door-*` de tokens.css. O `:root` na frente só
   empata a especificidade dos seletores de tema da canônica, e esta folha vem depois. */
:root .access-page[data-access-flow] {
  --access-bg: var(--door-bg); --access-surface: var(--door-surface); --access-input: var(--door-input); --access-panel: var(--door-panel);
  --access-header: var(--door-bg); --access-border: var(--door-border); --access-field-border: var(--door-field-border);
  --access-text: var(--door-text); --access-muted: var(--door-muted); --access-dim: var(--door-muted); --access-danger: var(--door-danger);
  --access-context: var(--door-context); --access-action: var(--door-action);
  --font-display: "Montserrat 4DO", system-ui, sans-serif; --font-ui: "Montserrat 4DO", system-ui, sans-serif;
  --font-mono: "Plex 4DO", ui-monospace, monospace;
  font-family: var(--font-ui);
}
:root .access-page[data-access-flow] .access-kicker { --access-context: var(--door-kicker); font-weight: 400; }
:root .access-page[data-access-flow] .access-h1 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
:root .access-page[data-access-flow] .access-card { box-shadow: var(--door-shadow); border-radius: 24px; }
:root .access-page[data-access-flow] .access-card h2 { font-weight: 600; }
:root .access-page[data-access-flow] .access-cta { color: var(--door-action-ink); border-radius: 999px; padding: 0 22px; font-weight: 600; }
:root .access-page[data-access-flow] .access-progress-item.is-active > span { color: var(--door-context-ink); }
:root .access-page[data-access-flow] .access-progress-item small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; }
/* Montserrat é mais larga que a fonte da canônica: no celular os quatro rótulos não cabem lado a
   lado, então só o passo atual mostra o nome (os outros seguem no texto para leitor de tela). */
@media (max-width: 520px) {
  :root .access-page[data-access-flow] .access-progress { grid-auto-columns: auto; justify-content: space-between; }
  :root .access-page[data-access-flow] .access-progress-item:not(.is-active) { grid-template-columns: 26px; }
  :root .access-page[data-access-flow] .access-progress-item:not(.is-active) small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :root .access-page[data-access-flow] .access-progress-item:not(:last-child)::after { display: none; }
}
.access-logo-4do + .access-product { align-self: center; }
.access-logo-4do { height: 26px; width: auto; display: block; align-self: center; color: var(--access-text); }
/* Retomada antes da pintura (HR-05): com `tab_id` no histórico, a porta do SSR fica invisível e o loading aparece. */
.retomada-antes-da-pintura { display: none; }
:root[data-sessao-retomando] .retomada-antes-da-pintura { display: contents; visibility: visible; }
:root[data-sessao-retomando] .access-page { visibility: hidden; }
/* ══════ FINANCEIRO · porta e sessão · FIM ══════ */