/* painel/public/css/painel.css — layout do Painel Mercati.
   Usa os tokens da marca (colors/spacing/typography/base). Proporção da marca:
   Verde 60 (barra + nav) · Papel 25 (conteúdo) · Âmbar 10 (acento/ação) · Tinta 5 (texto).
   Fraunces nos títulos, Archivo no corpo/UI, Space Mono nos números/labels. */

:root {
  --barra-altura: 64px;
  --nav-largura: 248px;
  /* teto de largura das 8 telas (Task M1 — ver bloco "telas" abaixo, perto de `.conteudo`) */
  --tela-largura: 88rem;
}

html, body { height: 100%; }
body { min-height: 100%; }

/* pular para o conteúdo (acessibilidade) */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--sand);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.pular:focus { left: 0; }

/* ---------- barra superior (verde) ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--barra-altura);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--green);
  color: var(--text-on-inverse);
  box-shadow: var(--shadow-md);
}
.barra__logo { height: 40px; width: auto; display: block; }
.barra__contexto { color: var(--text-on-inverse-soft); margin-left: auto; }
.barra__acoes { display: flex; align-items: center; gap: var(--space-3); }
/* quando não há contexto, as ações ainda encostam à direita */
.barra__contexto:empty { margin-left: auto; }

/* ---------- layout: nav + conteúdo ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--nav-largura) 1fr;
  min-height: calc(100vh - var(--barra-altura));
}

/* ---------- nav lateral (verde profundo) ---------- */
.nav {
  background: var(--green-deep);
  color: var(--text-on-inverse);
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  border-right: var(--border-width) solid var(--border-inverse);
}
.nav__grupo { display: flex; flex-direction: column; gap: var(--space-1); }
.nav__area {
  color: var(--amber);
  padding: 0 var(--space-3) var(--space-2);
  opacity: 0.9;
}
.nav__item {
  display: block;
  color: var(--text-on-inverse-soft);
  text-decoration: none;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__item:hover {
  background: rgba(232, 223, 208, 0.06);
  color: var(--sand);
  text-decoration: none;
}
.nav__item--ativo {
  background: rgba(226, 162, 60, 0.14);
  color: var(--white);
  border-left-color: var(--amber);
  font-weight: var(--weight-semibold);
}

/* ---------- conteúdo (papel) ---------- */
.conteudo {
  background: var(--surface);
  padding: var(--space-7) var(--space-7);
  min-width: 0;
}
.conteudo:focus { outline: none; }
.carregando { color: var(--text-mute); }

/* ---------- telas: largura máxima única + centralização (Task M1 — fim do vazio à direita) ----------
   `.conteudo` preenche a coluna `1fr` inteira do grid (fundo/papel inclusos) — MAS até aqui a tela
   (`.home`/`.agendamentos`/etc.) só tinha `max-width` sem margem horizontal automática, então em
   monitor largo ela ficava colada à ESQUERDA com uma banda vazia enorme à direita (medido em
   1920px: `.conteudo` de 1672px de largura, tela de 1152px só, 472px vazios à direita). Correção:
   1 variável + 1 seletor combinado para as 8 raízes de tela, DRY (nenhuma pode divergir por engano
   — o valor mudou aqui uma vez só e as 8 herdam igual) — `margin-inline: auto` centraliza o bloco
   dentro do `.conteudo` (que segue preenchendo a coluna toda, fundo incluso); `width: 100%` garante
   que a tela SEMPRE tenta ocupar o espaço disponível primeiro (em telas mais estreitas que o teto
   ela nunca fica menor que o `.conteudo`, evitando gap de sobra); `max-width` é o teto que evita
   linha de texto/grade esticada demais em monitor ultra-largo. 88rem (1408px, `--tela-largura`
   no `:root` do topo do arquivo) alarga sensivelmente os 72–76rem (1152–1216px) de antes sem
   esticar as grades de cartão além do confortável — validado pelo eval `painel/layout` (gaps
   simétricos + juiz visual em 1920/1440). */
.home,
.agendamentos,
.execucoes,
.tokens,
.clientes,
.producoes,
.aprovacoes,
.saude {
  width: 100%;
  max-width: var(--tela-largura);
  margin-inline: auto;
}

/* vazio honesto "em construção" */
.vazio {
  max-width: 46rem;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.vazio__titulo { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.vazio__lede { color: var(--text-soft); max-width: 40rem; }
.vazio__rota {
  margin-top: var(--space-5);
  display: inline-block;
  color: var(--text-mute);
  font-size: var(--text-xs);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

/* números em Space Mono (nunca métrica solta — a tela liga a resultado) */
.num { font-family: var(--font-mono); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* ---------- botões ---------- */
.btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--acento {
  background: var(--amber);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn--acento:hover { background: color-mix(in oklab, var(--amber) 88%, black); }
.btn--fantasma {
  background: transparent;
  color: var(--text-on-inverse);
  border-color: var(--border-inverse);
}
.btn--fantasma:hover { background: rgba(232, 223, 208, 0.1); }

/* ---------- toasts (SSE 'mudanca') ---------- */
.toasts {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: min(360px, 90vw);
}
.toast {
  background: var(--green);
  color: var(--sand);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  animation: toast-entra var(--dur-base) var(--ease-out);
}
.toast--saindo { opacity: 0; transform: translateY(8px); transition: all var(--dur-slow) var(--ease-out); }
.toast__titulo { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.toast__corpo { color: var(--text-on-inverse-soft); font-size: var(--text-xs); margin-top: var(--space-1); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- login (overlay) ---------- */
.login {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%);
}
/* `display: grid` acima tem a MESMA especificidade do `[hidden]{display:none}` do UA stylesheet,
   e regra de autor sempre vence regra de UA na cascata — sem isto, `hidden` no #login vira
   estético (o overlay continua no layout, cobrindo a tela inteira e interceptando clique, mesmo
   com o atributo presente). Achado pelo caso de fumaça do Painel (Task 1.2). */
.login[hidden] { display: none; }
.login__cartao {
  width: min(400px, 100%);
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.login__simbolo { height: 44px; width: auto; }
.login__titulo { font-size: var(--text-2xl); }
.login__lede { color: var(--text-soft); font-size: var(--text-sm); }
.login__campo { display: flex; flex-direction: column; gap: var(--space-2); }
.login__campo input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-strong) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
}
.login__campo input:focus { border-color: var(--brand); }
.login__erro {
  color: var(--danger);
  background: var(--danger-tint);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* ---------- responsivo ---------- */
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
    border-right: none;
    border-bottom: var(--border-width) solid var(--border-inverse);
  }
  .nav__grupo { flex: 1 1 auto; }
  .conteudo { padding: var(--space-5); }
}

/* ---------- affordance de rolagem horizontal (padrão único do Painel — Task 5.1) ----------
   3 blocos rolam na horizontal em telas estreitas: ranking/por-modelo (Tokens), validade da base
   (Saúde), histórico de cliente (Clientes) — todos já tinham `overflow-x:auto` (funcional), mas sem
   NENHUMA dica visual de que dava pra rolar (minor herdado das Tasks 2.5/4.1). Sombra sutil nas
   bordas aparece/some sozinha conforme o scroll chega no início/fim — técnica de "scroll shadow":
   2 gradientes ACOMPANHAM o conteúdo (background-attachment:local) e cobrem a sombra quando não há
   pra onde rolar mais; 2 ficam FIXOS no viewport do wrapper (attachment:scroll) e são a sombra em si.
   `--rola-x-fundo` pinta a cobertura com a cor de fundo de CADA contexto (cartão vs. página) — sem
   ela a sombra apareceria por cima do conteúdo com a cor errada. As regras de layout específicas de
   cada tela (`.tokens__secao`, `.saude__secao`, `.saude-tabela-wrap`, `.cliente-detalhe__tabela-wrap`)
   continuam nas suas próprias seções — só a cor de fundo saiu de lá pra cá, pra não haver DOIS donos
   do `background`. `.saude-tabela-wrap` entra à parte de `.saude__secao`: só a tabela de validade tem
   um wrap ANINHADO por dentro da seção (herdado do fix de `white-space:nowrap` da Task 4.1) — é ESSE
   wrap interno que de fato rola (a seção externa nunca chega a estourar, o filho absorve o overflow
   antes), então é nele que a sombra precisa aparecer; confirmado com getComputedStyle antes de fechar
   (`.saude__secao` sozinho teria ficado com a sombra "morta", nunca visível de verdade). */
.tokens__secao,
.saude__secao,
.saude-tabela-wrap,
.cliente-detalhe__tabela-wrap {
  --rola-x-fundo: var(--surface-card);
  background-repeat: no-repeat;
  background-color: var(--rola-x-fundo);
  /* `background-image` (longhand) só aceita a lista de <image> — "100% 0" depois do gradiente é
     sintaxe do SHORTHAND `background`, não da longhand; deixar aqui invalida a propriedade INTEIRA
     (computed value cai pra "none", nenhuma camada aparece). Posição de cada camada vai em
     `background-position`, à parte — pego ao verificar com getComputedStyle antes de dar por pronto. */
  background-image:
    linear-gradient(to right, var(--rola-x-fundo) 50%, transparent),
    linear-gradient(to left, var(--rola-x-fundo) 50%, transparent),
    linear-gradient(to right, rgba(21, 18, 14, 0.16), transparent),
    linear-gradient(to left, rgba(21, 18, 14, 0.16), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* histórico de cliente mora direto no papel da página (`.cliente-detalhe` não é cartão), não num
   `--surface-card` — sem este override a cobertura pintaria um branco errado sobre o papel bege. */
.cliente-detalhe__tabela-wrap { --rola-x-fundo: var(--surface); }

/* ============================================================
   Tela Home (Task 2.2) — Attention Card + tiles + gauge + últimas execuções + tendência.
   Papel domina (a tela É o "conteudo"); âmbar só em acento pontual (tamanho de run, foco do gauge);
   verde só no gauge (mede orçamento) e num tick de destaque — a proporção 60/25/10/5 vale pro
   PAINEL inteiro (barra+nav já carregam o verde), não precisa repetir aqui.
   ============================================================ */
.home { display: flex; flex-direction: column; gap: var(--space-6); }
.home__titulo { margin-top: var(--space-2); }

.home__secao-titulo {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

/* ---------- Attention Card ---------- */
.attention {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.attention__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.attention__item { border-radius: var(--radius-md); border-left: 4px solid var(--border); }
.attention__item--alta { border-left-color: var(--danger); background: var(--danger-tint); }
.attention__item--media { border-left-color: var(--warning); background: var(--warning-tint); }
.attention__item--baixa { border-left-color: var(--info); background: var(--info-tint); }
.attention__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  text-decoration: none;
  border-radius: inherit;
}
.attention__link:hover,
.attention__link:focus-visible { background: rgba(21, 18, 14, 0.04); text-decoration: none; }
.attention__selo {
  flex: 0 0 auto;
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--ink);
}
.attention__item--alta .attention__selo { background: var(--danger); color: var(--white); }
.attention__item--media .attention__selo { background: var(--warning); color: var(--ink); }
.attention__item--baixa .attention__selo { background: var(--info); color: var(--white); }
.attention__vazio { color: var(--text-soft); padding: var(--space-2) 0; }

/* ---------- 5 stat tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
}
.tile {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 3px solid var(--border-strong);
}
.tile--ok { border-top-color: var(--success); }
.tile--atencao { border-top-color: var(--warning); }
.tile--critico { border-top-color: var(--danger); }
.tile__valor {
  font-size: var(--text-2xl);
  color: var(--text);
}
.tile__valor--ok { color: var(--success); }
.tile__valor--atencao { color: var(--ink); }
.tile__valor--critico { color: var(--danger); }
.tile__nota { color: var(--text-mute); font-size: var(--text-xs); }

/* ---------- gauge de orçamento ---------- */
.gauge-secao {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}
.gauge { width: 220px; height: auto; flex: 0 0 auto; }
.gauge__legenda { flex: 1 1 16rem; min-width: 14rem; display: flex; flex-direction: column; gap: var(--space-2); }
.gauge__pct { font-size: var(--text-3xl); }
.gauge__pct--ok { color: var(--success); }
.gauge__pct--atencao { color: var(--warning); }
.gauge__pct--critico { color: var(--danger); }
.gauge__detalhe { color: var(--text-soft); font-size: var(--text-sm); }
.gauge__projecao { color: var(--text-mute); font-size: var(--text-xs); }

/* ---------- painel de tokens do mês (Task M3 — substitui o gauge de orçamento em US$) ---------- */
.painel-mes {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.painel-mes__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-3);
}
.painel-mes__stat { display: flex; flex-direction: column; gap: var(--space-1); }
.painel-mes__valor { font-size: var(--text-3xl); color: var(--brand); }
.painel-mes__valor--projecao { color: var(--ink); }
.painel-mes__nota { color: var(--text-mute); font-size: var(--text-xs); }
.painel-mes__detalhe { color: var(--text-soft); font-size: var(--text-sm); margin-top: var(--space-3); }

/* ---------- últimas execuções ---------- */
.execucoes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.execucoes-lista__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-bottom: var(--border-width) solid var(--border);
}
.execucoes-lista__item:last-child { border-bottom: none; }
.badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}
.badge--ok { background: var(--success-tint); color: var(--success); }
.badge--falha { background: var(--danger-tint); color: var(--danger); }
.badge--tamanho { background: var(--amber-soft); color: var(--ink); }
.execucoes-lista__tarefa { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.execucoes-lista__ts { color: var(--text-mute); font-size: var(--text-xs); flex: 0 0 auto; }

/* ---------- tendência 14d ---------- */
.tendencia {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.tendencia__grafico { position: relative; height: 160px; }

@media (max-width: 720px) {
  .gauge-secao { flex-direction: column; align-items: stretch; text-align: center; }
  .gauge { align-self: center; }
}

/* ============================================================
   Tela Agendamentos (Task 2.3) — heartbeat bar, uptime e custos por tarefa.
   Cada tarefa é um <details> nativo: cabeçalho sempre visível (semáforo, resumo, meta, barra de
   batidas, uptime); corpo (custos/sparkline/últimas 10) só quando expandido — teclado/aria-expanded
   de graça, sem JS de estado. Mesma proporção de marca da Home: papel domina, âmbar só em acento.
   ============================================================ */
.agendamentos { display: flex; flex-direction: column; gap: var(--space-6); }
.agendamentos__titulo { margin-top: var(--space-2); }

.tarefas-lista { display: flex; flex-direction: column; gap: var(--space-4); }

.tarefa-card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.tarefa-card--success { border-left-color: var(--success); }
.tarefa-card--warning { border-left-color: var(--warning); }
.tarefa-card--danger { border-left-color: var(--danger); }
.tarefa-card--info { border-left-color: var(--info); }
.tarefa-card--neutro { border-left-color: var(--border-strong); }
.tarefa-card--inativa { border-left-color: var(--stone); opacity: 0.85; }

.tarefa-card__cabecalho {
  cursor: pointer;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}
.tarefa-card__cabecalho::marker { display: none; content: ""; }
.tarefa-card__cabecalho::-webkit-details-marker { display: none; }
.tarefa-card__cabecalho:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.tarefa-card__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tarefa-card__id { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tarefa-card__nome { font-size: var(--text-md); }
.tarefa-card__seta {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-mute);
  border-bottom: 2px solid var(--text-mute);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.tarefa-card[open] .tarefa-card__seta { transform: rotate(-135deg); }

.selo {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--white);
}
.selo--success { background: var(--success); }
.selo--warning { background: var(--warning); color: var(--ink); }
.selo--danger { background: var(--danger); }
.selo--info { background: var(--info); }
.selo--neutro { background: var(--border-strong); color: var(--ink); }
.selo--inativa { background: var(--stone); color: var(--ink); }

.tarefa-card__resumo { color: var(--text-soft); font-size: var(--text-sm); max-width: 60ch; }

.tarefa-card__meta-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.tarefa-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-xs); }
.chip {
  background: var(--surface-2);
  color: var(--text-soft);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}
.tarefa-card__cron { color: var(--text-mute); }
.tarefa-card__countdown { font-family: var(--font-mono); color: var(--brand); font-weight: var(--weight-bold); }
.tarefa-card__proximas { color: var(--text-mute); font-size: var(--text-2xs); font-family: var(--font-mono); }

/* ---------- barra de "batidas" (heartbeat) ---------- */
.heartbeat__lista { display: flex; gap: 3px; flex-wrap: wrap; }
.heartbeat__celula {
  width: 14px;
  height: 20px;
  border-radius: 3px;
  background: var(--success);
  display: inline-block;
}
.heartbeat__celula--falha { background: var(--danger); }
.heartbeat__celula:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.heartbeat__vazio { font-size: var(--text-sm); }

.tarefa-card__uptimes { display: flex; gap: var(--space-5); }
.uptime-item { display: flex; align-items: baseline; gap: var(--space-2); }
.uptime-item .label { color: var(--text-mute); }

/* ---------- corpo expandido (custos + sparkline + últimas 10) ---------- */
/* `display:none` EXPLÍCITO (não confiar só no UA de <details>): o Chromium some com o PAINT/hit-test
   do conteúdo fechado, mas um descendente com dimensão explícita (o <canvas> do sparkline, que o
   Chart.js dimensiona via inline style em px) segue contribuindo pro scrollWidth da página — overflow
   horizontal fantasma em mobile, sem nada visível na tela. Achado pelo eval desta tela (Task 2.3). */
.tarefa-card:not([open]) > .tarefa-card__corpo { display: none; }
.tarefa-card__corpo { padding: 0 var(--space-5) var(--space-5); border-top: var(--border-width) solid var(--border); }
.tarefa-card[open] .tarefa-card__corpo { padding-top: var(--space-5); }

.custos-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.custos-resumo__item { display: flex; flex-direction: column; gap: var(--space-1); }
.custos-resumo__valor { font-size: var(--text-lg); }
/* legenda de divergência oficial × histórico (ex.: "9 com custo registrado · histórico completo: 10") */
.custos-resumo__nota { color: var(--text-mute); font-size: var(--text-2xs); }

.tarefa-card__sparkline { position: relative; height: 120px; margin-bottom: var(--space-5); }

.execucoes-lista__custo { color: var(--text-soft); flex: 1 1 auto; }
/* proveniência "estimado" (linha só-do-diário): neutro discreto — informa, não alarma */
.badge--estimado { background: var(--paper-2); color: var(--ink-soft); }

@media (max-width: 720px) {
  .tarefa-card__topo { flex-wrap: wrap; }
  .tarefa-card__uptimes { flex-wrap: wrap; gap: var(--space-3); }
  /* "Agendamentos" (palavra única, sem espaço p/ quebrar) em Fraunces --text-4xl (64px, herdado do
     h1 global) estoura a largura útil de um celular estreito — achado pelo eval desta tela; reduz
     só aqui (mesmo tamanho do .vazio__titulo da Home) em vez de mexer no h1 global. */
  .agendamentos__titulo { font-size: var(--text-2xl); }
}

/* ---------- V2.2: controle de agenda (pausar/reativar/cancelar/editar) ---------- */
.agenda-controle {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--border);
}
.agenda-controle__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.agenda-controle__status { min-height: 1.2em; color: var(--text-soft); }
.agenda-controle__status--erro { color: var(--danger); }

/* botões pequenos + variantes neutra/perigo (o card já tinha só .btn--acento/.btn--fantasma, pensados
   pra nav escura — aqui o fundo é o cartão claro, então ganham tom próprio). */
.btn--pequeno { padding: var(--space-1) var(--space-4); font-size: var(--text-xs); }
.btn--secundario { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn--secundario:hover { background: var(--surface); border-color: var(--border-strong); }
.btn--perigo { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
.btn--perigo:hover { background: color-mix(in oklab, var(--danger-tint) 60%, white); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* confirmação inline (cancelar / salvar cron) — tom de alerta suave, nunca um modal bloqueante */
.agenda-confirma {
  background: var(--danger-tint);
  border: var(--border-width) solid var(--danger);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* mesma armadilha de especificidade do `.login[hidden]` (ambos setam `display` na classe, que empata
   com o `[hidden]{display:none}` do UA e perde por ordem de origem) — override explícito de novo. */
.agenda-confirma[hidden] { display: none; }
.agenda-confirma--salvar { background: var(--paper-2); border-color: var(--border-strong); }
.agenda-confirma__texto { color: var(--ink); font-size: var(--text-sm); }
.agenda-confirma__acoes { display: flex; gap: var(--space-3); }
.agenda-confirma__cron { font-weight: var(--weight-bold); }

/* form de edição de cron (5 campos guiados + preview ao vivo) */
.agenda-editar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.agenda-editar[hidden] { display: none; } /* mesma razão de .agenda-confirma[hidden] acima */
.agenda-editar__legenda { color: var(--text-soft); }
.agenda-editar__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: var(--space-3); }
.agenda-editar__campo-wrap { display: flex; flex-direction: column; gap: var(--space-1); }
.agenda-editar__campo {
  font-size: var(--text-sm);
  padding: var(--space-2);
  border: var(--border-width-strong) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text);
  width: 100%;
  text-align: center;
}
.agenda-editar__campo:focus { border-color: var(--brand); }
.agenda-editar__preview { font-size: var(--text-sm); color: var(--text-soft); font-family: var(--font-mono); min-height: 1.4em; }
.agenda-editar__preview--erro { color: var(--danger); }
.agenda-editar__salvar-wrap { display: flex; }

/* ============================================================
   Tela Execuções (Task 2.4) — feed filtrável + replay de sessão + live tail.
   Feed: filtros (tarefa/status/período) + painel "ao vivo" (log de hoje) + lista de runs clicáveis.
   Drill-down: dados estruturados de 1 run + "ver replay". Replay: timeline de cards (fala/raciocínio/
   tool/subagente colapsado). Mesma proporção de marca da Home: papel domina, âmbar só em acento.
   ============================================================ */
.execucoes { display: flex; flex-direction: column; gap: var(--space-5); }
.execucoes__titulo { margin-top: var(--space-2); }
.execucoes__corpo { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.exec-feed { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

.exec-vazio { color: var(--text-soft); font-size: var(--text-sm); padding: var(--space-2) 0; }
.exec-contagem { color: var(--text-mute); }

/* ---------- filtros ---------- */
.exec-filtros { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.exec-filtros__campo { display: flex; flex-direction: column; gap: var(--space-1); }
.exec-filtros__select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-strong) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text);
  cursor: pointer;
}
.exec-filtros__select:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; border-color: var(--brand); }

/* ---------- painel "ao vivo" (live tail) ---------- */
.exec-aovivo {
  background: var(--green-deep);
  color: var(--text-on-inverse);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.exec-aovivo__cabecalho {
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  list-style: none;
}
.exec-aovivo__cabecalho::-webkit-details-marker { display: none; }
.exec-aovivo__cabecalho::marker { content: ""; }
.exec-aovivo__cabecalho:focus-visible { outline: 3px solid var(--ring-accent); outline-offset: -3px; }
.exec-aovivo__titulo { font-weight: var(--weight-bold); }
.exec-aovivo__sub { color: var(--text-on-inverse-soft); }
.exec-aovivo__corpo { max-height: 16rem; overflow-y: auto; padding: 0 var(--space-5) var(--space-4); }
.exec-aovivo__corpo .exec-vazio { color: var(--text-on-inverse-soft); }
.exec-aovivo__linhas { display: flex; flex-direction: column; gap: 2px; }
.exec-aovivo__linha {
  color: var(--sand);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  word-break: break-word;
  border-bottom: var(--border-width) solid var(--border-inverse);
  padding: var(--space-1) 0;
}

/* ---------- lista de runs ---------- */
.exec-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.exec-lista__item { min-width: 0; }
.exec-run {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.exec-run:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.exec-run:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.exec-run__tarefa { font-weight: var(--weight-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.exec-run__tag { font-size: var(--text-2xs); }
.exec-run__meta { color: var(--text-soft); font-size: var(--text-xs); }
.exec-run__ts { color: var(--text-mute); font-size: var(--text-xs); margin-left: auto; }

/* ---------- voltar ---------- */
.exec-voltar {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--brand);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: var(--space-2) 0;
}
.exec-voltar:hover { text-decoration: underline; }
.exec-voltar:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- drill-down ---------- */
.exec-drill, .exec-replay { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.exec-drill__topo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.exec-drill__titulo, .exec-replay__titulo { margin: 0; }
.exec-dados {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin: 0;
}
.exec-dados dt { color: var(--text-mute); }
.exec-dados dd { margin: 0; color: var(--text); word-break: break-word; }
.exec-ver-replay { align-self: flex-start; }

/* ---------- replay: timeline de cards ---------- */
.exec-replay__sessao { color: var(--text-mute); font-size: var(--text-xs); word-break: break-all; margin: 0; }
.exec-passos-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.exec-passo-link {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-soft);
  cursor: pointer;
}
.exec-passo-link:hover { border-color: var(--border-strong); color: var(--text); }
.exec-passo-link:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.exec-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.exec-passo {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.exec-passo:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.exec-passo--fala { border-left-color: var(--success); }
.exec-passo--raciocinio { border-left-color: var(--info); background: var(--info-tint); }
.exec-passo--tool { border-left-color: var(--amber); }
.exec-passo--subagente { border-left-color: var(--brand); }
.exec-passo__tag { display: block; color: var(--text-mute); margin-bottom: var(--space-2); }
.exec-passo__texto { color: var(--text); white-space: pre-wrap; word-break: break-word; margin: 0; }
.exec-passo__texto--raciocinio { color: var(--text-soft); font-style: italic; }
.exec-passo__ferramenta { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--text); margin: 0 0 var(--space-1); }
.exec-passo__resumo { color: var(--text-soft); font-size: var(--text-xs); white-space: pre-wrap; word-break: break-word; margin: 0; }
/* subagente colapsado: só o heads-up de 1 linha aparece fechado; input completo ao expandir */
.exec-passo--subagente .exec-passo__summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  list-style: none;
}
.exec-passo--subagente .exec-passo__summary::-webkit-details-marker { display: none; }
.exec-passo--subagente .exec-passo__summary::marker { content: ""; }
.exec-passo--subagente .exec-passo__summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.exec-passo--subagente .exec-passo__headsup { color: var(--text); font-weight: var(--weight-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exec-passo--subagente[open] .exec-passo__headsup { white-space: normal; }
.exec-passo--subagente .exec-passo__resumo { margin-top: var(--space-3); }

@media (max-width: 720px) {
  .execucoes__titulo { font-size: var(--text-2xl); }
  .exec-filtros__campo { flex: 1 1 8rem; }
  .exec-filtros__select { width: 100%; }
  .exec-run__ts { margin-left: 0; }
  .exec-dados { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .exec-dados dd { margin-bottom: var(--space-3); }
}

/* ============================================================
   Tela Tokens (Task 2.5, pivot token-first na Task M2) — total/média de tokens no período, breakdown
   por tipo de token, tendência 30d, donut por modelo, RANKING DE TAREFAS POR TOKENS (entregável
   principal — o sócio paga plano fixo, dólar não é o que decide; token gasto por tarefa agendada é),
   origem cron×interativo e heatmap dia×hora. Última tela da área Operação. Vocabulário de cor único
   na tela inteira: verde = canal cron, âmbar = canal interativo (tendência E origem reusam o mesmo
   par; os dois lados são TOKENS CONTADOS, não "oficial/estimado" — só o equivalente em dólar de cada
   canal tem proveniência diferente, e isso fica em tooltip, nunca na cor) — o donut por modelo usa
   uma paleta categórica DIFERENTE (azul/mostarda/ameixa/verde-azulado), de propósito fora da família
   verde/âmbar/tijolo, pra não confundir "modelo X" com "cron"/"interativo"/"alerta" (achado do juiz
   visual, 1ª rodada do eval desta tela). Paleta validada (skill dataviz) e fixa por nome de modelo,
   nunca por posição no ranking. O alerta de orçamento em USD e a projeção mensal em dólar foram
   REMOVIDOS (plano fixo não tem "estourar teto do mês" — decisão acionável é o ranking de tokens).
   ============================================================ */
.tokens { display: flex; flex-direction: column; gap: var(--space-6); }
.tokens__titulo { margin-top: var(--space-2); }
.tokens__secao {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  /* min-width:0 (o padrão de flex-item é "auto" = não encolhe menos que o conteúdo) + overflow-x:auto
     — sem isto, uma tabela larga (ranking/por-modelo) força a SEÇÃO INTEIRA a ficar larga (o item
     flex "puxa" o `.tokens` pai junto), estourando a viewport em mobile mesmo a tabela tendo poucas
     colunas — achado pelo eval desta tela (overflow_horizontal.mobile). Mesma técnica já usada em
     `.tokens-heatmap` abaixo (que não aparecia no diagnóstico por já ter overflow-x:auto direto nela).
     A seção rola pra ver a tabela inteira em vez de estourar a página (fundo/sombra de rolagem vêm
     do bloco compartilhado "affordance de rolagem horizontal", no topo do arquivo). */
  min-width: 0;
  overflow-x: auto;
}
.tokens__secao-titulo { font-size: var(--text-lg); margin-bottom: var(--space-4); }
/* subtítulo interno de um bloco (ex.: "Por tipo" dentro do card "Tokens no período") — menor peso que
   o h2 da seção, mesma família mono/uppercase dos outros rótulos da tela (Task M2). */
.tokens__secao-subtitulo {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  color: var(--text-mute);
  margin: var(--space-5) 0 var(--space-3);
}

/* ---------- vazio honesto do agregado ---------- */
.tokens-vazio-agregado { background: var(--surface-2); }
.tokens-vazio-agregado__texto { color: var(--text-soft); font-size: var(--text-sm); max-width: 60ch; }
.tokens-vazio-agregado__texto code {
  font-family: var(--font-mono);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xs);
  padding: 1px var(--space-1);
}

/* ---------- gráficos (Chart.js) + legenda em texto (a legenda É a "table view" da skill dataviz) ---------- */
.tokens-grafico { position: relative; height: 220px; }
.tokens-grafico--donut { height: 240px; max-width: 320px; margin: 0 auto var(--space-4); }
.tokens-legenda { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.tokens-legenda__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-soft); }
.tokens-legenda__swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; display: inline-block; }

/* ---------- tabelas mono (ranking, por modelo) ---------- */
.tokens-tabela { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--space-3); }
.tokens-tabela th, .tokens-tabela td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--border); }
.tokens-tabela th {
  color: var(--text-mute);
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
}
.tokens-tabela td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tokens-nota { color: var(--text-mute); margin-top: var(--space-3); }

/* ranking: barra proporcional embutida atrás do valor (bullet chart simples, 1 hue = magnitude) */
.tokens-ranking__total-cel { position: relative; }
.tokens-ranking__barra {
  position: absolute;
  inset: 4px auto 4px 0;
  background: color-mix(in oklab, var(--green) 20%, transparent);
  border-radius: 3px;
  z-index: 0;
}
.tokens-ranking__valor { position: relative; z-index: 1; }

/* ---------- barras (tipo de token, origem cron×interativo) ---------- */
.tokens-barra-lista { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); }
.tokens-barra-lista__total { margin-top: var(--space-4); }
.tokens-barra { display: flex; flex-direction: column; gap: var(--space-1); }
.tokens-barra__topo { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.tokens-barra__trilha {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.tokens-barra__fill { height: 100%; border-radius: inherit; background: var(--brand); transition: width var(--dur-slow) var(--ease-out); }
/* destaque do "cache é a alavanca" é por TEXTO (chip) + peso, nunca por uma 2ª cor na barra — as 4
   barras de tokens-por-tipo medem a MESMA grandeza (regra dataviz: sequencial = 1 hue só); uma cor
   à parte aqui reintroduziria a ambiguidade que o juiz visual pegou no donut (1ª rodada deste eval:
   verde/âmbar já significam oficial/estimado noutro bloco da mesma tela). */
.tokens-barra--destaque .tokens-barra__topo { font-weight: var(--weight-semibold); }
.tokens-barra__chip { margin-left: var(--space-2); font-size: var(--text-2xs); vertical-align: middle; }
.tokens-barra__detalhe { color: var(--text-mute); font-size: var(--text-2xs); }

.tokens-origem { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-5); }

/* ---------- heatmap dia×hora (grade CSS, sem canvas — intensidade via color-mix, 1 hue = magnitude) ---------- */
.tokens-heatmap__grade {
  display: grid;
  grid-template-columns: max-content repeat(24, minmax(14px, 1fr));
  gap: 2px;
  align-items: center;
  min-width: 640px; /* a grade não espreme abaixo disso — o wrapper .tokens-heatmap rola, não estoura a página */
}
.tokens-heatmap { overflow-x: auto; }
.tokens-heatmap__eixo-hora {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(24, minmax(14px, 1fr));
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-mute);
}
.tokens-heatmap__dia {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-mute);
  padding-right: var(--space-2);
  white-space: nowrap;
}
.tokens-heatmap__celula {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 12px;
  border-radius: 3px;
  border: var(--border-width) solid var(--border);
}
.tokens-heatmap__celula:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.tokens-heatmap__nota { color: var(--text-mute); margin-top: var(--space-3); }

@media (max-width: 720px) {
  .tokens__titulo { font-size: var(--text-2xl); }
  .tokens-origem { grid-template-columns: 1fr; }
}

/* ==================================================================================
   Clientes + Produções (Task 3.2, área Negócio)
   ================================================================================== */

/* ---------- badge de aviso (schema defasado / pendência) — mesmo par tint/ink do resto do Painel
   (ver .attention__item--media/.tile--atencao): texto var(--ink), NUNCA var(--warning) em cima do
   próprio tint — âmbar sobre âmbar-claro não tem contraste suficiente pra texto. ---------- */
.badge--aviso { background: var(--warning-tint); color: var(--ink); }

/* ---------- Clientes: grade de cards ---------- */
.clientes__titulo { margin-bottom: var(--space-5); }
.clientes__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--space-5);
}
.cliente-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cliente-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.cliente-card__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cliente-card__nome { font-size: var(--text-lg); overflow-wrap: anywhere; }
.cliente-card__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cliente-card__meta { color: var(--text-mute); display: flex; gap: var(--space-1); }
.cliente-card__producoes { border-top: var(--border-width) solid var(--border); padding-top: var(--space-3); }
.cliente-card__producoes-vazio { color: var(--text-mute); font-size: var(--text-sm); margin-top: var(--space-1); }
.cliente-card__producoes-lista {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.cliente-card__producoes-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }

.cliente-vazio { color: var(--text-soft); max-width: 46rem; }

/* ---------- Clientes: voltar (mesmo padrão de .exec-voltar) ---------- */
.cliente-voltar {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  margin-bottom: var(--space-5);
}
.cliente-voltar:hover { text-decoration: underline; }
.cliente-voltar:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- Clientes: detalhe ---------- */
.cliente-detalhe__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.cliente-detalhe__nome { font-size: var(--text-2xl); }
.cliente-detalhe__dados {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-6);
  max-width: 44rem;
}
.cliente-detalhe__dados dd { margin: 0; }
.cliente-detalhe__secao-titulo { margin: var(--space-6) 0 var(--space-3); }
.cliente-detalhe__tabela-wrap { overflow-x: auto; }
.cliente-detalhe__tabela { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cliente-detalhe__tabela th,
.cliente-detalhe__tabela td {
  border-bottom: var(--border-width) solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}
.cliente-detalhe__tabela th { color: var(--text-mute); font-weight: var(--weight-semibold); }

/* ---------- Markdown renderizado (briefing/produção .md) — tipografia mínima, sem imagem (ver
   js/lib/markdown.js: <img> nunca sobrevive à sanitização, de propósito). ---------- */
.markdown { max-width: 68ch; color: var(--text); }
.markdown > :first-child { margin-top: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin: var(--space-5) 0 var(--space-2); }
.markdown h1 { font-size: var(--text-2xl); }
.markdown h2 { font-size: var(--text-xl); }
.markdown h3 { font-size: var(--text-lg); }
.markdown p { margin: 0 0 var(--space-3); line-height: var(--leading-normal); }
.markdown ul, .markdown ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.markdown li { margin-bottom: var(--space-1); }
.markdown blockquote {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-4);
  border-left: 3px solid var(--border-strong);
  color: var(--text-soft);
}
.markdown pre {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.markdown code { font-family: var(--font-mono); font-size: 0.9em; }
.markdown pre code { font-family: var(--font-mono); }
.markdown :not(pre) > code { background: var(--surface-2); padding: 0.1em 0.35em; border-radius: var(--radius-xs); }
.markdown table { border-collapse: collapse; margin: 0 0 var(--space-3); font-size: var(--text-sm); max-width: 100%; }
.markdown th, .markdown td { border: var(--border-width) solid var(--border); padding: var(--space-1) var(--space-3); text-align: left; }
.markdown hr { border: none; border-top: var(--border-width) solid var(--border); margin: var(--space-4) 0; }

/* ---------- Produções: toggle 7/30 dias ---------- */
.producoes__titulo { margin-bottom: var(--space-5); }
.producoes-toggle { display: inline-flex; gap: var(--space-1); margin-bottom: var(--space-5); background: var(--surface-2); padding: var(--space-1); border-radius: var(--radius-pill); }
.producoes-toggle__btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: none;
  background: transparent;
  color: var(--text-soft);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.producoes-toggle__btn--ativo { background: var(--brand); color: var(--text-on-inverse); }
.producoes-contagem { margin-bottom: var(--space-4); }
.producoes-vazio { color: var(--text-soft); max-width: 46rem; }

.producoes-grupo { margin-bottom: var(--space-6); }
.producoes-grupo__titulo { margin-bottom: var(--space-3); }
.producoes-grupo__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.producoes-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.producoes-item__titulo-wrap { min-width: 0; }
.producoes-item__titulo { overflow-wrap: anywhere; margin-bottom: var(--space-1); }
.producoes-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-mute); }
/* badge de CLIENTE precisa se distinguir do chip neutro de formato (md/html/pdf) à primeira vista —
   "de quem é isso" é uma pergunta diferente de "em que formato está". Reusa a cor semântica --info
   (informativa, não aviso/erro) com peso maior, em vez do cinza neutro do .chip de formato. */
.producoes-item__cliente { background: var(--info-tint); color: var(--info); font-weight: var(--weight-bold); }
.producoes-item__acao {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brand);
  background: none;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  cursor: pointer;
  text-decoration: none;
}
.producoes-item__acao:hover { background: var(--surface-2); text-decoration: none; }
.producoes-item__acao--indisponivel { color: var(--text-mute); border: none; padding: var(--space-1) 0; cursor: default; }

/* ---------- Produções: <dialog> de prévia — 1ª peça do Painel a usar <dialog> nativo (backdrop +
   Escape-to-close de graça, sem JS extra). ---------- */
.producoes-preview {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  width: min(90vw, 60rem);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface-card);
}
.producoes-preview::backdrop { background: rgba(21, 18, 14, 0.5); }
.producoes-preview__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.producoes-preview__topo-texto { min-width: 0; }
.producoes-preview__titulo { font-size: var(--text-xl); }
.producoes-preview__caminho { color: var(--text-mute); font-size: var(--text-xs); overflow-wrap: anywhere; margin-top: var(--space-1); }
.producoes-preview__fechar {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--text-mute);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}
.producoes-preview__fechar:hover { color: var(--text); }

@media (max-width: 720px) {
  .clientes__titulo, .producoes__titulo { font-size: var(--text-2xl); }
  .producoes-item { flex-direction: column; align-items: stretch; }
  .producoes-item__acao { align-self: flex-start; }
}

/* ==================================================================================
   Aprovações & Avisos (Task 3.3, área Qualidade) — visibilidade da fila 🔴, nunca ação.
   Card = <details> nativo, mesmo padrão de .tarefa-card (Agendamentos, Task 2.3): cabeçalho sempre
   visível, corpo (Markdown sanitizado) só quando expandido. Avisos reusam a MESMA linguagem visual
   de severidade do Attention Card da Home (borda + tint por alta/baixa) — as duas telas falam a
   mesma "cor de urgência", mas cada uma com suas PRÓPRIAS classes (sem acoplar uma tela na outra).
   ================================================================================== */
.aprovacoes { display: flex; flex-direction: column; gap: var(--space-6); }
.aprovacoes__titulo { margin-top: var(--space-2); }
.aprovacoes__corpo { display: flex; flex-direction: column; gap: var(--space-6); }
.aprovacoes__secao-titulo { font-size: var(--text-lg); margin-bottom: var(--space-4); }

/* ---------- "Esperando você": cards de aprovação ---------- */
.aprovacoes-lista { display: flex; flex-direction: column; gap: var(--space-3); }
.aprovacao-card {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.aprovacao-card--warning { border-left-color: var(--warning); }
.aprovacao-card--success { border-left-color: var(--success); }
.aprovacao-card--neutro { border-left-color: var(--border-strong); }

.aprovacao-card__cabecalho {
  cursor: pointer;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}
.aprovacao-card__cabecalho::marker { display: none; content: ""; }
.aprovacao-card__cabecalho::-webkit-details-marker { display: none; }
.aprovacao-card__cabecalho:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.aprovacao-card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.aprovacao-card__titulo { font-size: var(--text-md); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.aprovacao-card__seta {
  flex: 0 0 auto;
  margin-top: var(--space-1);
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-mute);
  border-bottom: 2px solid var(--text-mute);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.aprovacao-card[open] .aprovacao-card__seta { transform: rotate(-135deg); }

.aprovacao-card__resumo { color: var(--text-soft); font-size: var(--text-sm); max-width: 60ch; }
.aprovacao-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.aprovacao-card__data { color: var(--text-mute); }
.aprovacao-card__tipo { max-width: 100%; overflow-wrap: anywhere; }

.aprovacao-card__corpo { padding: 0 var(--space-5) var(--space-5); }

/* ---------- "Avisos": lista plana, custo alto em destaque (mesma linguagem do Attention Card) ---------- */
.aprovacoes-avisos__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.aprovacoes-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--border);
  background: var(--surface-card);
}
.aprovacoes-aviso--alta { border-left-color: var(--danger); background: var(--danger-tint); }
.aprovacoes-aviso--baixa { border-left-color: var(--info); background: var(--info-tint); }
.aprovacoes-aviso__texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.aprovacoes-aviso__ts { color: var(--text-mute); font-size: var(--text-xs); flex: 0 0 auto; }

/* ---------- rodapé honesto: guardrail anti-falsificação, sempre visível, sem letra miúda ---------- */
.aprovacoes__rodape {
  border-top: var(--border-width) solid var(--border);
  padding-top: var(--space-4);
  color: var(--text-soft);
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .aprovacoes__titulo { font-size: var(--text-2xl); }
}

/* ============================================================
   Saúde do OS (Task 4.1, área Qualidade) — a tela mais DENSA do Painel: 7 seções (cabeça do agente,
   validade da base, evals, tamanho do OS, git feed, kanban de melhorias, aprendizados). Cada seção
   usa `.saude__secao` (mesmo "cartão" visual de `.tokens__secao`, em classe própria — convenção do
   Painel de não acoplar classes entre telas mesmo quando o recibo visual é idêntico).
   ============================================================ */
.saude { display: flex; flex-direction: column; gap: var(--space-6); }
.saude__titulo { margin-top: var(--space-2); }
.saude__corpo { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

/* ---------- índice de âncoras (botões — nunca <a href="#...">, ver nota em saude.js) ---------- */
.saude-indice { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.saude-indice__link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-soft);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}
.saude-indice__link:hover { border-color: var(--border-strong); color: var(--text); }
.saude-indice__link:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ---------- seção genérica (cartão) ---------- */
.saude__secao {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  overflow-x: auto;
  /* fundo + sombra de rolagem vêm do bloco compartilhado "affordance de rolagem horizontal" (topo
     do arquivo) — mesmo padrão de `.tokens__secao`. */
  /* offset da barra sticky (64px) ao rolar via scrollIntoView pelo índice de âncoras acima */
  scroll-margin-top: calc(var(--barra-altura) + var(--space-4));
}
.saude__secao-titulo { font-size: var(--text-lg); margin-bottom: var(--space-4); }

/* ---------- 1) Cabeça do agente ---------- */
.saude-cabeca__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-5); }
.saude-cabeca__bloco { min-width: 0; }
.saude-cabeca__bloco-titulo { font-size: var(--text-md); margin-bottom: var(--space-2); color: var(--text-soft); }
.saude-cabeca__corpo { max-height: 22rem; overflow-y: auto; }

/* ---------- 2) Validade da base ---------- */
.saude-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--border);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.saude-badge--ok { border-left-color: var(--success); background: var(--success-tint); }
.saude-badge--alerta { border-left-color: var(--warning); background: var(--warning-tint); }
.saude-badge__texto { color: var(--text); font-size: var(--text-sm); }
.saude-tabela-wrap { overflow-x: auto; }
.saude-tabela { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
/* white-space:nowrap — sem isto, "2026-06-26" quebra no meio da data (o navegador quebra em
   hífen por padrão) em vez da tabela rolar horizontalmente; a rolagem do wrapper acima é a saída
   certa em mobile, não o texto partido no meio (achado no eval desta tela, viewport mobile). */
.saude-tabela th, .saude-tabela td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--border); white-space: nowrap; }
.saude-tabela th { color: var(--text-mute); font-weight: var(--weight-semibold); }
.saude-tabela__linha--vencida { background: var(--danger-tint); }

/* ---------- 3) Qualidade (evals) ---------- */
.saude-evals__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); }
.saude-eval-card {
  border: var(--border-width) solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}
.saude-eval-card--ok { border-left-color: var(--success); }
.saude-eval-card--falha { border-left-color: var(--danger); }
.saude-eval-card__nome { font-size: var(--text-sm); margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.saude-eval-card__nota { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.saude-eval-card__valor { font-size: var(--text-2xl); }
.saude-eval-card__minima { color: var(--text-mute); }
.saude-eval-card__sparkline { position: relative; height: 48px; margin-top: var(--space-2); }
.saude-eval-card__semrubrica { color: var(--text-mute); margin-top: var(--space-2); }

/* ---------- 4) Tamanho do OS ---------- */
.saude-tiles.tiles { margin-top: 0; }

/* ---------- 5) O que mudou ---------- */
.saude-git__resumo { color: var(--text-soft); margin-bottom: var(--space-4); }
.saude-git__grupos { display: flex; flex-direction: column; gap: var(--space-3); }
.saude-git-grupo { border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: 0 var(--space-4); }
.saude-git-grupo__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
}
.saude-git-grupo__cabecalho::marker { display: none; content: ""; }
.saude-git-grupo__cabecalho::-webkit-details-marker { display: none; }
.saude-git-grupo__cabecalho:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.saude-git-grupo__cabecalho::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-mute);
  border-bottom: 2px solid var(--text-mute);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.saude-git-grupo[open] .saude-git-grupo__cabecalho::before { transform: rotate(-135deg); }
.saude-git-grupo__contagem { color: var(--text-mute); }
.saude-git-grupo__lista { list-style: none; margin: 0; padding: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.saude-git-commit { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); padding: var(--space-1) 0; border-top: var(--border-width) solid var(--border); }
.saude-git-commit__hash { color: var(--text-mute); flex: 0 0 auto; }
.saude-git-commit__assunto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.saude-git-commit__data { color: var(--text-mute); font-size: var(--text-xs); flex: 0 0 auto; }

/* ---------- 6) Kanban de melhorias ---------- */
.saude-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); }
.saude-kanban__coluna { background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-3); min-width: 0; }
.saude-kanban__cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); font-weight: var(--weight-semibold); }
.saude-kanban__contagem { background: var(--surface-card); }
.saude-kanban__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.saude-kanban__item { background: var(--surface-card); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.saude-kanban__item-titulo { font-size: var(--text-sm); overflow-wrap: anywhere; }
.saude-kanban__item-data { color: var(--text-mute); margin-top: var(--space-1); }
.saude-kanban__vazio { color: var(--text-mute); }

/* ---------- 7) Aprendizados ---------- */
.saude-filtro { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-5); background: var(--surface-2); padding: var(--space-1); border-radius: var(--radius-pill); }
.saude-filtro__btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  border: none;
  background: transparent;
  color: var(--text-soft);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.saude-filtro__btn--ativo { background: var(--brand); color: var(--text-on-inverse); }
.saude-filtro__btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.saude-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.saude-timeline__item { border-left: 3px solid var(--border-strong); padding-left: var(--space-4); }
.saude-timeline__topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.saude-timeline__titulo { font-size: var(--text-md); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.saude-timeline__confianca--alta { background: var(--success); }
.saude-timeline__confianca--media { background: var(--warning); color: var(--ink); }
.saude-timeline__confianca--baixa { background: var(--border-strong); color: var(--ink); }
.saude-timeline__gatilho { color: var(--text-soft); font-size: var(--text-sm); max-width: 60ch; margin-top: var(--space-1); }
.saude-timeline__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- 8) Integrações (leitura): ClickUp + WhatsApp/Uazapi (V2.3) ---------- */
.saude-integracoes__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4); }
.saude-integracao-card {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-width: 0;
}
.saude-integracao-card__titulo { font-size: var(--text-md); margin-bottom: var(--space-3); color: var(--text-soft); }
.saude-integracao-card__contagem { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.saude-integracao-card__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.saude-integracao-card__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* `<a>` (tarefa com URL) precisa de affordance ÓBVIO de link — cor da marca + sublinhado, nunca
   texto morto da mesma cor do resto do card (achado do juiz visual: 1ª versão só mudava a cor no
   hover, e o estado padrão era indistinguível de texto comum). O fallback `<span>` (tarefa sem URL,
   caso raro) fica com a cor neutra do texto — não é clicável, não deve parecer que é. */
a.saude-integracao-card__link { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
a.saude-integracao-card__link:hover, a.saude-integracao-card__link:focus-visible { color: var(--ink); }
span.saude-integracao-card__link { color: var(--text); overflow-wrap: anywhere; }
.saude-integracao-card__mais { margin-top: var(--space-2); }
.saude-integracao-card__status { display: flex; align-items: center; gap: var(--space-2); }

@media (max-width: 720px) {
  .saude__titulo { font-size: var(--text-2xl); }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}