/* Cockpit AgencyInABox — IDV: preto #0B0B0D, laranja #FF6A00, amarelo #FFC400, Urbanist
   ───────────────────────────────────────────────────────────────────────────
   TEMA (F0.1). Três estados, nesta precedência:
     1. data-theme="claro|escuro" no <html>  → escolha explícita, sempre vence
     2. prefers-color-scheme do sistema      → quando não há escolha
     3. escuro                               → o padrão da marca, e o que já
                                                estava no ar (se o CSS de tema
                                                falhar, nada muda)

   DUAS FAMÍLIAS DE COR, e a diferença importa:
     --orange/--yellow/--green/--blue/--red   preenchimento, borda, bolinha
     --ink-accent/--ink-warn/--ink-ok/...     as MESMAS cores quando viram TEXTO

   Por que separar: o laranja da marca sobre branco dá 2,44:1 — ilegível, e
   reprova WCAG AA com folga. Em vez de mudar a marca, o token de TEXTO escurece
   só no tema claro; a bolinha e a borda seguem laranja de verdade nos dois
   temas. Todos os valores abaixo foram MEDIDOS (tests/test_contraste.py falha
   se algum par cair abaixo de 4,5:1).
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* superfícies */
  --bg: #0B0B0D;
  --panel: #141418;
  --panel-2: #1A1A20;
  --line: #26262E;
  --line-soft: #1F1F26;

  /* texto */
  --ink: #F3F3F5;
  --muted: #8A8A96;
  /* era #5E5E6A: dava 2,71:1 no --panel-2 — o "quase preto" dos rótulos de
     card (.sc-sub, .exec-h, .field .k, th das tabelas). Agora 4,66:1. */
  --muted-2: #84848B;

  /* acentos — preenchimento/borda */
  --orange: #FF6A00;
  --yellow: #FFC400;
  --green: #35C46A;
  --blue: #4AA3FF;
  --red: #FF5A5A;

  /* acentos — como TEXTO (no escuro os próprios acentos já passam) */
  --ink-accent: var(--orange);
  --ink-warn: var(--yellow);
  --ink-ok: var(--green);
  --ink-info: var(--blue);
  --ink-err: #FF6A6A;

  /* texto sobre preenchimento de acento (botão primário, toast) */
  --on-accent: #120A00;

  /* superfícies compostas */
  --overlay: rgba(0, 0, 0, .55);
  --sidebar-bg: rgba(20, 20, 24, .55);
  --tag-bg: rgba(255, 255, 255, .04);
  --glow-1: rgba(255, 106, 0, .10);
  --glow-2: rgba(255, 196, 0, .06);
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --drawer-shadow: -18px 0 50px rgba(0, 0, 0, .5);

  --radius: 14px;
}

/* ── TEMA CLARO ─────────────────────────────────────────────────────────────
   O bloco abaixo e o do @media logo depois são IGUAIS de propósito — um vale
   para a escolha explícita, o outro para "auto". tests/test_contraste.py
   compara os dois e falha se alguém mexer num e esquecer o outro. */
:root[data-theme="light"] {
  --bg: #F5F5F8;
  --panel: #FFFFFF;
  --panel-2: #ECECF1;
  --line: #D8D8E0;
  --line-soft: #E7E7ED;

  --ink: #14141A;
  --muted: #55555F;
  --muted-2: #63636E;

  --orange: #FF6A00;
  --yellow: #FFC400;
  --green: #35C46A;
  --blue: #4AA3FF;
  --red: #E03131;

  --ink-accent: #AD4800;
  --ink-warn: #7E6100;
  --ink-ok: #18743E;
  --ink-info: #1264C4;
  --ink-err: #C0392B;

  --on-accent: #120A00;

  --overlay: rgba(20, 20, 26, .38);
  --sidebar-bg: rgba(255, 255, 255, .72);
  --tag-bg: rgba(20, 20, 26, .045);
  --glow-1: rgba(255, 106, 0, .07);
  --glow-2: rgba(255, 196, 0, .06);
  --shadow: 0 8px 26px rgba(20, 20, 26, .13);
  --drawer-shadow: -18px 0 50px rgba(20, 20, 26, .16);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5F5F8;
    --panel: #FFFFFF;
    --panel-2: #ECECF1;
    --line: #D8D8E0;
    --line-soft: #E7E7ED;

    --ink: #14141A;
    --muted: #55555F;
    --muted-2: #63636E;

    --orange: #FF6A00;
    --yellow: #FFC400;
    --green: #35C46A;
    --blue: #4AA3FF;
    --red: #E03131;

    --ink-accent: #AD4800;
    --ink-warn: #7E6100;
    --ink-ok: #18743E;
    --ink-info: #1264C4;
    --ink-err: #C0392B;

    --on-accent: #120A00;

    --overlay: rgba(20, 20, 26, .38);
    --sidebar-bg: rgba(255, 255, 255, .72);
    --tag-bg: rgba(20, 20, 26, .045);
    --glow-1: rgba(255, 106, 0, .07);
    --glow-2: rgba(255, 196, 0, .06);
    --shadow: 0 8px 26px rgba(20, 20, 26, .13);
    --drawer-shadow: -18px 0 50px rgba(20, 20, 26, .16);
  }
}

/* A troca de tema não pode virar piscada: o <html> ganha data-theme antes da
   primeira pintura (web/tema.js roda no <head>), e a transição some para quem
   pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  body, .syscard, .card, .col, .detail, .placar, .feed, .drawer, .sidebar,
  .oplog-t, .login-card, .btn, .pill {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* O fundo mora no <html> E no <body> (#061): no celular, quando a rolagem
   passa do fim da página, o que aparece é a cor do <html> — sem esta linha
   ela era branca em cima do painel escuro. `overflow-x` fica SÓ no html (no
   body ele quebra o `position: sticky` dos cabeçalhos) e o overscroll é
   desligado para a página não "puxar" no iOS. color-scheme deixa os controles
   nativos (select, date) acompanharem o tema. */
html {
  background-color: var(--bg);
  overflow-x: hidden;
  overscroll-behavior: none;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; }
}
body {
  background-color: var(--bg);
  background:
    radial-gradient(1100px 480px at 80% -12%, var(--glow-1), transparent 60%),
    radial-gradient(900px 420px at 5% 0%, var(--glow-2), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1400px; margin: 0 auto; padding: 18px 24px 28px; }

/* ---- Topbar ---- */
/* flex-wrap obrigatório: os itens da direita (pill do dispatcher, relógio,
   "auto 20s", Atualizar) são `white-space: nowrap`. Sem wrap eles forçavam
   uma largura mínima maior que a tela do celular e a PÁGINA INTEIRA ganhava
   rolagem horizontal — KPIs e cards sangrando para fora. */
.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand svg { width: 44px; height: 44px; display: block; }
.brand .titles { line-height: 1.05; }
.brand h1 {
  font-size: 20px; margin: 0; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase;
}
.brand h1 .amp { color: var(--ink-accent); }
.brand .sub { font-size: 11.5px; color: var(--muted); letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; }
.topbar .spacer { flex: 1; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  white-space: nowrap;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.pill.live .dot { background: var(--green); box-shadow: 0 0 0 0 rgba(53,196,106,.6); animation: pulse 1.8s infinite; }
.pill.dry { color: var(--ink-warn); border-color: rgba(255,196,0,.35); }
.pill.dry .dot { background: var(--yellow); }
.pill.paused { color: var(--ink-err); border-color: rgba(255,90,90,.35); }
.pill.paused .dot { background: var(--red); }
.clock { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }

.btn {
  cursor: pointer; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); border-radius: 10px; padding: 8px 14px; font-weight: 700;
  font-family: inherit; font-size: 13px; transition: .15s;
}
.btn:hover { border-color: var(--orange); color: var(--ink-accent); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }
.btn.primary:hover { background: var(--yellow); border-color: var(--yellow); color: var(--on-accent); }
.btn.ghost { background: transparent; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---- KPI row ---- */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 14px; position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.kpi.run::before { background: var(--yellow); }
.kpi.gate::before { background: var(--orange); }
.kpi.done::before { background: var(--green); }
.kpi.orq::before { background: var(--blue); }
.kpi .n { font-size: 25px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; font-weight: 700; }

/* ---- HOME: grade de sistemas (a home clicável) ---- */
/* auto-fit: numa tela larga os 6 cards entram numa fileira só (antes eram
   sempre 3 colunas = 2 fileiras = ~380px de altura). Telas menores voltam a
   quebrar sozinhas, sem media query para cada largura. */
.sysgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 640px) { .sysgrid { grid-template-columns: 1fr; } }

.syscard {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 13px 11px; cursor: pointer;
  transition: .15s; overflow: hidden; text-align: left;
  /* O card é um <button>, e <button> NÃO herda `color` do body: sem isto o
     UA manda e o texto vira preto puro. Era este o bug dos "títulos de card
     quase pretos no escuro" — `.sc-title` não declara cor, então herdava o
     preto do botão. Medido no navegador: rgb(0,0,0) nos DOIS temas.
     Os tokens estavam certos o tempo todo; o problema era a herança. */
  color: var(--ink);
}
.syscard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.syscard.ok::before   { background: var(--green); }
.syscard.warn::before { background: var(--yellow); }
.syscard.err::before  { background: var(--red); }
.syscard.idle::before { background: var(--muted-2); }
/* #042 — `sem_dado`: o canal não deu notícia dentro da janela de frescor.
   CINZA, e de propósito: antes isso vinha pintado de vermelho (o card do n8n
   dizia "Erro" com "0 execuções 24h"), e um painel que acende alarme sem
   evidência ensina a operação a ignorar alarme. Cinza é "não sei", que é o
   que o cockpit de fato sabe. */
.syscard.sem_dado::before { background: var(--muted-2); }
.syscard:hover { border-color: var(--orange); transform: translateY(-2px); box-shadow: var(--shadow); }
/* O badge de status DESCE de linha quando não cabe ao lado do título, em vez
   de espremer o título. E o título quebra dentro da palavra: "Workflows" é
   uma palavra só e, num card estreito, transbordava a caixa e era desenhada
   por cima do badge. */
.syscard .sc-top {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: 4px 9px; margin-bottom: 8px;
}
.syscard .sc-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line);
}
.syscard .sc-ico svg { width: 21px; height: 21px; display: block; }
.syscard .sc-titles { flex: 1 1 96px; min-width: 0; }
.syscard .sc-title { font-size: 13.5px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.syscard .sc-sub { font-size: 9.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.sc-status {
  display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; padding: 3px 8px; border-radius: 999px;
  flex: none; margin-left: auto;
  border: 1px solid var(--line); color: var(--muted);
}
.sc-status .d { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.sc-status.ok   { color: var(--ink-ok);  border-color: rgba(53,196,106,.35); } .sc-status.ok .d   { background: var(--green); }
.sc-status.warn { color: var(--ink-warn); border-color: rgba(255,196,0,.35); }  .sc-status.warn .d { background: var(--yellow); }
.sc-status.err  { color: var(--ink-err);       border-color: rgba(255,90,90,.4); }   .sc-status.err .d  { background: var(--red); }
.sc-status.idle { color: var(--muted-2); }
.sc-status.sem_dado { color: var(--muted); border-style: dashed; }
.sc-status.sem_dado .d { background: var(--muted-2); }
.syscard .sc-summary { font-size: 12.5px; color: var(--ink); line-height: 1.35; font-weight: 600; }
.syscard .sc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.syscard .sc-last { font-size: 10.5px; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.syscard .sc-last b { color: var(--ink); font-variant-numeric: tabular-nums; }
.syscard .sc-open { font-size: 10.5px; color: var(--ink-accent); font-weight: 800; white-space: nowrap; }
.syscard .sc-note { font-size: 10.5px; color: var(--muted-2); margin-top: 8px; line-height: 1.35; font-style: italic; }

/* ---- Drawer (painel de execuções ao clicar num sistema) ---- */
.drawer-ov { position: fixed; inset: 0; background: var(--overlay); z-index: 60; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); z-index: 61;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--drawer-shadow);
  display: flex; flex-direction: column; animation: slide .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes slide { from { transform: translateX(30px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.drawer .dh { display: flex; align-items: flex-start; gap: 13px; padding: 20px 20px 16px; border-bottom: 1px solid var(--line); }
.drawer .dh .sc-ico { width: 44px; height: 44px; }
.drawer .dh .dh-x { margin-left: auto; background: transparent; border: 1px solid var(--line); color: var(--muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 700; flex: none; }
.drawer .dh .dh-x:hover { border-color: var(--orange); color: var(--ink-accent); }
.drawer .dh h3 { margin: 0; font-size: 17px; font-weight: 800; }
.drawer .dh .dh-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.drawer .db { padding: 16px 20px; overflow-y: auto; flex: 1; }
.drawer .d-note { background: rgba(255,196,0,.08); border: 1px solid rgba(255,196,0,.3); color: var(--ink-warn); font-size: 11.5px; padding: 9px 12px; border-radius: 9px; margin-bottom: 16px; line-height: 1.4; }
.exec-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted-2); font-weight: 800; margin: 4px 0 10px; }
.exec { display: grid; grid-template-columns: 8px 1fr auto; gap: 11px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.exec:last-child { border-bottom: none; }
.exec .ed { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: var(--muted-2); }
.exec .el { min-width: 0; }
.exec .el .t { font-weight: 700; font-size: 13px; line-height: 1.25; word-break: break-word; }
.exec .el .s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.exec .ea { font-size: 11px; color: var(--muted-2); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.exec .ea.money { color: var(--ink-ok); font-weight: 800; }
.drawer .df { padding: 14px 20px 20px; border-top: 1px solid var(--line); }
.drawer .df .btn { width: 100%; text-align: center; display: block; text-decoration: none; }

/* ---- Layout ---- */
.grid-main { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .grid-main { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2,1fr); } }

.section-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 800; color: var(--muted);
}
.section-title .bar { width: 22px; height: 3px; background: var(--orange); border-radius: 2px; }
.section-title .count { color: var(--muted-2); font-weight: 700; letter-spacing: 0; }

/* ---- Kanban board ---- */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr 1fr; } }
.col {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; min-height: 120px;
}
.col > .col-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  padding: 2px 4px 12px; color: var(--muted);
}
.col .badge { font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--ink); }
.col-head .swatch { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; display: inline-block; }

.card {
  background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--line);
  border-radius: 10px; padding: 12px; margin-bottom: 10px; cursor: pointer; transition: .13s;
}
.card:hover { border-color: var(--line); transform: translateY(-1px); box-shadow: var(--shadow); }
.card.sel { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
.card .c-mission { font-weight: 700; font-size: 13.5px; line-height: 1.3; margin-bottom: 8px; }
.card .c-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.tag { background: var(--tag-bg); border: 1px solid var(--line-soft); border-radius: 6px; padding: 1px 7px; font-weight: 600; }
.tag.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.card.run { border-left-color: var(--yellow); }
.card.gate { border-left-color: var(--orange); }
.card.done { border-left-color: var(--green); }
.card.orq { border-left-color: var(--blue); }
.mini-bar { height: 4px; background: var(--line-soft); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.mini-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--orange); }

/* ---- Mission detail card ---- */
.detail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 18px; }
.detail.empty { color: var(--muted); text-align: center; padding: 40px 18px; }
.detail .status-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line);
}
.chip-run { color: var(--ink-warn); border-color: rgba(255,196,0,.4); }
.chip-gate { color: var(--ink-accent); border-color: rgba(255,106,0,.4); }
.chip-done { color: var(--ink-ok); border-color: rgba(53,196,106,.4); }
.chip-orq { color: var(--ink-info); border-color: rgba(74,163,255,.4); }
.detail h2 { font-size: 17px; margin: 12px 0 4px; font-weight: 800; line-height: 1.25; }
.detail .who { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.detail .who b { color: var(--ink); font-weight: 700; }

.progress { margin: 14px 0 18px; }
.progress .p-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.progress .track { height: 8px; background: var(--line-soft); border-radius: 5px; overflow: hidden; }
.progress .track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--yellow)); border-radius: 5px; transition: width .4s; }

.field { margin-bottom: 14px; }
.field .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted-2); font-weight: 800; margin-bottom: 5px; }
.field .v { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.field .v.muted { color: var(--muted); }
.prs { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-link { font-size: 12px; font-weight: 700; color: var(--ink-accent); text-decoration: none; border: 1px solid rgba(255,106,0,.3); padding: 2px 9px; border-radius: 6px; }
.pr-link:hover { background: rgba(255,106,0,.1); }
.detail-actions { display: flex; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* ---- Placar dos robôs ---- */
.placar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
table.placar-t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.placar-t th { text-align: right; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted-2); font-weight: 800; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.placar-t th:first-child, table.placar-t td:first-child { text-align: left; }
table.placar-t td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
table.placar-t tr:last-child td { border-bottom: none; }
.rank { display: inline-flex; align-items: center; gap: 9px; }
.medal { font-size: 15px; width: 18px; text-align: center; }
.robo-name { font-weight: 700; }
.pos-val { color: var(--ink-ok); font-weight: 700; }
.neg-val { color: var(--ink-err); font-weight: 700; }
.roi-pill { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.roi-good { color: var(--ink-ok); background: rgba(53,196,106,.12); }
.roi-bad { color: var(--ink-err); background: rgba(255,90,90,.12); }
.roi-na { color: var(--muted-2); }

/* ---- Ops feed ---- */
.feed { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; max-height: 460px; overflow-y: auto; }
.ev { display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.ev:last-child { border-bottom: none; }
.ev .odot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--muted-2); }
.ev.ok .odot { background: var(--green); }
.ev.warn .odot { background: var(--yellow); }
.ev.err .odot { background: var(--red); }
.ev .name { font-weight: 700; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ev .src { font-size: 11px; color: var(--muted); }
.ev .ago { font-size: 11px; color: var(--muted-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; align-items: start; }
@media (max-width: 1080px) { .two-col { grid-template-columns: 1fr; } }

.block { margin-top: 18px; }
.err-banner { background: rgba(255,90,90,.1); border: 1px solid rgba(255,90,90,.4); color: var(--ink-err); padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 18px; }
.empty-note { color: var(--muted-2); font-size: 12.5px; padding: 8px 4px; }
.footer { margin-top: 22px; text-align: center; color: var(--muted-2); font-size: 11.5px; letter-spacing: .3px; }
.footer b { color: var(--muted); }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: var(--on-accent); font-weight: 800; padding: 11px 22px;
  border-radius: 10px; box-shadow: var(--shadow); z-index: 50; font-size: 13.5px;
  animation: rise .25s ease;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(53,196,106,.5); } 70% { box-shadow: 0 0 0 7px rgba(53,196,106,0); } 100% { box-shadow: 0 0 0 0 rgba(53,196,106,0); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- ops_logs: última execução real por sistema (task 86ajevky4) ---- */
.oplogs { margin: 26px 0 6px; }
.oplog-t { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.oplog-t th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); font-weight: 800; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.oplog-t td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; }
.oplog-t tbody tr:last-child td { border-bottom: none; }
.oplog-t tbody tr:hover { background: var(--panel-2); }
.mono, .oplog-t .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.op-src { display: inline-block; font-weight: 800; color: var(--ink-accent); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.op-aid { display: block; color: var(--muted); margin-top: 2px; font-size: 11px; }
.op-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 800; border: 1px solid var(--line); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.op-badge.ok  { color: var(--ink-ok);  border-color: rgba(53,196,106,.4); background: rgba(53,196,106,.08); }
.op-badge.err { color: var(--ink-err);       border-color: rgba(255,90,90,.45); background: rgba(255,90,90,.08); }
.op-badge.warn{ color: var(--ink-warn); border-color: rgba(255,196,0,.4); background: rgba(255,196,0,.07); }
.op-badge.run { color: var(--ink-info);   border-color: rgba(74,163,255,.4); background: rgba(74,163,255,.08); }
.oplog-errs { margin-top: 14px; background: rgba(255,90,90,.05); border: 1px solid rgba(255,90,90,.28); border-radius: var(--radius); padding: 12px 16px; }
.oplog-errs .oe-h { font-weight: 800; font-size: 12.5px; color: var(--ink-err); margin-bottom: 8px; }
.oplog-errs .oe { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 12px; }
.oplog-errs .oe .ago { color: var(--muted-2); white-space: nowrap; }
.oplog-feed { margin-top: 14px; }
.oplog-feed .of-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted-2); font-weight: 800; margin: 4px 0 8px; }

/* log real dentro do card e do drawer */
.syscard .sc-real { display: flex; align-items: center; gap: 8px; margin: 7px 0 2px; padding: 5px 8px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 9px; }
.syscard .sc-real .mono { color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syscard .sc-real .sc-real-ago { font-size: 10.5px; color: var(--muted-2); white-space: nowrap; font-weight: 700; }
.d-real { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.d-real .dr-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); font-weight: 800; margin-bottom: 8px; }
.d-real .dr-row { display: flex; align-items: center; gap: 10px; }
.d-real .dr-row .mono { color: var(--ink); flex: 1; min-width: 0; }
.d-real .dr-ago { color: var(--muted); white-space: nowrap; font-size: 12px; }
.d-real .dr-sub { font-size: 12px; color: var(--muted); margin-top: 7px; }

/* ═══════════════════════════════════════════════════════════════════════════
   F0 · Login + sidebar por função (task 86ak9dj70)
   Mesma paleta do painel: preto #0B0B0D, laranja #FF6A00, Urbanist.
   [FALTA: skill telas-aiab — não existe no host; segui a estética já no ar.]
   ═════════════════════════════════════════════════════════════════════════ */

/* ---- Tela de login ---- */
body.tela-login { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 400px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 32px 30px 26px;
}
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.login-brand svg { width: 44px; height: 44px; display: block; }
.login-brand h1 {
  font-size: 19px; margin: 0; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
}
.login-brand h1 .amp { color: var(--ink-accent); }
.login-brand .sub {
  font-size: 11px; color: var(--muted); letter-spacing: 2.4px;
  text-transform: uppercase; font-weight: 600;
}
.login-card label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted); margin: 0 0 7px;
}
.login-card input {
  width: 100%; padding: 11px 13px; margin-bottom: 17px; font-size: 15px;
  font-family: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; outline: none;
}
.login-card input:focus { border-color: var(--orange); }
.login-card .btn { width: 100%; justify-content: center; padding: 11px; font-size: 14.5px; }
.login-card .btn[disabled] { opacity: .6; cursor: default; }
.login-erro {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-err); background: rgba(255,90,90,.08); border: 1px solid rgba(255,90,90,.3);
}
.login-rodape { margin: 22px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted-2); }

/* ---- Shell: sidebar + área do módulo ---- */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
.app-shell > .wrap { flex: 1; min-width: 0; }        /* min-width:0 = tabela larga não empurra a sidebar */

.sidebar {
  width: 224px; flex: none; padding: 22px 14px; border-right: 1px solid var(--line-soft);
  background: var(--sidebar-bg); display: flex; flex-direction: column; gap: 5px;
}
.sidebar .marca { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.sidebar .marca svg { width: 32px; height: 32px; display: block; }
.sidebar .marca b { font-size: 13.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.sidebar .marca .amp { color: var(--ink-accent); }
.sidebar .titulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted-2); padding: 4px 10px 8px;
}
.side-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none;
  border: 1px solid transparent; cursor: pointer; background: none; width: 100%; text-align: left;
  font-family: inherit;
}
.side-item:hover { color: var(--ink); background: var(--panel-2); }
.side-item.ativo { color: var(--ink); background: var(--panel-2); border-color: var(--line); }
.side-item.ativo svg { stroke: var(--orange); }
.side-item svg { width: 18px; height: 18px; flex: none; }
.side-item .acesso {
  margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted-2);
}
.sidebar .rodape { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.sidebar .usuario { padding: 0 11px 10px; }
.sidebar .usuario .nome { font-size: 13.5px; font-weight: 700; }
.sidebar .usuario .email {
  font-size: 11px; color: var(--muted-2); word-break: break-all; line-height: 1.4;
}

/* ---- Módulo ainda sem conteúdo (Clientes = F1) ---- */
.modulo-vazio {
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 44px 34px; text-align: center; margin-top: 8px;
}
.modulo-vazio h2 { margin: 0 0 10px; font-size: 22px; font-weight: 800; }
.modulo-vazio p { margin: 0 auto; max-width: 520px; color: var(--muted); line-height: 1.6; font-size: 14px; }
.modulo-vazio .marcador {
  display: inline-block; margin-bottom: 18px; padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-warn); background: rgba(255,196,0,.08); border: 1px solid rgba(255,196,0,.3);
}

/* ---- Sem acesso (403) e carregando ---- */
.aviso-central { max-width: 560px; margin: 14vh auto; text-align: center; padding: 0 22px; }
.aviso-central h2 { font-size: 21px; font-weight: 800; margin: 0 0 12px; }
.aviso-central p { color: var(--muted); line-height: 1.6; margin: 0 0 20px; }

@media (max-width: 720px) {
  /* No celular o espaçador do topbar não tem sentido: empurraria os controles
     para uma linha só e larga demais. */
  .topbar .spacer { display: none; }
  .topbar { gap: 8px 10px; }
  .brand { width: 100%; }
  .wrap { padding: 14px 14px 24px; }
  /* 3 colunas em vez de 2: 5 KPIs cabem em 2 fileiras, não 3. */
  .kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpi { padding: 8px 9px; }
  .kpi::before { width: 2px; }
  .kpi .n { font-size: 19px; }
  .kpi .l { font-size: 9px; letter-spacing: .6px; margin-top: 4px; }
  .section-title, .secao-cabeca { flex-wrap: wrap; row-gap: 2px; }
}

@media (max-width: 820px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    border-right: none; border-bottom: 1px solid var(--line-soft); padding: 12px;
  }
  .sidebar .marca { padding: 0 8px 0 4px; }
  .sidebar .titulo { display: none; }
  .side-item { width: auto; }
  .sidebar .rodape { margin: 0 0 0 auto; padding: 0; border: none; display: flex; align-items: center; gap: 10px; }
  .sidebar .usuario { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   F0.1 · toggle de tema + aviso de retrato velho (task 86ak9dj70)
   ═════════════════════════════════════════════════════════════════════════ */

/* O toggle reusa .side-item: é um item da sidebar como os outros, não um
   controle especial pendurado num canto. */
.tema-toggle { justify-content: flex-start; }
.tema-toggle .tema-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema-toggle svg { stroke: currentColor; }
.tema-toggle:hover svg { stroke: var(--ink-accent); }

/* Retrato velho = job parado. Amarelo de aviso, não vermelho de erro: o
   painel continua funcionando, só está mostrando dado de alguns minutos atrás. */
.aviso-snapshot {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow);
  color: var(--muted);
  border-radius: 10px;
  padding: 10px 14px;
  margin: -4px 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
}
.aviso-snapshot b { color: var(--ink-warn); font-weight: 800; }
.aviso-snapshot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 1px 6px; color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   F0.1b · sidebar fixa + HOME compacta (task 86ak9dj70)
   ═════════════════════════════════════════════════════════════════════════ */

/* ---- Sidebar presa à viewport ----
   Era `align-items: stretch` num flex cuja altura é a da PÁGINA. Como a HOME
   passava de 3 telas, a sidebar tinha 3 telas de altura e o rodapé dela
   (usuário · tema · Sair) ficava lá embaixo — só aparecia depois de rolar
   tudo. Agora ela tem a altura da janela, gruda no topo e rola por dentro. */
.app-shell { align-items: flex-start; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;              /* iOS: desconta a barra do navegador */
  overflow-y: auto;
  overscroll-behavior: contain; /* rolar a sidebar não rola a página atrás */
}

/* ---- Seção recolhível ----
   O cabeçalho vira botão, mas continua parecendo um título: quem lê a tela
   não deve precisar aprender um controle novo. */
.secao { margin-top: 18px; }
.secao:first-child { margin-top: 0; }
.secao-cabeca {
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 14px;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--muted);
  text-align: left;
}
.secao-cabeca:hover { color: var(--ink); }
.secao-cabeca:hover .bar { background: var(--ink-accent); }
.secao-seta {
  margin-left: auto;
  font-size: 11px;
  transition: transform .15s ease;
  transform: rotate(-90deg);   /* fechada aponta para o lado */
}
.secao-cabeca.aberta .secao-seta { transform: rotate(0deg); }

.ver-mais {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: none;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ver-mais:hover { border-color: var(--ink-accent); color: var(--ink-accent); }

/* ---- Kanban: a coluna rola por dentro ----
   Uma coluna com 13 missões empurrava a página inteira para baixo. O board
   agora tem altura de tela e cada coluna rola sozinha. */
.col {
  max-height: 44vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* o cabeçalho da coluna não some ao rolar: sem ele não se sabe qual pilha é */
.col > .col-head {
  position: sticky;
  top: -12px;                  /* compensa o padding do .col */
  z-index: 1;
  background: var(--panel);
  margin: -12px -4px 0;
  padding: 14px 8px 10px;
}
.detail { max-height: calc(100vh - 36px); overflow-y: auto; }

@media (max-width: 820px) {
  /* No celular a sidebar é uma barra no topo: presa lá, sem altura de tela. */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    overflow: visible;
    backdrop-filter: blur(8px);
  }
  .col { max-height: 48vh; }
  .detail { max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   #038 · Missões + Fila de Decisão
   ───────────────────────────────────────────────────────────────────────────
   Regra de cor desta seção: NENHUM hex novo em `color:`. Só os tokens de
   texto (--ink, --muted, --ink-accent, --ink-warn, --ink-ok, --ink-err), que
   já estão medidos contra as três superfícies em tests/test_contraste.py.
   Preenchimento e borda podem usar rgba dos acentos — eles não são lidos.
   ═════════════════════════════════════════════════════════════════════════ */

.missoes .bloco { margin: 22px 0 30px; }
.bloco-titulo {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 15px; margin: 0 0 12px; color: var(--ink);
}
.bloco-sub { font-size: 12px; font-weight: 400; color: var(--muted); }

/* ── faixas de aviso ─────────────────────────────────────────────────────── */
.aviso-faixa {
  border: 1px solid var(--line); border-left-width: 3px;
  background: var(--panel); color: var(--ink);
  padding: 9px 12px; border-radius: 8px; margin: 10px 0; font-size: 13px;
}
.aviso-faixa.ok     { border-left-color: var(--green);  color: var(--ink-ok); }
.aviso-faixa.alerta { border-left-color: var(--yellow); color: var(--ink-warn); }
.aviso-faixa.erro   { border-left-color: var(--red);    color: var(--ink-err); }

/* ── cartão de gate ──────────────────────────────────────────────────────── */
.gates { display: grid; gap: 12px; }
.gate {
  border: 1px solid var(--line); border-left: 3px solid var(--yellow);
  background: var(--panel); border-radius: 10px; padding: 14px 16px;
}
.gate-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gate-topo h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; }
.gate-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-accent); }

/* A pergunta é o produto da tela: ela é o maior texto do cartão. */
.gate-pergunta {
  margin: 10px 0; padding: 10px 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.5; color: var(--ink);
  max-height: 9.5em; overflow: auto; white-space: pre-wrap;
}
.gate-meta { margin: 6px 0 12px; font-size: 12px; color: var(--muted); }
.gate-meta a { color: var(--ink-info); }

/* ── ações ───────────────────────────────────────────────────────────────── */
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.acoes-nota { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.btn.perigo { color: var(--ink-err); border-color: rgba(255,90,90,.35); }
.btn.perigo:hover { border-color: var(--red); color: var(--ink-err); }
.btn.fantasma { background: transparent; color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.responder-caixa { flex: 1 1 100%; display: grid; gap: 8px; }
.responder-texto {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  font: inherit; font-size: 13px; line-height: 1.5;
}
.responder-texto:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.responder-rodape { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.responder-rodape .dica { font-size: 11px; color: var(--muted); flex: 1; }

/* ── chips de estado e filtro ────────────────────────────────────────────── */
.chip {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.chip.e-aguardando-vegas { color: var(--ink-warn); border-color: rgba(255,196,0,.4); }
.chip.e-trabalhando      { color: var(--ink-ok);   border-color: rgba(53,196,106,.4); }
.chip.e-parado           { color: var(--ink-err);  border-color: rgba(255,90,90,.35); }
.chip.e-entregue         { color: var(--muted); }
.chip.vivo  { color: var(--ink-ok);  border-color: rgba(53,196,106,.4); }
.chip.orfao { color: var(--muted); }

.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.filtro-chip {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 4px 10px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.filtro-chip b { color: var(--ink); margin-left: 4px; font-variant-numeric: tabular-nums; }
.filtro-chip:hover { border-color: var(--orange); }
.filtro-chip.ativo { border-color: var(--orange); color: var(--ink-accent); }

/* ── tabela ──────────────────────────────────────────────────────────────── */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.tabela-missoes { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
.tabela-missoes th, .tabela-missoes td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.tabela-missoes thead th { background: var(--panel-2); position: sticky; top: 0; }
.th-botao {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--muted-2);
}
.th-botao:hover { color: var(--ink-accent); }
.th-botao .seta { margin-left: 4px; color: var(--ink-accent); }
.tabela-missoes .col-num   { font-variant-numeric: tabular-nums; color: var(--ink-accent); }
.tabela-missoes .col-idade { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-missoes .col-host  { color: var(--muted); white-space: nowrap; }
.tabela-missoes .col-titulo,
.tabela-missoes .col-ultima {
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabela-missoes .col-ultima { color: var(--muted); }
.tabela-missoes .col-slug {
  display: block; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabela-missoes .col-links a { color: var(--ink-info); margin-right: 8px; white-space: nowrap; }
.tabela-missoes tr.e-aguardando-vegas td { background: rgba(255,196,0,.045); }
.vazio-celula { color: var(--muted); text-align: center; padding: 18px; }

/* ── modal de nova missão ────────────────────────────────────────────────── */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px;
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; width: min(620px, 100%); max-height: 86vh; overflow: auto;
}
.modal h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.modal-sub, .modal-nota { font-size: 12px; color: var(--muted); margin: 4px 0 12px; line-height: 1.5; }
.modal .campo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.modal .campo select {
  font: inherit; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
}
.lista-arquivos { display: grid; gap: 6px; margin: 10px 0; }
.lista-arquivos .arquivo {
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); cursor: pointer; font-size: 13px; color: var(--ink);
}
.lista-arquivos .arquivo.ativo { border-color: var(--orange); }
.lista-arquivos .arquivo span { color: var(--muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.problemas { font-size: 12px; color: var(--ink-err); margin: 10px 0; }
.modal-rodape { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ── módulo Shell ────────────────────────────────────────────────────────── */
.shell-modulo { display: flex; flex-direction: column; min-height: 0; }
.shell-frame {
  flex: 1; width: 100%; min-height: 62vh; border: 1px solid var(--line);
  border-radius: 10px; background: #000;
}

@media (max-width: 760px) {
  .gate-pergunta { max-height: 14em; }
  .acoes .btn { flex: 1 1 auto; }
  .shell-frame { min-height: 70vh; }
}

/* ═════════════════════════════════════════════════════════════════════════
   F1 · Aba Clientes — lista densa, ficha e switcher.
   Tudo em cima dos tokens de tema (--panel/--line/--ink/--muted): a tela
   acompanha claro/escuro sem uma única cor fixa aqui dentro.
   ═════════════════════════════════════════════════════════════════════════ */

.clientes .cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.clientes h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }

/* O que a ficha NÃO sabe aparece, e aparece em laranja. É o ponto da tela. */
.falta {
  color: var(--ink-accent); font-size: 12px; font-weight: 600;
  white-space: nowrap;
}

.regua { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.regua .cresce { flex: 1 1 40px; }
.busca {
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px;
  min-width: 200px; max-width: 100%;
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--tag-bg); color: var(--ink);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600;
  cursor: default; font-family: inherit; line-height: 1.4;
}
button.pill { cursor: pointer; }
button.pill:hover { border-color: var(--ink-accent); }
.pill.ligado { border-color: var(--ink-accent); box-shadow: inset 0 0 0 1px var(--ink-accent); }
.pill-ok     { color: var(--ink-ok); }
.pill-warn   { color: var(--ink-warn); }
.pill-info   { color: var(--ink-info); }
.pill-err    { color: var(--ink-err); }
.pill-neutro { color: var(--muted); }

.filtros-ativos {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin-bottom: 10px;
}
.chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer;
}
.chip:hover { border-color: var(--ink-accent); }
.chip.limpar { color: var(--ink-accent); }

/* A tabela pode ser mais larga que a tela no celular — ela rola, a página não.
   ⚠️ `overflow-x: auto` sozinho criava um bug silencioso: um elemento com
   `overflow` vira o contêiner de rolagem dos `position: sticky` de dentro, e
   como este só rolava na HORIZONTAL, o `thead sticky` nunca grudava em lugar
   nenhum — com 23 clientes o cabeçalho sumia e a pessoa perdia de vista qual
   coluna era qual. `overflow: auto` nos dois eixos + altura máxima devolve o
   eixo vertical para o contêiner, e aí o sticky funciona de verdade. */
.tabela-rolagem {
  overflow: auto; max-height: min(70vh, 760px);
  border: 1px solid var(--line); border-radius: var(--radius);
  overscroll-behavior: contain;
}
table.densa { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); }
table.densa th, table.densa td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle; white-space: nowrap;
}
/* Fundo OPACO e sombra: sem isso as linhas passam por baixo do cabeçalho e
   as duas leituras se sobrepõem. `--panel` já é opaco; a sombra separa. */
table.densa thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel); box-shadow: 0 1px 0 var(--line);
}
table.densa th.num, table.densa td.num { text-align: right; }
table.densa tbody tr { cursor: pointer; }
table.densa tbody tr:hover { background: var(--tag-bg); }
table.densa tbody tr:focus-visible { outline: 2px solid var(--ink-accent); outline-offset: -2px; }
table.densa td.vazio { text-align: center; color: var(--muted); padding: 26px; cursor: default; }
table.densa.compacta td { padding: 6px 10px; font-size: 12px; }

.th-btn {
  background: none; border: 0; padding: 0; font: inherit; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  cursor: pointer; display: inline-flex; gap: 4px; align-items: center;
}
.th-btn:hover, .th-btn.ordenando { color: var(--ink); }
.seta { color: var(--ink-accent); }

.nome-cliente { font-weight: 700; }
.slug { font-size: 11px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dim { border-bottom: 1px dashed var(--line); cursor: pointer; }
.dim:hover { border-bottom-color: var(--ink-accent); color: var(--ink-accent); }
td.alerta { color: var(--ink-warn); }

.barra { position: relative; display: inline-block; width: 84px; height: 16px;
         background: var(--tag-bg); border-radius: 8px; overflow: hidden; vertical-align: middle; }
.barra-preenche { position: absolute; inset: 0 auto 0 0; opacity: .35; }
.barra-preenche.cor-ok  { background: var(--green); }
.barra-preenche.cor-warn{ background: var(--yellow); }
.barra-preenche.cor-err { background: var(--red); }
.barra-texto { position: relative; display: block; text-align: center; font-size: 11px; line-height: 16px; }

.rodape-lista { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ── ficha ───────────────────────────────────────────────────────────────── */
.ficha-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ficha-topo h2 { margin: 0; font-size: 20px; }
.ficha-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ficha-colunas { grid-template-columns: 1fr; } }

.ficha-secao {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.ficha-secao > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ficha-secao h3 {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}

.grade-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
@media (max-width: 560px) { .grade-campos { grid-template-columns: 1fr; } }
.campo.largo { grid-column: 1 / -1; }
.campo-rotulo { font-size: 11px; color: var(--muted); }
.campo-valor { font-size: 14px; word-break: break-word; }
.campo-valor a { color: var(--ink-info); }
.campo-valor.editando { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campo-valor input {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 6px 10px; font: inherit; width: 130px;
}
/* ── a ficha editável (#043) ──────────────────────────────────────────────
   O valor INTEIRO é o alvo do clique, não um lápis de 12px ao lado dele — o
   alvo pequeno é o que faz a pessoa errar no celular. O lápis aparece só no
   hover/foco: ele é confirmação de que dá para editar, não decoração fixa.  */
.editavel {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  background: none; border: 1px solid transparent; border-radius: 8px;
  margin: -3px -7px; padding: 3px 7px; font: inherit; color: inherit;
  text-align: left; cursor: text;
}
.editavel:hover, .editavel:focus-visible { border-color: var(--line); background: var(--tag-bg); }
.editavel .lapis { font-size: 11px; color: var(--muted); opacity: 0; flex: 0 0 auto; }
.editavel:hover .lapis, .editavel:focus-visible .lapis { opacity: 1; }
.edicao-marca { font-size: 10.5px; margin-top: 2px; }

.campo.editando { background: var(--tag-bg); border-radius: 10px; margin: -6px -8px; padding: 6px 8px; }
.campo-valor select, .campo-valor textarea {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 6px 10px; font: inherit; width: 100%; max-width: 100%;
}
.campo-valor input.motivo { width: 100%; margin-top: 6px; font-size: 12px; }
.botoes-campo { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

/* ── a linha de atalhos (#043, item 3) ────────────────────────────────────
   Marca de 3 letras em vez de logotipo: "GHL" é legível em 26px e não corre
   o risco de desenhar errado a marca de outra empresa. Apagado ≠ sumido —
   o ícone sem link continua ali dizendo que falta o id.                    */
.atalhos-linha { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.atalho-icone {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 5px;
  font-size: 12px; color: var(--ink); background: var(--panel);
}
.atalho-icone .marca {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 5px; border-radius: 999px;
  background: var(--tag-bg); color: var(--ink-accent);
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.atalho-icone:hover { border-color: var(--ink-accent); color: var(--ink-accent); }
.atalho-icone.apagado { opacity: .45; cursor: not-allowed; }
.atalho-icone.apagado .marca { color: var(--muted); }
.atalho-icone.apagado:hover { border-color: var(--line); color: var(--ink); }

/* Os links avulsos da ficha ficam depois dos IDs, separados por um fio: são
   outra coisa — id é chave de sistema, link é endereço que alguém colou. */
.links-ficha { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

.aviso-campo {
  font-size: 12px; color: var(--ink-warn);
  border-left: 2px solid var(--ink-warn); padding-left: 10px;
}
.contexto { font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
.erro-inline { color: var(--ink-err); font-size: 12px; width: 100%; }

.link-btn {
  background: none; border: 0; padding: 0 0 0 8px; font: inherit; font-size: 12px;
  color: var(--ink-accent); cursor: pointer; text-decoration: underline;
}
.btn.pequeno { padding: 5px 12px; font-size: 12px; }

.atalhos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.atalho {
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  font-size: 12px; color: var(--ink); text-decoration: none;
}
.atalho:hover { border-color: var(--ink-accent); color: var(--ink-accent); }

.checklist-grupo { margin-bottom: 12px; }
.checklist-titulo { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.check { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px;
         align-items: baseline; font-size: 13px; padding: 3px 0; }
.check-marca { text-align: center; }
.check-ok    .check-marca { color: var(--ink-ok); }
.check-falta .check-marca { color: var(--ink-accent); }
.check-na    .check-marca { color: var(--muted); }
.check-falta .check-label { color: var(--ink); }
.check-obs { font-size: 11px; color: var(--muted); text-align: right; max-width: 55%; }

.seletor-periodo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.periodo {
  border: 1px solid var(--line); background: var(--tag-bg); color: var(--ink);
  border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.periodo.ligado { border-color: var(--ink-accent); color: var(--ink-accent); }

.kpis-cliente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { background: var(--tag-bg); border-radius: 10px; padding: 10px 12px; }
.kpi-rotulo { font-size: 11px; color: var(--muted); }
.kpi-valor { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.kpi-delta { font-size: 12px; font-weight: 700; }
.kpi-delta.sobe { color: var(--ink-ok); }
.kpi-delta.desce { color: var(--ink-err); }
/* KPI sem fonte: continua ocupando o lugar dele, com o buraco escrito. Um KPI
   que some é um KPI que ninguém cobra. */
.kpi-falta { opacity: .75; }
.kpi-falta .kpi-valor { font-size: 12px; font-weight: 600; line-height: 1.35; }
.kpi-nota { font-size: 10.5px; margin-top: 4px; line-height: 1.35; }
.fonte-dado { margin-top: 10px; font-size: 10.5px; }
.campo-hist { color: var(--muted); white-space: nowrap; }
.antes { color: var(--muted); text-decoration: line-through; }
.motivo-hist { max-width: 220px; }

.sparkline {
  display: flex; align-items: flex-end; gap: 2px; height: 56px; margin-top: 14px;
  border-bottom: 1px solid var(--line);
}
.spark-barra { flex: 1 1 0; min-width: 2px; background: var(--ink-accent); opacity: .6; border-radius: 2px 2px 0 0; }
.spark-barra:hover { opacity: 1; }

/* ── switcher (Ctrl+K) ───────────────────────────────────────────────────── */
.switcher-fundo {
  position: fixed; inset: 0; background: var(--overlay); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px;
}
.switcher {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); width: min(520px, 100%); overflow: hidden;
}
.switcher input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--ink); font: inherit; font-size: 15px; padding: 14px 16px; outline: none;
}
.switcher ul { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow-y: auto; }
.switcher li {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; font-size: 13px;
}
.switcher li.marcado { background: var(--tag-bg); }
.switcher li b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.switcher li.vazio { color: var(--muted); cursor: default; }
.switcher-rodape { border-top: 1px solid var(--line); padding: 8px 16px; font-size: 11px; color: var(--muted); }
kbd {
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  padding: 0 5px; font-size: 11px; font-family: inherit;
}

/* A ficha quebrou ao desenhar (ver Salvaguarda em front/clientes.jsx). Não é
   erro de acesso — por isso não usa a cor de negado. */
.erro-tecnico {
  background: var(--tag-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; text-align: left; overflow-x: auto;
  max-width: 100%; white-space: pre-wrap; word-break: break-word;
  color: var(--ink-err);
}

/* A ficha quebrou ao desenhar (ver Salvaguarda em front/clientes.jsx). Não é
   erro de acesso — por isso não usa a cor de negado. */
.erro-tecnico {
  background: var(--tag-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; text-align: left; overflow-x: auto;
  max-width: 100%; white-space: pre-wrap; word-break: break-word;
  color: var(--ink-err);
}

/* ═════════════════════════════════════════════════════════════════════════
   Barra superior — qual cliente o cockpit está olhando (ClickUp 86akhcn6h).
   Fica acima de QUALQUER módulo, porque a escolha vale para todos eles.
   ═════════════════════════════════════════════════════════════════════════ */

/* A sidebar passou a conviver com uma coluna que tem barra + conteúdo.
   Sem isto o `.app-shell > .wrap { flex: 1 }` deixa de casar (agora há um
   nível no meio) e o conteúdo encolhe para a largura do texto. */
.app-shell > .area-central {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}

.barra-topo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 24px; border-bottom: 1px solid var(--line-soft);
  background: var(--sidebar-bg);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(140%) blur(8px);
}

.seletor-cliente {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 6px 8px 6px 14px; font: inherit; cursor: pointer;
  max-width: 100%;
}
.seletor-cliente:hover { border-color: var(--ink-accent); }
.seletor-cliente:focus-visible { outline: 2px solid var(--ink-accent); outline-offset: 2px; }
.seletor-rotulo {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.seletor-nome { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.seletor-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--muted);
}
/* Em repouso (agência) o seletor não compete com o conteúdo; com cliente
   escolhido ele acende, porque aí ele está filtrando o que a pessoa lê. */
.seletor-cliente:not(.em-agencia) { border-color: var(--ink-accent); }
.seletor-cliente:not(.em-agencia) .seletor-nome { color: var(--ink-accent); }
.seletor-atalho { display: inline-flex; gap: 3px; margin-left: 4px; }
.seletor-atalho kbd { font-size: 10px; padding: 0 4px; }

.switcher li.agencia b { color: var(--ink-accent); }
.switcher li.atual { box-shadow: inset 0 0 0 1px var(--line); }
.marca-atual {
  margin-left: auto; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 860px) {
  .barra-topo { padding: 10px 16px; }
  .seletor-atalho { display: none; }     /* não há Ctrl+K no celular */
}

/* ═════════════════════════════════════════════════════════════════════════
   Seletor de cliente — cartão no topo da sidebar + painel flutuante.
   Modelo do switcher de subconta do GHL (ClickUp 86akhcn6h).
   ═════════════════════════════════════════════════════════════════════════ */

.cartao-cliente {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 9px 10px; font: inherit; cursor: pointer;
  margin: 0 0 14px; text-align: left;
}
.cartao-cliente:hover { border-color: var(--ink-accent); }
.cartao-cliente:focus-visible { outline: 2px solid var(--ink-accent); outline-offset: 2px; }
/* Com cliente escolhido o cartão acende: ele deixou de ser "onde estou" e
   virou "de quem estou falando". */
.cartao-cliente:not(.em-agencia) { border-color: var(--ink-accent); }
.cartao-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cartao-texto b {
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartao-texto .sub, .painel-texto .sub {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartao-cliente .chevron { width: 16px; height: 16px; flex: none; color: var(--muted); }
.icone-casa { width: 20px; height: 20px; flex: none; color: var(--ink-accent); }

/* Inicial em círculo: matiz derivada do slug, então o mesmo cliente tem
   sempre a mesma cor sem ninguém cadastrar nada. */
.inicial {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0;
  background: hsl(var(--matiz) 55% 42%); color: #fff;
}
:root[data-theme="light"] .inicial { background: hsl(var(--matiz) 48% 40%); }

.titulo + .side-item { margin-top: 0; }
.voltar-agencia { margin-top: 10px; color: var(--muted); }
.voltar-agencia:hover { color: var(--ink-accent); }

/* ── painel flutuante ─────────────────────────────────────────────────────── */
.painel-fundo {
  position: fixed; inset: 0; background: var(--overlay); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 16px 16px;
}
.painel-clientes {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); width: min(460px, 100%); overflow: hidden;
  display: flex; flex-direction: column; max-height: 76vh;
}
.painel-clientes > input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--ink); font: inherit; font-size: 15px; padding: 14px 16px; outline: none;
}
.painel-clientes ul {
  list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0;
}
.painel-clientes li {
  display: flex; gap: 10px; align-items: center; padding: 7px 8px;
  border-radius: 9px; cursor: pointer;
}
.painel-clientes li.marcado { background: var(--tag-bg); }
.painel-clientes li.atual { box-shadow: inset 0 0 0 1px var(--ink-accent); }
.painel-clientes li.linha-agencia { border-bottom: 1px solid var(--line-soft); border-radius: 9px 9px 0 0; }
.painel-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.painel-texto b { font-size: 13px; font-weight: 700; }
.painel-clientes li.vazio { color: var(--muted); cursor: default; padding: 16px; justify-content: center; }

.pin {
  flex: none; background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--muted); border-radius: 6px; line-height: 0;
}
.pin svg { width: 15px; height: 15px; }
.pin:hover { color: var(--ink-accent); background: var(--tag-bg); }
.pin.fixo { color: var(--ink-accent); }

.painel-rodape {
  border-top: 1px solid var(--line); padding: 8px 16px; font-size: 11px; color: var(--muted);
}

@media (max-width: 860px) {
  /* No celular a sidebar vira faixa horizontal: o cartão ganha a linha toda
     para o nome do cliente não brigar com os itens de menu. */
  .cartao-cliente { margin: 0 0 8px; order: -1; flex-basis: 100%; }
  .painel-fundo { padding-top: 6vh; }
}

/* Status que diz "parado" com pedido entrando. Não é enfeite: foi assim que o
   sabor-de-casa passou semanas marcado Inativo sendo o cliente com mais dado
   vivo do CDP. */
.incoerente {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; border-radius: 50%;
  background: var(--ink-warn); color: var(--on-accent);
  font-size: 10px; font-weight: 900; vertical-align: middle; cursor: help;
}
.faixa-incoerente {
  border: 1px solid var(--ink-warn); border-left-width: 3px; border-radius: 10px;
  background: var(--tag-bg); color: var(--ink);
  padding: 10px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 16px;
}
.faixa-incoerente b { color: var(--ink-warn); }

/* Dois ganchos que a ficha usa e que não tinham regra nenhuma — a prova de
   estilo do CI pegou. `.ficha` dá o respiro entre o topo e as colunas;
   `.checklist` separa os grupos sem depender da margem do vizinho. */
.ficha { display: block; }
.ficha > .ficha-colunas { margin-top: 4px; }
.checklist { display: grid; gap: 12px; }

/* ══ #029 · Meta: aba Campanhas do cliente + Portfólio da agência ══════════
   Só tokens que já existem — nenhuma cor nova. O tema claro/escuro e o
   contraste AA da F0.1 continuam valendo sem eu tocar em nada:
   tests/test_contraste.py mede os pares, e todo <button> aqui usa classe que
   já declara `color` (.btn, .chip, .link-btn, .pill-*, .th-btn).
   ───────────────────────────────────────────────────────────────────────── */

/* ── o toggle PT/EN ──────────────────────────────────────────────────────── */
.idioma { display: inline-flex; gap: 4px; margin-left: 8px; }
.idioma .chip { min-width: 38px; justify-content: center; font-variant-numeric: tabular-nums; }

/* ── período ─────────────────────────────────────────────────────────────── */
.periodo-barra { margin: 14px 0 10px; }
.seletor-periodo { display: flex; flex-wrap: wrap; gap: 6px; }
.periodo-datas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.periodo-datas label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.periodo-datas input {
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
}
.periodo-info { margin-top: 8px; }

/* ── delta de KPI ─────────────────────────────────────────────────────────
   `nova` não é "+∞%": é campanha que não existia antes. Três desenhos para
   três situações, porque tratá-las igual é o que faz painel mentir. */
.delta { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.delta.bom   { color: var(--ink-ok); }
.delta.ruim  { color: var(--ink-err); }
.delta.igual { color: var(--muted-2); }
.delta.nova  { color: var(--ink-info); }

/* ── a média por objetivo (a regra de análise, visível) ──────────────────── */
.resumo-objetivos { margin: 12px 0; padding: 10px 12px; background: var(--panel-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius); color: var(--ink); }
.resumo-objetivos .sub { margin-bottom: 8px; }

/* ── a tabela ────────────────────────────────────────────────────────────── */
.campanhas-tabela td { vertical-align: top; }
.campanhas-tabela .acao-col { text-align: right; white-space: nowrap; }
.campanhas-tabela tr.dim td { opacity: .68; }

/* ── carregando: esqueleto, não spinner ──────────────────────────────────
   Spinner não diz quanto falta nem o que vem. A linha fantasma tem a altura
   da linha real, então a tela não pula quando o dado chega. */
.esqueleto { padding: 8px 0; }
.linha-fantasma {
  height: 38px; margin: 6px 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--line) 50%, var(--panel-2) 75%);
  background-size: 400% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .linha-fantasma { animation: fantasma 1.4s ease-in-out infinite; }
  @keyframes fantasma { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
}

/* ── conectar (o estado vazio da aba) ────────────────────────────────────── */
.modulo-vazio.conectar { max-width: 620px; text-align: left; }
.lista-permissoes { margin: 14px 0; padding: 12px 14px; background: var(--tag-bg);
  border: 1px solid var(--line-soft); border-radius: var(--radius); }
.lista-permissoes ul { margin: 6px 0 0; padding-left: 18px; }
.lista-permissoes li { margin: 4px 0; }
.erro-conectar { margin-top: 14px; }
.token-manual { margin-top: 10px; display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start; }
.btn.grande { padding: 12px 20px; font-size: 15px; }

.campo-escolha { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; max-width: 520px; }
.campo-escolha select, .campo-escolha input, .campo-escolha textarea {
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px;
  font: inherit; width: 100%;
}
.campo-escolha textarea { resize: vertical; }
.faixa-idade { display: flex; align-items: center; gap: 8px; }
.faixa-idade input { width: 84px; }

/* ── o wizard ────────────────────────────────────────────────────────────── */
.wizard { margin: 14px 0; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--ink); }
.wizard-topo { display: flex; align-items: center; gap: 10px; }
.wizard-topo h3 { margin: 0; flex: 1; }
.wizard-passos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  margin: 12px 0; padding: 0; }
.wizard-passos li { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--muted); padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line-soft); }
.wizard-passos li .n { display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--line); color: var(--ink); font-size: 11px; }
.wizard-passos li.atual { color: var(--ink); border-color: var(--orange); }
.wizard-passos li.atual .n { background: var(--orange); color: var(--on-accent); }
.wizard-passos li.feito .n { background: var(--green); color: var(--on-accent); }
.wizard-corpo { margin: 14px 0; }
.wizard-pe { display: flex; align-items: center; gap: 10px; padding-top: 12px;
  border-top: 1px solid var(--line-soft); }

/* PAUSED é a informação mais importante desta tela: quem cria um anúncio
   precisa saber, sem ler nada, que ele NÃO está no ar. */
.aviso-paused { padding: 12px 14px; margin: 12px 0; border-radius: var(--radius);
  background: var(--glow-2); border: 1px solid var(--yellow); color: var(--ink); }
.aviso-paused strong { color: var(--ink-warn); }
.aviso-paused p { margin: 6px 0 0; }

/* ── celular ─────────────────────────────────────────────────────────────
   A tabela é a única coisa que pode passar da largura da tela, e ela já mora
   em .tabela-rolagem. O resto empilha. */
@media (max-width: 820px) {
  .campanhas .ficha-topo, .portfolio .ficha-topo { flex-wrap: wrap; }
  .wizard-pe { flex-wrap: wrap; }
  .periodo-datas { flex-direction: column; align-items: stretch; }
  .campo-escolha { max-width: none; }
}
@media (max-width: 520px) {
  .seletor-periodo .chip { flex: 1 1 auto; justify-content: center; }
  .idioma { margin-left: 0; }
  .kpis-cliente { grid-template-columns: repeat(2, 1fr); }
}


/* ── #043 · os três tamanhos de tela em que a ficha foi conferida ──────────
   1280px+  duas colunas, KPIs em três, campos em dois
   900px    uma coluna (a regra já existia em .ficha-colunas)
   560px    campo em uma coluna; KPIs em dois; atalho vira só a marca
   400px    o menor alvo real (iPhone SE): atalhos só com a marca, e o editor
            ocupa a largura toda — input de 130px num campo de texto longo
            obrigava a rolar dentro do input para reler o que foi digitado. */
@media (max-width: 700px) {
  .kpis-cliente { grid-template-columns: repeat(2, 1fr); }
  .campo-valor input { width: 100%; }
  .campo-valor.editando { align-items: stretch; }
  .motivo-hist { display: none; }
}
@media (max-width: 430px) {
  .kpis-cliente { grid-template-columns: 1fr; }
  /* Só a marca: dez chips com rótulo em 400px viram seis linhas de atalho. */
  .atalho-icone .atalho-rotulo { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .atalho-icone { padding: 4px; }
  .ficha-topo h2 { font-size: 18px; width: 100%; }
  /* O lápis fica visível: em toque não existe hover, e sem ele nada na tela
     diz que o campo edita. */
  .editavel .lapis { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   #048 · ENCARTES — /c/<slug>/encartes e /encartes
   ───────────────────────────────────────────────────────────────────────────
   Só tokens da casa: nenhum hex solto aqui. As cores VIVAS do tabloide moram
   em web/encarte/encarte.css, dentro do `.enc` — são do cliente, não do
   cockpit, e misturar as duas paletas faria o painel mudar de cara conforme
   o tema do supermercado.

   As duas bordas da conferência são o coração da tela (ver front/encarte.jsx):
     amarelo  unidade veio do dicionário, ninguém confirmou
     vermelho preço não passou na régua
   Elas NÃO são só cor: cada linha marcada ganha também um texto
   (`.enc-problema`) e o `title` do select. Cor sozinha não serve para quem
   não distingue vermelho de amarelo — e este é um painel de conferir preço.
   ═══════════════════════════════════════════════════════════════════════════ */
.enc-tela h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--muted-2); font-weight: 800; margin: 0 0 12px;
}
.enc-topo { margin-bottom: 18px; }
.enc-topo h2 { margin: 0; font-size: 21px; font-weight: 800; }
.enc-sub, .enc-dica { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.enc-sub { margin: 4px 0 0; }
.enc-carregando { color: var(--muted); }

.enc-bloco {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}

.enc-lista {
  width: 100%; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  line-height: 1.6; resize: vertical;
}
.enc-lista:focus { outline: 2px solid var(--orange); outline-offset: 1px; }

.enc-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.enc-trava { color: var(--ink-warn); }

.enc-aviso, .enc-erro {
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: 10px; padding: 11px 13px; margin: 12px 0;
  font-size: 12.5px; line-height: 1.5; background: var(--panel-2);
}
.enc-aviso { border-left-color: var(--yellow); color: var(--ink); }
.enc-erro { border-left-color: var(--red); color: var(--ink); }
.enc-aviso ul, .enc-erro ul { margin: 6px 0 0; padding-left: 18px; }
.enc-aviso code, .enc-erro code, .enc-dica code {
  background: var(--tag-bg); border-radius: 4px; padding: 1px 5px;
  font-size: 11.5px; overflow-wrap: anywhere;
}

/* ---- chips de resumo ---- */
.enc-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.enc-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--tag-bg);
}
.enc-chip.ok { color: var(--ink-ok); border-color: rgba(53,196,106,.4); }
.enc-chip.alerta { color: var(--ink-warn); border-color: rgba(255,196,0,.45); }
.enc-chip.erro { color: var(--ink-err); border-color: rgba(255,90,90,.45); }
.enc-chip.neutro { color: var(--muted); }

/* ---- a linha de conferência ---- */
.enc-linhas { display: flex; flex-direction: column; gap: 8px; }
.enc-linha {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 56px minmax(0, 1fr) 104px 96px 104px auto;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid transparent; border-radius: 10px; padding: 8px 10px;
}
.enc-linha.sugerida { border-left-color: var(--yellow); }
.enc-linha.preco-ruim { border-left-color: var(--red); }
/* as duas ao mesmo tempo: o preço manda, é o defeito mais caro */
.enc-linha.sugerida.preco-ruim { border-left-color: var(--red); }

.enc-foto {
  width: 56px; height: 56px; border-radius: 8px; background: var(--panel);
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; overflow: hidden; flex: none;
}
.enc-foto img { width: 100%; height: 100%; object-fit: contain; }

.enc-linha input, .enc-linha select {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 13px;
  min-width: 0; width: 100%;
}
.enc-linha input:focus, .enc-linha select:focus {
  outline: 2px solid var(--orange); outline-offset: 1px;
}
.enc-nome { font-weight: 600; }
.enc-preco { text-align: right; font-variant-numeric: tabular-nums; }
.enc-valor {
  font-weight: 800; font-size: 13.5px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
.enc-problema {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-err); font-weight: 700;
}
.enc-linha.sugerida .enc-problema { color: var(--ink-warn); }

.enc-botoes { display: flex; gap: 4px; }
/* 44px de alvo no toque (regra da casa). No desktop 30px basta e a linha
   fica menos alta — o media query lá embaixo cuida disso. */
.enc-ic {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  font-size: 15px; font-weight: 800; line-height: 1; flex: none;
}
.enc-ic:hover:not(:disabled) { border-color: var(--orange); color: var(--ink-accent); }
.enc-ic:disabled { opacity: .35; cursor: default; }
.enc-ic.perigo:hover:not(:disabled) { border-color: var(--red); color: var(--ink-err); }

/* ---- dropzone e bandeja de órfãs ---- */
.enc-dropzone {
  margin-top: 14px; border: 1px dashed var(--line); border-radius: 10px;
  padding: 14px; background: var(--panel-2);
}
.enc-dropzone b { font-size: 13px; }
.enc-dropzone p { margin: 6px 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.enc-dropzone input[type="file"] { color: var(--muted); font-size: 12.5px; max-width: 100%; }

.enc-bandeja {
  margin-top: 12px; border: 1px solid var(--line); border-left: 3px solid var(--yellow);
  border-radius: 10px; padding: 12px; background: var(--panel-2);
}
.enc-orfa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.enc-orfa select {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; max-width: 100%;
}

/* ---- formulário da peça ---- */
.enc-form {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.enc-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.enc-form label span {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted-2); font-weight: 800;
}
.enc-form input, .enc-form select {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px; font: inherit; font-size: 13px; width: 100%; min-width: 0;
}
.enc-form input:focus, .enc-form select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.enc-form .enc-largo { grid-column: 1 / -1; }

/* ---- preview ---- */
.enc-paginacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.enc-palco {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; display: flex; justify-content: center;
  /* a peça tem largura FIXA em px (1080/1920). Sem esta caixa, uma tela de
     360px ganharia rolagem horizontal na PÁGINA inteira — o defeito que a
     .topbar já documenta lá em cima. Aqui o transform:scale resolve, e o
     overflow é a rede de segurança. */
  overflow: hidden;
}
.enc-escala { position: relative; overflow: hidden; max-width: 100%; }

/* ---- saída ---- */
.enc-pecas {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.enc-peca {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
}
.enc-peca img { width: 100%; display: block; background: var(--bg); }
.enc-peca-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.enc-peca-info b { font-size: 13px; }
.enc-gate { margin-top: 12px; color: var(--muted-2); font-style: italic; }
.enc-saida { margin-top: 4px; }

/* ---- toque: alvos de 44px e a linha empilhada ----
   Abaixo de 760px a grade de 6 colunas não cabe sem espremer o nome do
   produto — que é justamente o que a pessoa está conferindo. Empilha. */
@media (max-width: 760px) {
  .enc-linha {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "foto nome"
      "unid preco"
      "valor botoes";
    row-gap: 8px;
  }
  .enc-foto { grid-area: foto; }
  .enc-nome { grid-area: nome; }
  .enc-unidade { grid-area: unid; }
  .enc-preco { grid-area: preco; }
  .enc-valor { grid-area: valor; text-align: left; align-self: center; }
  .enc-botoes { grid-area: botoes; justify-content: flex-end; }
  .enc-linha input, .enc-linha select { min-height: 44px; }
  .enc-ic { width: 44px; height: 44px; font-size: 18px; }
  .enc-form input, .enc-form select { min-height: 44px; }
  .enc-bloco { padding: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   #056 · ENCARTES — preview fixo à direita, abas e cadastro de tema
   ───────────────────────────────────────────────────────────────────────────
   O Vegas testou o staging da #048 e o diagnóstico foi curto: "a tela é uma
   coluna só e o preview fica lá embaixo — a pessoa edita sem ver o
   resultado". Daí a grade de duas colunas com o preview GRUDADO.

   A ordem do DOM é lista → preview → conferência → peça, de propósito: é
   exatamente a ordem que o CELULAR quer (preview logo depois da lista, como
   pedido), e no desktop o `grid-template-areas` reposiciona sem mexer no HTML.
   Fazer o contrário — DOM na ordem do desktop e `order` no mobile — quebraria
   a ordem de leitura de quem navega por teclado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- abas ---- */
.enc-abas { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.enc-topo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.enc-aba {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; min-height: 40px;
}
.enc-aba:hover { border-color: var(--orange); color: var(--ink-accent); }
.enc-aba.ativa { background: var(--orange); border-color: var(--orange); color: var(--on-accent); }

/* ---- a grade de duas colunas ---- */
.enc-duas { display: flex; flex-direction: column; }

@media (min-width: 1024px) {
  .enc-duas {
    display: grid;
    /* a coluna do preview não encolhe abaixo de 360px: abaixo disso a peça
       fica pequena demais para conferir preço, que é o ponto da tela. */
    grid-template-columns: minmax(0, 1fr) minmax(360px, 44%);
    grid-template-areas:
      "lista   preview"
      "tema    preview"
      "conf    preview"
      "peca    preview"
      ".       preview";
    align-items: start;
    gap: 16px;
  }
  .enc-a-lista { grid-area: lista; }
  /* #060 fix 4 — sem área nomeada o bloco de tema era auto-posicionado DEPOIS
     de tudo e refluía para o fim da página assim que a conferência aparecia. */
  .enc-a-tema { grid-area: tema; }
  .enc-a-conf { grid-area: conf; }
  .enc-a-peca { grid-area: peca; }
  .enc-a-preview {
    grid-area: preview;
    /* `align-self: start` é o que permite o sticky: sem ele o item estica
       até a altura da linha e nunca "gruda". */
    align-self: start;
    position: sticky;
    /* abaixo do topo, com folga para não colar na barra */
    top: 12px;
    /* nunca mais alto que a janela: um story (1080x1920) empurraria o botão
       Gerar para fora da tela, que é o oposto do que esta mudança faz. */
    max-height: calc(100vh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  /* no desktop o preview está sempre visível: o atalho não tem função */
  .enc-ver-peca { display: none; }
}

.enc-gerar { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }

/* ---- atalho flutuante (só no toque) ---- */
.enc-ver-peca {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  background: var(--orange); color: var(--on-accent); border: none;
  border-radius: 999px; padding: 0 20px; height: 48px; min-width: 44px;
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: var(--shadow);
}

/* ---- seção, no bloco da lista ---- */
.enc-secao { display: flex; align-items: center; gap: 8px; }
.enc-secao span {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted-2); font-weight: 800;
}
.enc-secao select {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 13px; min-height: 40px;
}

/* ---- aba Temas ---- */
.enc-temas { display: flex; flex-direction: column; gap: 14px; }
.enc-lista-temas {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.enc-tema-item {
  display: flex; gap: 12px; padding: 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}
.enc-tema-item.inativo { opacity: .55; }
.enc-tema-capa {
  width: 84px; height: 84px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
}
.enc-tema-capa img { width: 100%; height: 100%; object-fit: cover; }
.enc-sem-chapa {
  font-size: 10.5px; color: var(--muted-2); text-align: center;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 700; padding: 4px;
}
.enc-tema-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.enc-tema-info b { font-size: 13.5px; overflow-wrap: anywhere; }

.enc-editor-tema { margin-top: 4px; }
.enc-editor-grade {
  display: grid; gap: 16px; margin-top: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .enc-editor-grade { grid-template-columns: minmax(0, 1fr) minmax(320px, 46%); }
}
.enc-rotulo {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted-2); font-weight: 800; margin-bottom: 6px;
}
.enc-json {
  width: 100%; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  line-height: 1.5; resize: vertical;
}
.enc-json:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.enc-ok { color: var(--ink-ok); font-weight: 700; }
/* a legenda dos contornos do editor usa as MESMAS cores do desenho */
.enc-guia-zona { color: #00c8ff; font-weight: 800; }
.enc-guia-evitar { color: #ff5a5a; font-weight: 800; }

@media (max-width: 760px) {
  .enc-abas { margin-left: 0; width: 100%; }
  .enc-aba { flex: 1; min-height: 44px; }
  .enc-secao select { min-height: 44px; }
  .enc-tema-item { flex-direction: column; }
  .enc-tema-capa { width: 100%; height: 120px; }
}

/* ── #056b · a saída da trava, a bandeja e o aviso de recorte ────────────── */
.enc-saida-trava {
  margin-top: 10px; border: 1px solid var(--line); border-left: 3px solid var(--yellow);
  border-radius: 10px; padding: 12px; background: var(--panel-2);
}
.enc-trava-item { margin-bottom: 10px; }
.enc-trava-item:last-of-type { margin-bottom: 0; }
.enc-trava-item p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }

/* a linha para onde o atalho rolou — pisca uma vez e volta ao normal, para a
   pessoa achar o produto no meio de uma lista de 40 */
@keyframes enc-pisca {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0); }
  30%      { box-shadow: 0 0 0 3px rgba(255, 196, 0, .55); }
}
.enc-linha.piscando { animation: enc-pisca 1.5s ease; }

.enc-orfa-capa {
  width: 40px; height: 40px; flex: none; border-radius: 6px; object-fit: cover;
  background: var(--panel); border: 1px solid var(--line-soft);
}
.enc-problema.enc-recorte { color: var(--ink-warn); }

/* #058 — foto pequena demais para o tamanho que o card usa. Mesmo tom do
   aviso de recorte: os dois dizem "olhe este arquivo antes de gerar", e dar
   cores diferentes a avisos de mesmo peso ensina a ignorar os dois. */
.enc-problema.enc-baixa-res { color: var(--ink-warn); }

/* #060 · aviso de versão nova. Barra fina no topo, acima de tudo: ela compete
   com a tela de propósito (a pessoa está vendo dado velho), mas não bloqueia —
   dá para dispensar e continuar. */
.aviso-versao{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:8px 14px;font-size:13px;
  background:var(--panel-2);color:var(--ink);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow);
}
.aviso-versao .btn{min-height:30px;padding:4px 12px;font-size:13px;color:var(--ink)}
@media (max-width:720px){ .aviso-versao{flex-wrap:wrap;font-size:12px} }

/* #060 P2 · tema e formato acima da lista de encarte. Mesmo bloco dos outros
   passos, só sempre visível. "Usando tema padrão" é aviso, não erro — é o
   estado normal de quem ainda não tem arte para a seção. */
.enc-a-tema .enc-form{align-items:end}
.enc-aviso-padrao{color:var(--ink-warn);font-size:12px;align-self:center}

/* #060 fix 2 · seletor de seção do preview (modo Automático) */
.enc-secoes{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.enc-secao-pill{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:6px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;min-height:34px}
.enc-secao-pill.ativa{background:var(--orange);border-color:var(--orange);color:var(--on-accent)}
.enc-secao-pill b{font-variant-numeric:tabular-nums;margin-left:4px;opacity:.8}

/* #060 ajuste 3 · seleção de seções (bloco Tema e formato) */
.enc-secoes-sel{display:flex;flex-wrap:wrap;gap:6px 14px;width:100%;margin-top:6px}
.enc-secao-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);cursor:pointer;min-height:34px}
.enc-secao-check.off{color:var(--muted-2)}
.enc-secao-check input{width:16px;height:16px;accent-color:var(--orange)}
.enc-secao-check b{font-variant-numeric:tabular-nums;color:var(--muted)}
.enc-poucos{font-style:normal;font-size:11px;color:var(--ink-warn)}
/* ajuste 2 · override de colunas/destaques na pill ativa */
.enc-override{display:inline-flex;gap:6px;margin-left:auto}
.enc-override select{font-size:11px;padding:3px 6px;min-height:30px;border-radius:6px;background:var(--panel);color:var(--ink);border:1px solid var(--line)}

/* #060 — reserva SEMPRE o espaço da barra de rolagem. Sem isto, a barra que
   aparece quando o preview cresce estreita o palco em ~15 px, a peça encolhe,
   a barra some, e o preview entra em laço (92 redimensionamentos em 3 s). */
html{scrollbar-gutter:stable}

/* #060 · cabeçalho de seção na conferência */
.enc-conf-secao{display:flex;align-items:baseline;gap:8px;margin:14px 0 4px;padding:6px 2px;
  border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.enc-conf-secao:first-child{margin-top:0}
.enc-conf-secao b{color:var(--ink);font-weight:800}
.enc-conf-secao span{font-variant-numeric:tabular-nums}
.enc-conf-secao em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink-warn);margin-left:auto}

/* #060 · aviso "destaque exige 3+ colunas" */
.enc-aviso-destaque{font-size:12px}

/* #060b · ícone SVG (linguiça) na conferência: mesmo tamanho do emoji */
.enc-ic-svg{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;line-height:1}
.enc-ic-svg svg{width:1em;height:.63em}

/* ═══════════════════════════════════════════════════════════════════════════
   #060b · conferência — trocar foto, seção na linha, fila sem foto,
   correções aprendidas com desfazer, diálogo "aplicar sempre?"
   ═══════════════════════════════════════════════════════════════════════════ */
/* a linha ganha a coluna de SEÇÃO quando a lista foi classificada */
.enc-linha.com-secao {
  grid-template-columns: 56px minmax(0, 1fr) 124px 104px 96px 104px auto;
}
.enc-secao-linha { font-size: 12.5px; }

/* a miniatura vira botão: hover/foco mostram "trocar" */
.enc-foto-trocar {
  position: relative; padding: 0; cursor: pointer; color: var(--ink); font: inherit;
  font-size: 26px;
}
.enc-foto-trocar:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.enc-foto-hover {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 70%);
  opacity: 0; transition: opacity .12s ease;
}
.enc-foto-trocar:hover .enc-foto-hover,
.enc-foto-trocar:focus-visible .enc-foto-hover { opacity: 1; }
.enc-foto-sem { font-size: 9.5px; font-weight: 700; color: var(--muted); line-height: 1.1; text-align: center; }

/* o chip "N sem foto" é um botão de filtro */
.enc-chip-botao { cursor: pointer; font-family: inherit; }
.enc-chip-botao:hover { border-color: var(--orange); color: var(--ink); }
.enc-chip-botao.on { border-color: var(--orange); color: var(--ink-accent); background: var(--panel); }
.enc-fila-vazia { margin: 4px 0 10px; }

/* diálogo e painel: sobre a tela, fundo escurecido */
.enc-dialogo-fundo {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.enc-dialogo {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; width: min(460px, 100%);
  box-shadow: 0 18px 48px rgba(0,0,0,.45); max-height: calc(100vh - 32px); overflow: auto;
}
.enc-dialogo-titulo { margin: 0 0 6px; font-size: 15px; }
.enc-dialogo-pergunta { margin: 0 0 6px; font-weight: 800; font-size: 16px; }
.enc-dialogo-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }

.enc-painel-foto { width: min(820px, 100%); }
.enc-painel-foto-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.enc-painel-escopo { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.enc-painel-escopo label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}
.enc-painel-escopo label.on { border-color: var(--orange); color: var(--ink-accent); }
.enc-painel-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.enc-painel-busca {
  flex: 1 1 240px; min-width: 0; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 13px;
}
.enc-painel-ic { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; margin-right: 4px; }
.enc-painel-ic .enc-ic-svg svg { width: 20px; height: 20px; }
.enc-painel-grade {
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.enc-sugestao {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; font: inherit;
}
.enc-sugestao:hover, .enc-sugestao:focus-visible { border-color: var(--orange); outline: none; }
.enc-sugestao.baixa { border-color: rgba(255,196,0,.45); }
.enc-sugestao-img {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
  background: var(--panel); border-radius: 8px; overflow: hidden;
}
.enc-sugestao-img img { width: 100%; height: 100%; object-fit: contain; }
.enc-sugestao-nome { font-size: 12px; font-weight: 700; line-height: 1.2; }
.enc-sugestao-meta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.enc-sugestao-alerta { font-size: 11px; font-weight: 800; color: var(--ink-warn); }

/* correções aprendidas: recolhida por padrão, abre em lista */
.enc-aprendidas {
  margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
  background: var(--panel-2);
}
.enc-aprendidas summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.enc-aprendidas-n { margin-left: 4px; color: var(--ink-accent); }
.enc-aprendidas-aviso { color: var(--ink-ok); }
.enc-aprendidas-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.enc-aprendida {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto auto; font-size: 13px;
}
.enc-aprendida-chave { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enc-aprendida-para { color: var(--ink); white-space: nowrap; }
.enc-aprendida-quem { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.enc-aprendida-desfazer { padding: 4px 10px; font-size: 12px; }

@media (max-width: 760px) {
  .enc-linha.com-secao {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "foto nome"
      "secao secao"
      "unid preco"
      "valor botoes";
  }
  .enc-secao-linha { grid-area: secao; }
  .enc-aprendida { grid-template-columns: minmax(0, 1fr) auto; }
  .enc-aprendida-desfazer { min-height: 44px; }
  .enc-sugestao, .enc-painel-escopo label { min-height: 44px; }
}

/* #060b — a linha COM seção não cabe numa linha só no bloco da conferência
   (~590 px): o nome do produto era espremido a 0 e SUMIA. A seção desce para
   uma segunda faixa, embaixo do nome; a foto ocupa as duas. */
@media (min-width: 761px) {
  .enc-linha.com-secao {
    grid-template-columns: 56px minmax(0, 1fr) 96px 104px;
    row-gap: 6px;
  }
  .enc-linha.com-secao > .enc-foto { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .enc-linha.com-secao > .enc-nome { grid-column: 2; grid-row: 1; }
  .enc-linha.com-secao > .enc-secao-linha { grid-column: 2; grid-row: 2; padding: 5px 8px; }
  .enc-linha.com-secao > .enc-unidade { grid-column: 3; grid-row: 1; }
  .enc-linha.com-secao > .enc-preco { grid-column: 4; grid-row: 1; }
  .enc-linha.com-secao > .enc-valor { grid-column: 3; grid-row: 2; }
  .enc-linha.com-secao > .enc-botoes { grid-column: 4; grid-row: 2; justify-content: flex-end; }
}

/* #060b — as caixas de seção do bloco "Tema e formato" herdavam a regra de
   `.enc-form label` (coluna, caixa alta, 11 px) e ocupavam uma célula de
   190 px: empilhavam em coluna quando aparecia a dica de "poucos itens".
   O grupo ocupa a largura toda e cada caixa volta a ser uma linha. */
.enc-form .enc-secoes-sel { grid-column: 1 / -1; }
.enc-form .enc-secao-check { flex-direction: row; flex-wrap: wrap; gap: 4px 6px; }
.enc-form .enc-secao-check > span {
  font-size: 13px; text-transform: none; letter-spacing: 0; color: inherit; font-weight: 600;
}
.enc-form .enc-secao-check.off > span { color: var(--muted-2); }

/* #060c 0f — seção DESMARCADA continua listando os itens, esmaecidos */
.col-coluna.desligada { border-style: dashed; }
.col-coluna.desligada .col-linha { opacity: .5; }
.col-coluna.desligada .col-linha:hover,
.col-coluna.desligada .col-linha:focus-within { opacity: .85; }
.col-coluna.desligada .col-secao { opacity: 1; }
.col-mover-todos {
  width: 100%; margin: 4px 0 6px; font: inherit; font-size: 12px;
  background: var(--panel); color: var(--ink); border: 1px dashed var(--line);
  border-radius: 8px; padding: 5px 8px;
}

/* #060c — conferência: seção desmarcada, mover todos, foto da oferta,
   aviso de foto exclusiva e fuso ausente */
.enc-linha.fora { opacity: .5; }
.enc-linha.fora:hover, .enc-linha.fora:focus-within { opacity: .9; }
.enc-mover-todos {
  margin-left: auto; font: inherit; font-size: 12px; background: var(--panel);
  color: var(--ink); border: 1px dashed var(--line); border-radius: 8px; padding: 4px 8px;
}
.enc-oferta-foto {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
}
.enc-aviso-exclusiva, .enc-confirma-exclusiva {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid rgba(255,196,0,.45); border-radius: 10px; padding: 8px 10px; margin: 0 0 10px;
}
.enc-aviso-exclusiva img, .enc-confirma-exclusiva img {
  width: 44px; height: 44px; object-fit: contain; background: var(--panel-2); border-radius: 6px;
}
.enc-confirma-exclusiva p { margin: 0; flex: 1 1 240px; font-size: 13px; }
.enc-confirma-exclusiva .enc-dialogo-acoes { margin-top: 0; }
.enc-fuso-erro { color: var(--ink-warn); font-weight: 700; }
.enc-conf-cab { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.enc-conf-cab:first-child { margin-top: 0; }
.enc-conf-cab > .enc-conf-secao { flex: 1 1 auto; margin: 0; }

/* #060c-0g — juntar ao desmarcar */
.enc-juntados { font-style: normal; font-size: 11px; color: var(--muted); }
.enc-veio-de, .col-veio {
  font-size: 11px; font-weight: 700; color: var(--ink-accent);
}
.enc-veio-de { grid-column: 1 / -1; }
.col-veio { display: block; }
.enc-juntar-origem { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; background: var(--panel-2, rgba(0,0,0,.04)); color: var(--ink); font-weight: 600; }
.enc-juntar-linha { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
.enc-juntar-linha select {
  font: inherit; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px;
}

/* ═══ #060 P4 · editor visual do tema ═══ */
.ed-abas { margin: 6px 0 10px; }
.ed-form { display: flex; flex-direction: column; gap: 10px; }
.ed-form fieldset {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0;
  display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ed-form fieldset:disabled { opacity: .55; }
.ed-form legend { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted-2); padding: 0 4px; }
.ed-campo, .ed-num, .ed-deslizante, .ed-cor { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.ed-campo select, .ed-num input {
  font: inherit; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; min-width: 0;
}
.ed-num input { width: 100%; font-variant-numeric: tabular-nums; }
.ed-num span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ed-deslizante input { width: 100%; accent-color: var(--orange); }
.ed-deslizante b, .ed-cor code { font-variant-numeric: tabular-nums; color: var(--ink); }
.ed-cor { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-cor span { flex: 1 1 120px; }
.ed-cor input[type="color"] { width: 38px; height: 28px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; padding: 1px; cursor: pointer; }
.ed-cor code { font-size: 11.5px; }
.ed-aviso { flex-basis: 100%; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-warn); }
.ed-tabela { grid-column: 1 / -1; width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ed-tabela th { text-align: left; font-weight: 700; color: var(--muted); padding: 3px 4px; }
.ed-tabela td { padding: 3px 4px; }
.ed-form fieldset > .btn, .ed-form fieldset > .enc-dica { grid-column: 1 / -1; justify-self: start; }
.ed-validador { margin-top: 10px; }
.ed-avisos { margin: 6px 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-warn); }
.ed-modos { margin-top: 6px; }
.ed-preview { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); }
.ed-preview .enc-palco { display: flex; justify-content: center; }
.ed-n-itens { max-width: 260px; margin: 4px 0 8px; }
.ed-zonas { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 20; }
.ed-ret {
  position: absolute; pointer-events: auto; cursor: move; touch-action: none; box-sizing: border-box;
  border: 2px dashed var(--orange); background: rgba(255, 122, 0, .06);
}
.ed-ret.evitar { border-color: var(--red); background: rgba(255, 60, 60, .12); }
/* 26/09 — modo blocos: a zona é CALCULADA; só para ver (quem a move são os
   blocos), então sem cursor de arrastar e sem capturar o clique das camadas */
.ed-ret.calculada { cursor: default; pointer-events: none; border-style: dotted; background: rgba(255, 122, 0, .04); }
.ed-modo select { max-width: 100%; }
.ed-campo-check { display: flex; align-items: center; gap: 8px; flex-direction: row; }
.ed-campo-check input { width: auto; margin: 0; }
.ed-ret-rotulo {
  position: absolute; left: 0; top: -18px; font-size: 11px; font-weight: 800; white-space: nowrap;
  background: var(--panel); color: var(--ink); padding: 1px 5px; border-radius: 4px;
}
.ed-alca {
  position: absolute; width: 14px; height: 14px; background: var(--orange); border: 2px solid #fff;
  border-radius: 3px; touch-action: none;
}
.ed-ret.evitar .ed-alca { background: var(--red); }
.ed-alca.no { left: -8px; top: -8px; cursor: nwse-resize; }
.ed-alca.se { right: -8px; bottom: -8px; cursor: nwse-resize; }

/* P4 camadas — a pilha (de cima para baixo), as propriedades, o overlay e o
   pré-voo da arte. A camada selecionada é a única com alças: com todas
   mostrando alça, a data em cima da máscara ficava impossível de pegar. */
/* 25/09 — lista e propriedades lado a lado (a lista cortava "Te…", "Da…") */
.ed-form fieldset.ed-camadas { grid-template-columns: minmax(230px, 1fr) minmax(260px, 1.25fr); align-items: start; }
.ed-camadas-lista { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ed-camadas-props { min-width: 0; border-left: 1px solid var(--line); padding-left: 12px; }
@media (max-width: 1100px) {
  .ed-form fieldset.ed-camadas { grid-template-columns: 1fr; }
  .ed-camadas-props { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
}
.ed-props-vazio { margin: 0; }
.ed-pilha { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-pilha-item { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid transparent; font-size: 12.5px; min-height: 32px; }
.ed-pilha-linha { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; }
.ed-pilha-item.sel { border-color: var(--orange); background: rgba(255, 122, 0, .08); }
.ed-pilha-item.fixo { color: var(--muted); background: var(--panel-2, rgba(127,127,127,.08)); }
.ed-pilha-item.oculta .ed-pilha-nome { opacity: .5; text-decoration: line-through; }
.ed-pilha-nome { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer; padding: 4px 2px; min-height: 28px;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.ed-pilha-acoes { display: flex; gap: 2px; margin-left: 34px; }
.ed-inserir { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 8px; }
.ed-props { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; display: flex;
  flex-direction: column; gap: 6px; }
.ed-props-caixa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ed-campo-num > span { font-size: 11px; color: var(--muted); font-weight: 700; }
.ed-props-img { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-props-mini { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px;
  background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.ed-ret.camada { border: 1px dashed rgba(80, 160, 255, .85); background: transparent; }
.ed-ret.camada.sel { border: 3px solid #3b8bff; background: rgba(59, 139, 255, .1);
  box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(59, 139, 255, .75); animation: ed-realce 1.4s ease-out 1; }
@keyframes ed-realce { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(59, 139, 255, .55); }
  100% { box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(59, 139, 255, .75); } }
@media (prefers-reduced-motion: reduce) { .ed-ret.camada.sel { animation: none; } }
.ed-ret.camada.oculta { border-style: dotted; opacity: .45; }
.ed-ret.camada .ed-alca { background: #3b8bff; }
.ed-prevoo { border: 1px solid var(--ink-warn); border-radius: 10px; padding: 10px 12px; margin: 10px 0;
  background: rgba(255, 170, 0, .07); font-size: 13px; }
.ed-prevoo ul { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.ed-prevoo li.resolvido { opacity: .7; }
.ed-prevoo .enc-acoes { margin-top: 6px; }
.ed-prevoo-tipo { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; padding: 1px 6px; border-radius: 4px; background: var(--ink-warn); color: #111; }
.enc-ajustes-peca { margin: 6px 0 10px; }
.enc-ajustes-peca .ed-pilha { margin-top: 6px; }
.enc-ajuste-texto { flex: 1 1 200px; min-width: 0; }

/* #065 · validade da oferta, formatos (caixas), abas de formato do preview.
   Mesmo desenho das caixas de seção (#060 ajuste 3): as caixas herdariam a
   regra de `.enc-form label` (coluna, caixa alta) e empilhariam. */
.enc-form .enc-validade { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
.enc-form .enc-validade > label { min-width: 150px; }
.enc-validade.falta input[type="date"] { border-color: var(--ink-warn); }
.enc-validade-falta { font-style: normal; color: var(--ink-warn); font-weight: 700; align-self: center; }
.enc-form .enc-formatos-sel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.enc-rotulo-mini { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; color: var(--muted-2); }
.enc-form .enc-formato-check { flex-direction: row; align-items: center; gap: 6px; min-height: 34px; cursor: pointer; }
.enc-form .enc-formato-check > span { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; }
.enc-form .enc-formato-check > small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.enc-form .enc-formato-check.off > span { color: var(--muted-2); font-weight: 600; }
.enc-formato-check input { width: 16px; height: 16px; accent-color: var(--orange); }
.enc-formatos-local { font-style: normal; font-size: 11px; color: var(--muted); }
.enc-data-fixa { grid-column: 1 / -1; }
.enc-formatos-abas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; }
.enc-formato-aba { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 8px;
  padding: 6px 14px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; min-height: 34px; }
.enc-formato-aba.ativa { background: var(--ink); border-color: var(--ink); color: var(--bg, #fff); }
.enc-variante.teste { color: var(--ink-warn); font-weight: 700; }
.enc-aviso-teste { margin: 0 0 8px; }
.enc-conta { align-self: center; }
.enc-baixar-tudo { margin: 4px 0 8px; }
/* #065 item 7 · histórico de ofertas */
.enc-ofertas-lista { display: flex; flex-direction: column; gap: 10px; }
.enc-oferta { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.enc-oferta-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.enc-oferta-cab > .enc-acoes { margin-left: auto; }
.enc-oferta-pecas { margin-top: 10px; }
/* #065 item 2 · aba Temas: um cartão por tema, uma casa por formato */
.enc-tema-grupo { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); grid-column: 1 / -1; }
.enc-tema-grupo-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.enc-tema-variantes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.enc-tema-item.vazio { border-style: dashed; opacity: .85; }
.enc-subir-chapa { position: relative; overflow: hidden; }
.enc-subir-chapa input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ed-formatos { margin: 8px 0 4px; align-items: center; }
.ed-formatos .enc-aba.sem-variante { border-style: dashed; color: var(--muted); }

/* hotfix 24/09 · catálogo — trocar foto (arrastar, colar, arquivo) */
.cat-painel-foto { position: relative; }
.cat-painel-foto.sobre { outline: 2px dashed var(--orange); outline-offset: -4px; }
.cat-painel-foto.trocando img { opacity: .45; }
.cat-troca-dica {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font-size: 11px; color: var(--muted); background: var(--panel); padding: 2px 8px;
  border-radius: 999px; white-space: nowrap; pointer-events: none;
}
.cat-troca { align-items: center; margin: 8px 0; }
.cat-troca-nota { font-size: 12px; }

/* bug #059 (24/09) · arquivo sumido e confirmação dupla do apagar */
.cat-arquivo-sumiu { font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--ink-warn); padding: 4px; }
.cat-confirma-apagar {
  border: 1px solid var(--red); border-radius: 10px; padding: 10px 12px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 8px; font-size: 13px;
}
.cat-confirma-apagar p { margin: 0; }
.cat-confirma-apagar input {
  font: inherit; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px;
}

/* hotfix 24/09 · rascunho do gerador */
.enc-rascunho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px;
  padding: 10px 12px; border: 1px solid var(--orange); border-radius: 10px; background: rgba(255, 122, 0, .08);
  font-size: 13.5px; }
.enc-rascunho > span { flex: 1 1 240px; }
.enc-rascunho-salvo { margin: 0 0 6px; }

/* ══ #090 · Clientes: saúde ao vivo, novo cliente, arquivar, implantação ═══
   Só tokens que já existem. Todo <button> novo declara `color` (o <button>
   não herda — tests/test_contraste.py). Cor só onde há veredito: a pill de
   saúde e as marcas de check/etapa; o resto é neutro.
   ───────────────────────────────────────────────────────────────────────── */
.motivo-linha { font-size: 11px; color: var(--muted); margin-top: 3px; max-width: 260px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fonte-muda   { color: var(--ink-err); font-size: 11.5px; }
.fonte-atraso { color: var(--ink-warn); font-size: 11.5px; }
.selo-arquivado { margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--muted);
                  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
table.densa tbody tr.arquivado td { opacity: .6; }
table.densa tbody tr.sem-clique { cursor: default; }
.alternar-arquivados { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.vazio-convite { border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); }

/* A tabela é a leitura no desktop; no celular vira cartão (uma decisão por
   cartão, sem rolagem lateral). Os dois existem no DOM; o CSS escolhe. */
/* 1100 px, e não 760: no staging o conteúdo mora num .area-central em coluna
   flex, e a tabela de 9 colunas empurrava a página a 1.400 px num tablet de
   820 (aceite de 24/09). Mesmo corte da #071 e da #081. */
.wrap.clientes { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.so-estreito { display: none; }
@media (max-width: 1100px) {
  .so-largo { display: none; }
  .so-estreito { display: grid; }
}
@media (max-width: 760px) {
  .regua .busca { min-width: 0; flex: 1 1 100%; }
}
.sub-linha { display: block; font-size: 11px; }
.lucro-celula { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.carteira-cartao-numeros .lucro-celula { display: inline-flex; flex-direction: row; align-items: baseline; gap: 6px; }
.lucro-negativo { color: var(--ink-err); }
.selo-provisorio {
  font-size: 10.5px; font-weight: 700; color: var(--ink-warn);
  border: 1px solid rgba(255,196,0,.4); border-radius: 999px; padding: 0 7px; cursor: help;
}
.carteira-cartoes { list-style: none; margin: 0; padding: 0; gap: 8px; }
.carteira-cartao {
  display: grid; gap: 4px; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; min-height: 44px; cursor: pointer;
}
.carteira-cartao:hover, .carteira-cartao:focus-visible { border-color: var(--ink-accent); }
.carteira-cartao.arquivado { opacity: .6; }
.carteira-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carteira-cartao .motivo-linha { max-width: 100%; white-space: normal; }
.carteira-cartao-numeros { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }

/* ── formulário (novo cliente, arquivar) ─────────────────────────────────── */
.form-cliente { width: min(680px, 100%); }
.grade-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 8px 0 4px; }
.grade-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.grade-form label.largo { grid-column: 1 / -1; }
.grade-form input, .grade-form select, .grade-form textarea {
  font: inherit; font-size: 13px; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 36px;
}
.grade-form input.invalido { border-color: var(--red); }
.grade-form .dica { font-size: 11px; color: var(--muted); line-height: 1.4; }
@media (max-width: 560px) { .grade-form { grid-template-columns: 1fr; } }
.btn.perigo-contorno { color: var(--ink-err); border-color: rgba(255,90,90,.35); background: transparent; }
.btn.perigo-contorno:hover { border-color: var(--red); color: var(--ink-err); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.dependencias { display: grid; gap: 10px; margin: 6px 0 12px; max-height: 38vh; overflow: auto;
                border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel-2); }
.dep-grupo ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); }
.dep-titulo { font-size: 12px; font-weight: 700; color: var(--ink); }

.faixa-arquivado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--muted-2); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; color: var(--ink); background: var(--panel);
}

/* ── ficha: abas, saúde, checklist clicável ──────────────────────────────── */
.abas-ficha { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.aba-ficha {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); background: none;
  border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; min-height: 40px; cursor: pointer;
}
.aba-ficha:hover { color: var(--ink); }
.aba-ficha.ativa { color: var(--ink); border-bottom-color: var(--ink-accent); }

.saude-componentes { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.saude-comp { display: grid; grid-template-columns: 16px 130px 1fr; gap: 8px; align-items: baseline; font-size: 13px; }
.saude-nome { color: var(--muted); font-size: 12px; }
.saude-texto { color: var(--ink); word-break: break-word; }
.saude-ok .check-marca       { color: var(--ink-ok); }
.saude-atencao .check-marca  { color: var(--ink-warn); }
.saude-critico .check-marca  { color: var(--ink-err); }
.saude-sem_dado .check-marca { color: var(--muted); }
@media (max-width: 560px) { .saude-comp { grid-template-columns: 16px 1fr; } .saude-texto { grid-column: 2; } }

.check-botao {
  width: 100%; font: inherit; color: var(--ink); background: none; text-align: left;
  border: 1px solid transparent; border-radius: 8px; padding: 3px 6px; margin: 0 -6px; cursor: pointer;
}
.check-botao:hover, .check-botao:focus-visible { border-color: var(--line); background: var(--tag-bg); }

/* ── aba Implantação ─────────────────────────────────────────────────────── */
.implantacao { display: grid; gap: 14px; }
.falta-bloco { color: var(--ink-accent); font-size: 12.5px; font-weight: 600; margin: 6px 0; }
.ok-inline { color: var(--ink-ok); }
.fontes-implantacao { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.fonte-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.fonte-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fonte-evento { font-size: 12.5px; color: var(--ink); margin-top: 6px; }
.fonte-evento code { font-size: 11.5px; }
.fonte-teste { margin-top: 8px; }
.etapas-teste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink); }

.esqueleto-lista { display: grid; gap: 8px; margin: 8px 0 12px; }
.esqueleto-linha { height: 44px; border-radius: 8px; background: var(--tag-bg); }
/* Ganchos antigos que só as fixtures REAIS exercitaram (#090): o status de
   execução em "O que está rodando" nunca tinha linha nas fixtures à mão. */
.clientes-lista { display: block; }
.st-ok, .st-success { color: var(--ink-ok); }
.st-error, .st-erro, .st-falhou { color: var(--ink-err); }
.st-running, .st-rodando, .st-waiting { color: var(--ink-warn); }
.snippet { font-size: 11px; white-space: pre-wrap; word-break: break-all; background: var(--panel-2);
           border: 1px solid var(--line); border-radius: 8px; padding: 8px; max-height: 220px; overflow: auto; }
/* P5 · seções do cliente (aba Temas) */
.enc-secoes-cliente { margin: 8px 0 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
  background: var(--panel); }
.enc-secoes-cliente > summary { cursor: pointer; font-weight: 800; font-size: 13px; min-height: 32px;
  display: flex; align-items: center; }
.enc-secoes-lista { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.enc-secao-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.enc-secao-linha > input:not([type="color"]) { flex: 1 1 160px; min-width: 0; }
.enc-secao-linha input[type="color"] { width: 34px; height: 28px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; padding: 1px; }
.enc-secao-linha.inativa > input { opacity: .55; }
.enc-secao-linha .enc-erro { flex-basis: 100%; margin: 0; }
.enc-secao-cor { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.enc-nova-secao { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin: 8px 0;
  padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.enc-nova-secao .enc-acoes { flex-basis: 100%; }
/* #090 — a 1440 px a tabela tem ~1.160 px úteis: motivo e linha do slug têm teto,
   o texto inteiro fica no hover (o motivo principal continua lido na linha). */
.clientes-lista table.densa .motivo-linha { max-width: 150px; }
/* folga para a fonte da web: o render de prova mede com outra, e o app real
   passou 9 px (25/09). Nome e slug com reticências; o inteiro fica no hover. */
.clientes-lista table.densa .nome-cliente { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.clientes-lista table.densa th, .clientes-lista table.densa td { padding-left: 10px; padding-right: 10px; }
.clientes-lista table.densa .slug { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }


/* ── #090 (adendo 5) · ícone de marca por conexão ──────────────────────────
   Cor = estado lido da vw_ingestao_saude. O ícone é monocromático
   (currentColor): a única cor é a do estado. Tracejado = não se aplica.  */
.fontes-icones { display: inline-flex; flex-wrap: nowrap; gap: 2px; justify-content: flex-end; vertical-align: middle; }
.conexao-icone {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 22px; height: 22px; padding: 0; border-radius: 50%; flex: none;
  border: 2px solid var(--line); background: var(--panel); color: var(--muted);
  font: inherit; cursor: pointer;
}
.fontes-icones.compacto .conexao-icone { width: 26px; height: 26px; }
.conexao-icone:hover, .conexao-icone:focus-visible { box-shadow: 0 0 0 2px var(--tag-bg); }
.conexao-icone.estado-ok       { color: var(--ink-ok);   border-color: var(--green); }
.conexao-icone.estado-atraso   { color: var(--ink-warn); border-color: var(--yellow); }
.conexao-icone.estado-mudo     { color: var(--ink-err);  border-color: var(--red); }
.conexao-icone.estado-nunca    { color: var(--muted);    border-color: var(--line); background: var(--tag-bg); }
.conexao-icone.estado-sem_dado { color: var(--muted);    border-color: var(--muted-2); background: var(--tag-bg); }
.conexao-icone.estado-sem_dado::after {
  content: "?"; position: absolute; right: -4px; top: -5px; font-size: 9px; font-weight: 800;
  color: var(--muted); background: var(--panel); border-radius: 50%; line-height: 1; padding: 1px 2px;
}
.conexao-icone.estado-na       { color: var(--muted-2);  border-style: dashed; border-color: var(--muted-2); opacity: .75; }
.conexao-icone.mini { width: 10px; height: 10px; border-width: 2px; cursor: default; }
.marca-svg { display: block; }
.marca-mono { font-size: 8.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.marca-mono.longo { font-size: 7px; }
.celula-fontes { text-align: right; }
.saude-conexoes { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.conexoes-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.conexao-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); scroll-margin: 80px; }
.conexao-card.destaque { border-color: var(--ink-accent); box-shadow: 0 0 0 1px var(--ink-accent); }
.conexao-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conexao-fontes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.conexao-fontes .fonte-item { background: var(--panel-2); }

/* 25/09 · tamanho das letras (slider + campo + automático) */
.ed-tamanhos { grid-template-columns: 1fr; }
.ed-tamanho { display: grid; grid-template-columns: minmax(120px, 170px) minmax(80px, 1fr) 72px auto auto;
  align-items: center; gap: 4px 8px; font-size: 13px; }
.ed-tamanho-rotulo { font-weight: 700; }
.ed-tamanho input[type="range"] { width: 100%; accent-color: var(--orange); }
.ed-tamanho input[type="number"] { width: 72px; font-variant-numeric: tabular-nums; }
.ed-tamanho-px { color: var(--muted); }
.ed-tamanho.auto input[type="range"] { opacity: .55; }
.ed-tamanho-auto { font-style: normal; font-size: 11.5px; color: var(--muted); }
.ed-tamanho-nota { grid-column: 1 / -1; margin: 0; }
@media (max-width: 700px) { .ed-tamanho { grid-template-columns: 1fr 72px auto; }
  .ed-tamanho input[type="range"] { grid-column: 1 / -1; grid-row: 2; } }
.ed-avisos-tamanho { color: var(--ink-warn); }
.ed-avisos-tamanho b { color: var(--ink); }

/* #129 — esperada sem cano: cinza e tracejada de leve, para não parecer quebrada */
.conexao-icone.sem-cano { opacity: .55; border-style: dotted; }
.celula-risco .upsell { color: var(--ok, #2e7d32); font-size: .8em; }
.risco-motivos { margin: .25rem 0 .5rem 1.1rem; padding: 0; }
/* ── #156 · KPIs e CMV Mestre do cliente ─────────────────────────────────── */
.kpis-tela .periodo-barra { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 8px 0 14px; }
.kpis-cliente.kpis-5 { grid-template-columns: repeat(5, 1fr); }
.kpi-barras { display: flex; align-items: flex-end; gap: 4px; height: 140px; margin: 16px 0; padding: 8px; background: var(--panel-2); border-radius: 10px; overflow-x: auto; }
.kpi-barra { flex: 1 0 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.kpi-barra-v { width: 100%; background: #FF6A00; border-radius: 3px 3px 0 0; min-height: 2px; }
.kpi-barra-v.divergente { background: var(--ink-err); }
.kpi-barra span { font-size: 10px; color: var(--muted); margin-top: 3px; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.filtros-linha .busca { background: var(--panel-2); color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.tabela-kpis { min-width: 900px; }
.tabela-kpis tr.e-divergente td { background: rgba(255, 80, 80, .06); }
@media (max-width: 1100px) { .kpis-cliente.kpis-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .kpis-cliente.kpis-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .kpis-cliente.kpis-5 { grid-template-columns: 1fr; } }
/* #120 · abas da tela Clientes, Grafo do cliente e Matriz de cobertura */
.abas-tela { display: flex; gap: 6px; margin: 4px 0 14px; }
.abas-tela button { background: none; border: 1px solid var(--line, #333); color: inherit;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; font: inherit; }
.abas-tela button.ativa { border-color: var(--accent, #FF6A00); color: var(--accent, #FF6A00); }
.grafo-svg { background: var(--card, #111114); border: 1px solid var(--line, #333); border-radius: 10px; }
.grafo-camada { font-size: 12px; font-weight: 700; fill: var(--muted, #999); text-transform: uppercase; }
.grafo-rotulo { font-size: 12px; fill: var(--text, #eee); }
.grafo-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin-bottom: 8px; }
.grafo-legenda i { display: inline-block; width: 10px; height: 10px; border: 2px solid; border-radius: 3px; margin-right: 4px; }
.grafo-detalhe { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line, #333); border-radius: 8px; }
.grafo-edicao form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.grafo-edicao input, .grafo-edicao select { font: inherit; padding: 4px 6px; }
.matriz td.cel-ok { color: var(--ok, #22c55e); text-align: center; }
.matriz td.cel-falta { color: var(--err, #ef4444); text-align: center; }
.matriz td.cel-na { color: var(--muted, #777); text-align: center; }
.matriz tbody tr { cursor: pointer; }

/* ── ficha como hub (#161) ────────────────────────────────────────────────
   Oito sub-abas: a barra (#090) passa a rolar na horizontal no celular em
   vez de quebrar em três linhas. Cor de marca só no selo do atalho: é o símbolo da
   plataforma sem desenhar o logotipo de outra empresa.                      */
.abas-ficha { overflow-x: auto; scrollbar-width: thin; }
.abas-ficha .aba-ficha { white-space: nowrap; }
.acao-pratica { margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--ink-accent);
  background: var(--panel-2); border-radius: 6px; font-size: 13px; word-break: break-word; }
.atalho-icone .marca .marca-svg { margin-right: 3px; vertical-align: -1px; }
.hub-aba { display: grid; gap: 18px; background: var(--bg, transparent); }
.hub-aba .ficha-secao { min-width: 0; }
.filtro-hub { width: 100%; max-width: 280px; margin: 8px 0; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 12px; }
.hub-aba th { cursor: pointer; user-select: none; white-space: nowrap; }
.seletor-periodo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.seletor-periodo .chip { cursor: pointer; background: var(--panel); }
.seletor-periodo .chip.ativo { color: var(--ink-accent); border-color: var(--ink-accent); }
.kpis-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpis-hub > div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.kpis-hub b { font-size: 20px; }
.pill-st { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.pill-st.ok { color: var(--ink-ok); } .pill-st.warn { color: var(--ink-warn); }
.pill-st.err { color: var(--ink-err); } .pill-st.neutro { color: var(--muted); }
.acoes-praticas { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; }
.marca-plat { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; color: #fff; }
.marca-plat.meta, .atalho-icone .marca.m-meta_ads, .atalho-icone .marca.m-meta_bm,
.atalho-icone .marca.m-meta_pixel { background: #0866FF; color: #fff; }
.marca-plat.google, .atalho-icone .marca.m-gbp { background: #1A73E8; color: #fff; }
.atalho-icone .marca.m-ghl { background: #188BF6; color: #fff; }
.atalho-icone .marca.m-drive { background: #1E8E3E; color: #fff; }
.atalho-icone .marca.m-clickup { background: #7B68EE; color: #fff; }
.atalho-icone .marca.m-instagram { background: #C13584; color: #fff; }
.atalho-icone .marca.m-n8n { background: #EA4B71; color: #fff; }
.atalho-icone.apagado .marca { background: var(--tag-bg); color: var(--muted); }
@media (max-width: 900px) { .kpis-hub { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kpis-hub { grid-template-columns: 1fr; } .filtro-hub { max-width: none; } }


/* ── #121 · Lucro diário do cliente ─────────────────────────────────────── */
.tela-lucro .card { margin: 14px 0; }
.selo { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 8px;
        border: 1px solid var(--line); color: var(--muted); margin-left: 4px; }
.selo-real { color: var(--ink-ok); border-color: var(--ink-ok); }
.selo-misto { color: var(--ink-warn); border-color: var(--ink-warn); }
.selo-estimado { color: var(--ink-info); border-color: var(--ink-info); }
.lucro-canais td, .lucro-canais th { text-align: right; white-space: nowrap; }
.lucro-canais td:first-child { text-align: left; }
.lucro-canais tr.total td { font-weight: 700; border-top: 1px solid var(--line); }
.tela-lucro .desce { color: var(--ink-err); }
.grafico-lucro { width: 100%; height: 160px; }
.grafico-lucro .eixo { stroke: var(--line); }
.barra-sobe { fill: var(--ink-ok); background: var(--ink-ok); }
.barra-desce { fill: var(--ink-err); background: var(--ink-err); }
.cascata-linha { display: grid; grid-template-columns: 170px 1fr 150px; gap: 10px;
                 align-items: center; padding: 3px 0; }
.cascata-linha.total { font-weight: 700; border-top: 1px solid var(--line); }
.cascata-barra { height: 10px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.cascata-barra > span { display: block; height: 100%; }
.cascata-valor { text-align: right; }
.premissas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                   gap: 10px; margin: 10px 0; }
.premissa { display: flex; flex-direction: column; gap: 4px; }
.premissa input, .premissa select { padding: 6px; background: var(--panel); color: var(--ink);
                                    border: 1px solid var(--line); border-radius: 6px; }
@media (max-width: 640px) { .cascata-linha { grid-template-columns: 110px 1fr 110px; } }

/* #103 · Cockpit de Performance ─────────────────────────────────────────── */
.perf-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.perf-topo h2 { margin: 0; font-size: 18px; }
.perf-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 10px 0 16px; }
.perf-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.perf-card.estado-sem_dado, .perf-card.estado-sem_atribuicao, .perf-card.estado-sem_cambio { border-style: dashed; }
.perf-card-rotulo { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.perf-card-valor { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.perf-sem { font-size: 14px; font-weight: 600; color: var(--muted); }
.perf-card-delta { font-size: 11.5px; color: var(--muted); }
.perf-card-origem { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.perf-card-motivo { font-size: 11.5px; color: var(--ink-warn); }
.perf-aviso { font-size: 12.5px; border: 1px solid var(--line); border-left: 3px solid var(--ink-warn); border-radius: var(--radius); padding: 8px 10px; margin: 6px 0; background: var(--panel); }
.perf-aviso.erro { border-left-color: var(--ink-err); }
.perf-tabela-wrap { overflow-x: auto; }
.perf-tabela { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.perf-tabela th, .perf-tabela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.perf-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.perf-tabela th button { font: inherit; font-weight: 700; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0; }
.perf-funil { margin: 6px 0 14px; padding-left: 20px; }
.perf-funil-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.perf-funil-taxa { color: var(--muted); font-size: 12px; }
.perf-metodologia { margin-top: 18px; font-size: 12.5px; }
.perf-metodologia dt { font-weight: 700; margin-top: 8px; }
.perf-metodologia dd { margin: 2px 0 0; color: var(--muted); }
.perf-periodo select { font: inherit; }
/* #177 · Completar cadastro */
.completar-cadastro { display: flex; flex-direction: column; gap: 10px; }
.completar-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.completar-acoes .campo-input { min-width: 180px; flex: 1 1 180px; }
.completar-fontes, .completar-extras { margin: 0; padding-left: 18px; font-size: 13px; }
.completar-fontes .fonte-erro { color: var(--err, #e5484d); }
.completar-fontes .fonte-sem_config { opacity: .75; }
.completar-cadastro .tabela { width: 100%; overflow-x: auto; display: block; }