@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Public+Sans:wght@400;500;600;700&display=swap');

/* Visual escolhido por Willian em 29/09/2026 (substitui "Papel" e "Selo de Cobre" de 23/09):
   cor oficial Índigo com dourado discreto — em 30/09/2026, a pedido dele ("muito roxo e lilás"), o índigo foi
   puxado para o azul, os tons lilás viraram neutros (bege no claro, grafite no escuro) e cada área ganhou cor própria, fundo claro em tom de papel. A chave sol/lua troca claro/escuro (inclusive as faixas .faixa-destaque do painel, desde 30/09);
   só o login (.sempre-escuro) fica escuro nos dois modos. */
:root {
  --bg: #f2f0e9;
  --surface: #fffdf9;
  --side-bg: #f7f5ef;
  --surface-2: #f4f1e9;
  --ink: #1d2127;
  --ink-soft: #5c6068;
  --ink-faint: #a29d91;
  --line: #e5e0d3;
  --accent: #3552c8;
  --accent-2: #4f78e0;
  --accent-contrast: #ffffff;
  --side-active-bg: #ece7dc;
  --glow: rgba(53, 82, 200, 0.12);
  --ouro: #a8822f;
  --brass: #a8822f;
  --brass-bg: rgba(168, 130, 47, 0.13);
  --warn: #c8363a;
  --warn-bg: rgba(200, 54, 58, 0.09);
  --shadow: 0 12px 28px rgba(45, 38, 25, 0.12);
  --lift: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 26px -20px rgba(45, 38, 25, 0.22);
  /* Gráficos (Relatórios e BI): paleta categórica validada p/ daltonismo, sequencial e status */
  /* Gráficos: cada cor tem um significado fixo em todo o CRM (o índigo fica só na marca: menu, botões, links).
     1 azul = volumes (processos, leads, contatos) · 2 laranja = contratos · 3 verde-água = qualificados/concluídas
     4 dourado = investimento e custos · 5 rosa · 6 verde · 7 azul-petróleo · 8 coral = alerta */
  --serie-1: #2f74d0; --serie-2: #e8743b; --serie-3: #17a589; --serie-4: #c9971c;
  --serie-5: #d9668f; --serie-6: #2e9b4f; --serie-7: #2b6f8e; --serie-8: #e0584f;
  --cor-receita: #1f9d63; --cor-despesa: #e0584f;
  --seq-150: #cfe8ee; --seq-250: #a3d3de; --seq-350: #6fb7c9; --seq-450: #3f97b0; --seq-550: #2b7892; --seq-650: #1d5a70;
  --status-good: #0ca30c; --status-warning: #fab219; --status-critical: #d03b3b;
  --texto-apagado: #a29d91;
  color-scheme: light;
}
html[data-app-theme="dark"], .sempre-escuro {
  --bg: #0f1216;
  --surface: #161a20;
  --side-bg: #12151a;
  --surface-2: #1d2229;
  --ink: #eceef2;
  --ink-soft: #a3a9b4;
  --ink-faint: #6b727e;
  --line: #2a3039;
  --accent: #7d9bff;
  --accent-2: #a9bdff;
  --accent-contrast: #0f1216;
  --side-active-bg: #232933;
  --glow: rgba(125, 155, 255, 0.22);
  --ouro: #d9b76e;
  --brass: #d9b76e;
  --brass-bg: rgba(217, 183, 110, 0.15);
  --warn: #ff6b72;
  --warn-bg: rgba(255, 107, 114, 0.15);
  --shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.75);
  --lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 26px -20px rgba(0, 0, 0, 0.7);
  --serie-1: #5b9cf0; --serie-2: #f08a5d; --serie-3: #3cc7a8; --serie-4: #d9b76e;
  --serie-5: #e882ab; --serie-6: #4cb85a; --serie-7: #4fa3c7; --serie-8: #ff6b72;
  --cor-receita: #3cc787; --cor-despesa: #ff7a72;
  --seq-150: #173b47; --seq-250: #1f5263; --seq-350: #2a6d82; --seq-450: #3b8ea6; --seq-550: #62b1c7; --seq-650: #9fd3e1;
  --texto-apagado: #6b727e;
  color-scheme: dark;
}
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
}

.app {
  display: grid;
  grid-template-columns: 208px 1fr;
  min-height: 100vh;
}

.side {
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-right: 1px solid var(--line);
  background: var(--side-bg);
}
.side .brand { display: flex; align-items: center; gap: 10px; margin: 2px 6px 20px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%; flex: none; position: relative;
  background: conic-gradient(from 220deg, var(--accent), var(--accent-2), var(--accent));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px var(--glow);
}
.brand-mark span {
  width: 26px; height: 26px; border-radius: 50%; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Newsreader', serif; font-weight: 600; font-size: 11px; color: var(--accent-2); letter-spacing: 0.02em;
}
.brand-mark.pequeno { width: 30px; height: 30px; }
.brand-mark.pequeno span { width: 22px; height: 22px; font-size: 9.5px; }
.side .brand .txt { font-family: 'Newsreader', serif; font-size: 15.5px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.side .brand .txt small { display: block; font-family: 'Public Sans', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 2px; }
.side a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 13.3px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
}
.side a svg { flex: none; opacity: 0.85; }
.side a.active {
  color: var(--accent);
  background: var(--side-active-bg);
  font-weight: 600;
}
.side .divider { height: 1px; background: var(--line); margin: 10px 6px; }

.main { padding: 16px 22px 40px; overflow-x: hidden; }

.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.search {
  flex: 1; max-width: 320px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
}
.topbar .spacer { flex: 1; }

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  cursor: pointer;
}
.icon-btn:hover { color: var(--ink); }

.theme-switch {
  position: relative;
  width: 52px; height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0; flex: none; cursor: pointer;
  touch-action: none; user-select: none;
}
.theme-switch .ts-icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--ink-faint); pointer-events: none;
}
.theme-switch .ts-sun { left: 6px; }
.theme-switch .ts-moon { right: 6px; }
.theme-switch .ts-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center;
  transition: left 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.theme-switch.dragging .ts-thumb { transition: none; }

.add-wrap { position: relative; }
.add-btn {
  background: var(--accent); color: var(--accent-contrast);
  border: none; padding: 8px 15px; border-radius: 8px;
  font-weight: 700; font-size: 13.3px; font-family: 'Public Sans', sans-serif;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 18px var(--glow);
}
.add-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); width: 196px; padding: 6px; z-index: 6;
}
.add-menu div { padding: 8px 10px; font-size: 13px; color: var(--ink); border-radius: 6px; cursor: pointer; }
.add-menu div:hover { background: var(--side-active-bg); }

.greet { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.greet strong { color: var(--ink); }

.hero {
  padding: 24px 26px; border-radius: 14px; margin-bottom: 18px; position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); box-shadow: var(--lift);
}
.hero::after {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 260px; height: 260px;
  background: radial-gradient(circle, var(--glow), transparent 70%); pointer-events: none;
}
.hero .eyebrow { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 6px; position: relative; }
.hero h2 { font-family: 'Newsreader', serif; font-size: 25px; font-weight: 500; margin: 0; color: var(--ink); position: relative; }
.hero h2 .nome { font-weight: 600; background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; max-width: 720px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 15px 16px; box-shadow: var(--lift); }
.metric .label { font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.metric .value { font-family: 'Newsreader', serif; font-size: 27px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 15px 16px; box-shadow: var(--lift); }
.panel h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }

.tasks-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.btn-primary {
  background: var(--accent); color: var(--accent-contrast);
  border: none; padding: 8px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600; font-family: 'Public Sans', sans-serif; cursor: pointer;
}
.btn-ghost {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 7px 11px; border-radius: 6px; font-size: 12.5px; font-family: 'Public Sans', sans-serif;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.tasks-toolbar .spacer { flex: 1; }

table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th {
  text-align: left; font-size: 11.3px; font-weight: 600; color: var(--ink-soft);
  padding: 0 8px 8px 0; border-bottom: 1px solid var(--line);
}
table.list td { padding: 11px 8px 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
table.list tbody tr:last-child td { border-bottom: none; }
table.list tbody tr { cursor: pointer; }
table.list tbody tr:hover td { background: var(--side-active-bg); }
.tag {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--side-active-bg); border-radius: 4px; padding: 2px 7px;
}
.empty-state { color: var(--ink-faint); font-size: 13px; padding: 24px 0; text-align: center; }

.linha-detalhe td { background: var(--bg); font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.check-lida { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
tr.lida td { color: var(--ink-faint); }

.due { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; display: inline-block; }
.due.late { color: var(--warn); background: var(--warn-bg); }
.due.soon { color: var(--brass); background: var(--brass-bg); }
.due.ok { color: var(--ink-soft); background: var(--side-active-bg); }
.check-concluido { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
tr.concluido td { color: var(--ink-faint); text-decoration: line-through; }

/* ---------- Gestão Kanban ---------- */
.fase-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.fase-tabs span {
  flex: none; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 12px 10px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.fase-tabs span.active { color: var(--ink); border-bottom-color: var(--accent); }

.kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kanban-col { flex: none; width: 240px; background: var(--side-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.kcol-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; padding: 0 2px; gap: 6px; }
.kcol-head .kcol-nome { flex: 1; cursor: text; }
.kcol-head .kcol-nome input { width: 100%; font: inherit; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; }
.kcount { background: var(--side-active-bg); color: var(--ink-soft); border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.kcol-del { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 2px; }
.kcol-del:hover { color: var(--warn); }
.kcol-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kcol-body.drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 6px; }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; cursor: grab; font-size: 12.5px; box-shadow: var(--lift); }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: 0.45; }
.kc-title { font-weight: 700; color: var(--ink); }
.kc-sub { color: var(--ink-soft); margin-top: 1px; }
.kc-proc { color: var(--ink-faint); font-size: 11px; font-variant-numeric: tabular-nums; margin: 6px 0; }
.kc-risk { font-size: 11.5px; font-weight: 600; margin-bottom: 4px; }
.kc-risk.risco-provavel { color: var(--accent); }
.kc-risk.risco-possivel { color: var(--brass); }
.kc-risk.risco-remota { color: var(--warn); }
.add-coluna-btn { flex: none; width: 200px; background: none; border: 1px dashed var(--line); border-radius: 8px; color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 10px; cursor: pointer; align-self: flex-start; }

/* ---------- Financeiro ---------- */
.fin-grid { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: start; margin-bottom: 14px; }
.fin-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.metric .value.negativo { color: var(--warn); }
.fin-metrics .metric .delta { font-size: 11px; color: var(--ink-faint); margin-top: 4px; }
.btn-receita { background: var(--accent); color: var(--accent-contrast); border: none; padding: 9px 14px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-despesa { background: var(--warn); color: #fff; border: none; padding: 9px 12px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-transferencia { background: none; border: 1px solid var(--line); color: var(--ink-soft); padding: 9px 12px; border-radius: 6px; cursor: pointer; }
.fin-acoes { display: flex; gap: 8px; margin-bottom: 14px; }
.contas-lista { display: flex; flex-direction: column; gap: 8px; }
.conta-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 12.5px; box-shadow: var(--lift); }
.conta-item .conta-saldo { font-weight: 700; font-variant-numeric: tabular-nums; }
.conta-item .conta-saldo.negativo { color: var(--warn); }
.conta-del { background: none; border: none; color: var(--ink-faint); cursor: pointer; }
.conta-del:hover { color: var(--warn); }

.bar-chart { height: 140px; display: flex; align-items: flex-end; gap: 16px; padding: 0 4px; }
.bc-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.bc-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.bc-bar { width: 16px; border-radius: 3px 3px 0 0; }
.bc-bar.receita { background: var(--accent); }
.bc-bar.despesa { background: var(--warn); }
.bc-label { font-size: 11px; color: var(--ink-soft); margin-top: 6px; text-align: center; }
.bc-val { font-size: 10.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; text-align: center; }
.rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.rel-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; max-width: 560px; }
.panel-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.panel-tabs span { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 8px 12px 10px; border-bottom: 2px solid transparent; cursor: pointer; }
.panel-tabs span.active { color: var(--ink); border-bottom-color: var(--accent); }
.ranking-list { display: flex; flex-direction: column; gap: 8px; }
.ranking-list li { list-style: none; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink); padding: 6px 0; border-bottom: 1px solid var(--line); }
.ranking-list li span.n { font-family: 'Newsreader', serif; font-weight: 600; }
.donut-legend { list-style: none; padding: 0; margin: 10px 0 0; font-size: 11.5px; }
.donut-legend li { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--ink-soft); }
.donut-legend .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.donut-wrap { display: flex; flex-direction: column; align-items: center; }
.agilidade-row { display: flex; gap: 24px; margin-top: 12px; }
.agilidade-item { display: flex; align-items: center; gap: 10px; }
.agilidade-item .valor { font-family: 'Newsreader', serif; font-weight: 600; font-size: 16px; color: var(--ink); }
.agilidade-item .rotulo { font-size: 11px; color: var(--ink-faint); }

table.list .due-inline { display: flex; align-items: center; gap: 8px; }
.valor-receita { color: var(--accent); font-weight: 600; }
.valor-despesa { color: var(--warn); font-weight: 600; }

/* ---------- Configurações ---------- */
.cfg-layout { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.cfg-menu { display: flex; flex-direction: column; gap: 1px; }
.cfg-menu-titulo { font-family: 'Newsreader', serif; font-size: 18px; font-weight: 600; color: var(--ink); margin: 2px 10px 12px; }
.cfg-menu a { padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.cfg-menu a:hover { color: var(--ink); }
.cfg-menu a.active { background: var(--side-active-bg); color: var(--accent); font-weight: 600; }
.cfg-menu-divisor { height: 1px; background: var(--line); margin: 8px 10px; }
.cfg-conteudo { min-width: 0; }
.cfg-secao-titulo { font-family: 'Newsreader', serif; font-size: 17px !important; }
.cfg-listas { display: grid; grid-template-columns: minmax(0, 420px); gap: 12px; align-items: start; }
.cfg-lista { list-style: none; padding: 0; margin: 0 0 10px; }
.cfg-lista li { display: flex; align-items: center; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cfg-lista li:last-child { border-bottom: none; }
.cfg-item-nome { flex: 1; cursor: text; color: var(--ink); }
.cfg-lista li input { flex: 1; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }
.cfg-uso { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); background: var(--side-active-bg); border-radius: 20px; padding: 0 7px; }
.cfg-btn { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 2px 5px; font-size: 12px; }
.cfg-btn:hover:not(:disabled) { color: var(--ink); }
.cfg-btn:disabled { opacity: 0.3; cursor: default; }
.cfg-btn.cfg-del:hover { color: var(--warn); }
.cfg-add { display: flex; gap: 6px; }
.cfg-add input { flex: 1; min-width: 0; font-family: 'Public Sans', sans-serif; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; }
.field-row.cfg-row-3 { grid-template-columns: 1fr 1.6fr 90px; }
.field-row.usr-row-end { grid-template-columns: 1fr 110px; }

/* Usuários */
.usr-registro { gap: 10px; font-size: 13px; color: var(--ink-soft); }
.mini-switch { position: relative; display: inline-block; width: 34px; height: 18px; flex: none; }
.mini-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.mini-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background 0.15s; }
.mini-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: left 0.15s; }
.mini-switch input:checked + span { background: var(--accent); }
.mini-switch input:checked + span::after { left: 18px; }
.toolbar-select, .toolbar-input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-family: 'Public Sans', sans-serif; font-size: 12.5px; }
.usr-nome { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.usr-avatar { position: relative; flex: none; border-radius: 50%; background: var(--side-active-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; font-weight: 600; }
.usr-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.usr-online { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: #2fb463; border: 2px solid var(--surface); }
table.list.usr-tabela td { vertical-align: middle; }
.usr-rodape { text-align: right; font-size: 12px; color: var(--ink-faint); margin-top: 10px; }
.usr-foto-campo { display: flex; align-items: center; gap: 16px; }

/* Agentes de IA */
.ia-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.ia-card { width: 236px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--surface); box-shadow: var(--lift); }
.ia-capa { position: relative; height: 110px; border-radius: 6px; background: linear-gradient(160deg, var(--surface-2), var(--side-active-bg)); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.ia-status { position: absolute; left: 10px; bottom: 10px; background: #fff; color: #333; font-size: 11px; padding: 3px 11px; border-radius: 20px; }
.ia-status.ativo { background: var(--accent); color: var(--accent-contrast); }
.ia-nome { font-weight: 700; font-size: 14px; color: var(--ink); }
.ia-funcao { font-size: 12.5px; color: var(--ink); margin-top: 4px; }
.ia-desc { font-size: 12px; color: var(--ink-soft); margin: 2px 0 10px; }

/* Termos monitorados */
.termo-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 12px 0; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; }
.termo-form[hidden] { display: none; }
.termo-filtros { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-soft); margin: 16px 0 12px; }
.termo-card { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.termo-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.termo-nome { font-size: 13.5px; color: var(--ink); }
.termo-nome small { font-size: 12px; }
.termo-cert { font-size: 10.5px; font-weight: 600; color: #2fb463; border: 1px solid #2fb463; border-radius: 20px; padding: 2px 10px; }
.termo-fonte { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 9px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.termo-fonte:last-child { border-bottom: none; }
.termo-fonte-nome { font-weight: 600; color: var(--ink); }
.termo-ic { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.termo-ic.ok { background: #2fb463; }
.termo-ic.soon { background: var(--brass); }
.termo-ic.late { background: var(--warn); }

/* Contas (Configurações > Financeiro) */
.contas-tabela .conta-acoes { display: none; }
.contas-tabela tr:hover .conta-acoes { display: inline; }
.contas-tabela tr:hover .conta-data { display: none; }

/* Workflow */
.wf-linha { display: grid; grid-template-columns: 24px minmax(160px, 1.2fr) minmax(140px, 1fr) auto auto auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.wf-num { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-align: right; }
.wf-dias { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.wf-dias input { width: 64px; }

/* Metas / Notificações */
.metas-form { display: flex; flex-direction: column; gap: 8px; }
.meta-linha { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink); }
.meta-linha > span { width: 220px; }
.meta-linha input { width: 80px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); text-align: right; font-family: 'Public Sans', sans-serif; }

/* Caixa de entrada */
.caixa-lista { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin-top: 12px; }
.caixa-item { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 13px; color: var(--ink); }
.caixa-item > span { flex: 1; }
.caixa-mover { background: none; border: none; color: var(--accent); font-size: 11.5px; cursor: pointer; padding: 0; font-family: 'Public Sans', sans-serif; }
.caixa-mover:disabled { color: var(--ink-faint); cursor: default; }

/* Integrações */
.integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.integ-card { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--surface); box-shadow: var(--lift); display: flex; flex-direction: column; }
.integ-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.integ-logo { width: 40px; height: 40px; border-radius: 8px; background: var(--side-active-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.integ-ativo { font-size: 12px; font-weight: 600; color: #2fb463; }
.integ-inativo { font-size: 12px; color: var(--ink-faint); }
.integ-detalhe { font-size: 11.5px; color: var(--ink-faint); margin-top: auto; padding-top: 8px; }
td.cad-acoes-col { text-align: right; white-space: nowrap; }

/* Atividades */
.side-selo { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.side-selo[hidden] { display: none; }
.atv-metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.atv-metrica { text-align: left; cursor: pointer; font-family: inherit; }
.atv-metrica.ativa { outline: 2px solid var(--accent); outline-offset: -1px; }
.atv-secao { border-top: 1px solid var(--line); }
.atv-secao:first-of-type { border-top: none; }
.atv-secao-cab { width: 100%; background: none; border: none; text-align: left; padding: 11px 2px; font: inherit; font-weight: 700; font-size: 13px; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.atv-secao.vazia .atv-secao-cab { color: var(--ink-faint); cursor: default; }
.atv-seta { width: 12px; color: var(--ink-soft); }
.atv-lista { padding-bottom: 8px; }
.atv-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-radius: 8px; cursor: pointer; transition: opacity 0.25s; }
.atv-item:hover { background: var(--side-active-bg); }
.atv-item.saindo { opacity: 0; }
.atv-item.nao-visto .atv-titulo { font-weight: 700; }
.atv-item.nao-visto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin: 6px -4px 0 -2px; flex: none; }
.atv-intimacao { cursor: default; }
.atv-ic { width: 18px; height: 18px; flex: none; border-radius: 4px; background: var(--brass-bg); color: var(--brass); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.atv-item .check-concluido { margin-top: 2px; flex: none; }
.atv-corpo { flex: 1; min-width: 0; }
.atv-titulo { font-size: 13px; color: var(--ink); }
.atv-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.atv-teor { font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; background: var(--bg); border-radius: 6px; padding: 10px 12px; margin-top: 8px; max-height: 320px; overflow: auto; }
.atv-acoes { display: flex; align-items: center; gap: 6px; flex: none; }
.atv-acoes .btn-ghost { padding: 4px 9px; font-size: 11.5px; }
.atv-prio { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 20px; vertical-align: 1px; }
.atv-prio.urgente { color: var(--warn); background: var(--warn-bg); }
.atv-prio.importante { color: var(--brass); background: var(--brass-bg); }
@media (max-width: 900px) { .atv-metricas { grid-template-columns: repeat(2, 1fr); } .atv-item { flex-wrap: wrap; } .atv-acoes { width: 100%; justify-content: flex-end; } }

/* Melhorias de uso (24/09/2026) */
.btn-perigo { color: var(--warn); border-color: var(--warn-bg); }
.btn-perigo:hover { background: var(--warn-bg); }
.ficha-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.linha-com-acao { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tarefa-linha { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.tarefa-linha:hover { background: var(--side-active-bg); }
.tarefa-linha.concluida .tarefa-txt { color: var(--ink-faint); text-decoration: line-through; }
.tarefa-txt { flex: 1; min-width: 0; }
.atalhos { display: flex; gap: 8px; flex-wrap: wrap; }
.atv-saudacao { font-family: 'Newsreader', serif; font-size: 20px; color: var(--ink); margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.atv-dia { display: inline-block; font-family: 'Public Sans', sans-serif; font-size: 12px; color: var(--ink-faint); }
.atv-dia::first-letter { text-transform: uppercase; }
.busca-sub { margin-top: 16px !important; font-size: 12px !important; color: var(--ink-soft) !important; text-transform: uppercase; letter-spacing: 0.03em; }
#btn-ajuda { font-weight: 700; font-size: 14px; }
.guia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.guia ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink); }
.guia li { margin-bottom: 6px; }
.guia p { font-size: 13px; color: var(--ink); margin: 0 0 8px; }

/* Login, conta e notificações */
.usr-botao { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--side-active-bg); color: var(--accent); cursor: pointer; padding: 0; overflow: hidden; font-family: 'Newsreader', serif; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.usr-botao img { width: 100%; height: 100%; object-fit: cover; }
.usr-menu-cab { font-size: 12px !important; color: var(--ink-soft) !important; cursor: default !important; border-bottom: 1px solid var(--line); border-radius: 0 !important; margin-bottom: 4px; }
.usr-menu-cab:hover { background: none !important; }
.usr-menu-cab strong { display: block; color: var(--ink); font-size: 13px; }
.notif-wrap { position: relative; }
.notif-wrap .icon-btn { position: relative; }
.notif-selo { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--warn); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.notif-selo[hidden] { display: none; }
.notif-menu { width: 320px; max-height: 420px; overflow: auto; }
.notif-item { display: block; font-size: 12.5px; line-height: 1.4; }
.notif-item.nova { font-weight: 600; }
.notif-item small { display: block; font-weight: 400; color: var(--ink-faint); font-size: 11px; margin-top: 2px; }
.notif-vazio { color: var(--ink-faint) !important; cursor: default !important; }
.usr-acessos { margin-top: 18px; }

.atv-qtd { font-size: 10.5px; font-weight: 700; color: var(--brass); background: var(--brass-bg); border-radius: 20px; padding: 1px 8px; vertical-align: 1px; white-space: nowrap; }
.atv-teor-cab { font-weight: 700; color: var(--ink); font-size: 11.5px; margin-bottom: 4px; }
.atv-teor-sep { border: none; border-top: 1px dashed var(--line); margin: 12px 0; }

/* ---------- Relatórios e BI ---------- */
.bi-topo { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.bi-abas { border-bottom: none !important; margin-bottom: 0 !important; flex: 1; flex-wrap: wrap; }
.bi-periodo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); padding-bottom: 8px; }
.bi-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bi-kpi .value { font-size: 25px; }
.bi-kpi-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
.bi-kpi.alerta .value { color: var(--warn); }
.bi-kpi.atencao .value { color: var(--brass); }
.bi-grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; margin-bottom: 12px; }
.bi-grade-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.bi-painel { min-width: 0; }
.bi-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bi-grade { stroke: var(--line); stroke-width: 1; }
.bi-grade.base { stroke: var(--ink-faint); }
.bi-eixo { font-family: 'Public Sans', sans-serif; font-size: 11px; fill: var(--ink-faint); }
.bi-alvo { fill: transparent; }
.bi-alvo:hover { fill: var(--side-active-bg); opacity: .55; }
.bi-area { opacity: .12; }
.bi-cruz { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.bi-cruz-alvo:hover .bi-cruz { opacity: 1; }
.bi-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); margin: -4px 0 8px; }
.bi-legenda i, .bi-rosca-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bi-barrash { display: flex; flex-direction: column; gap: 7px; }
.bi-bh-linha { display: grid; grid-template-columns: minmax(90px, 36%) 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; padding: 2px 4px; border-radius: 6px; cursor: default; }
.bi-bh-linha:hover { background: var(--side-active-bg); }
.bi-bh-nome { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-bh-trilho { height: 10px; }
.bi-bh-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.bi-bh-valor { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.bi-rosca-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bi-rosca { width: 160px; height: 160px; flex: none; }
.bi-rosca path, .bi-rosca circle { stroke: var(--surface); stroke-width: 2; }
.bi-rosca-total { font-family: 'Newsreader', serif; font-size: 24px; font-weight: 600; fill: var(--ink); }
.bi-rosca-leg { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; font-size: 12.5px; }
.bi-rosca-leg li { display: grid; grid-template-columns: auto 1fr auto 40px; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.bi-rosca-leg li:last-child { border-bottom: none; }
.bi-rosca-leg em { font-style: normal; color: var(--ink-faint); text-align: right; }
.bi-calor-wrap { overflow-x: auto; }
.bi-calor { border-collapse: separate; border-spacing: 2px; font-size: 12px; min-width: 100%; }
.bi-calor th { font-weight: 600; color: var(--ink-soft); padding: 4px 6px; text-align: left; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.bi-calor thead th { font-size: 11px; text-align: center; }
.bi-calor td { text-align: center; padding: 8px 6px; border-radius: 4px; font-weight: 600; color: #0b0b0b; min-width: 44px; cursor: default; }
.bi-calor td.escuro { color: #fff; }
.bi-calor td.zero { color: var(--ink-faint); background: var(--surface-2); font-weight: 400; }
.bi-metas { display: flex; flex-direction: column; gap: 14px; }
.bi-meta-cab { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink); margin-bottom: 5px; }
.bi-meta-trilho { height: 10px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.bi-meta-trilho span { display: block; height: 100%; border-radius: 4px; }
.bi-meta-st { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
.bi-tabela td.num, .bi-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bi-tabela tbody tr { cursor: default; }
.bi-nota { font-size: 11.5px; color: var(--ink-faint); margin: 10px 0 0; }
.bi-tip { position: fixed; z-index: 80; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.45; max-width: 280px; }
.bi-tip[hidden] { display: none; }
@media (max-width: 760px) { .bi-grade-2 { grid-template-columns: 1fr; } }

@media print {
  .side, .topbar, .cfg-menu, .usr-toolbar, .usr-registro, #usr-tabs { display: none !important; }
  .app, .cfg-layout { display: block; }
  .panel { box-shadow: none; border: none; }
}

/* ---------- Formulários em tela cheia ---------- */
.form-page { max-width: 760px; }
.form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.form-head h2 { font-family: 'Newsreader', serif; font-size: 22px; font-weight: 600; margin: 0; }
.form-body { display: flex; flex-direction: column; gap: 12px; }
.form-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

.field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.field > span { font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: 'Public Sans', sans-serif; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 56px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-hint { font-size: 12px; color: var(--ink-soft); margin-top: -6px; }
.field-hint.ok { color: var(--accent); }
.field-hint.alerta { color: var(--warn); }
.field-hint a { color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.field input.auto, .field select.auto { background: var(--glow); }

.pill-toggle { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; width: fit-content; }
.pill-toggle button {
  background: var(--surface); border: none; padding: 8px 16px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; font-family: 'Public Sans', sans-serif;
}
.pill-toggle button.active { background: var(--accent); color: var(--accent-contrast); }

.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.check-row input { width: 15px; height: 15px; accent-color: var(--accent); }

.rep-fields { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.rep-fields[hidden] { display: none; }

.ficha-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.ficha-section { margin-bottom: 16px; }
.ficha-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-soft); margin: 0 0 8px; }
.andamento-item { border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 13px; }
.andamento-item .data { color: var(--ink-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.doc-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.doc-item a { color: var(--accent); font-weight: 600; text-decoration: none; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-contrast); font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 8px; box-shadow: var(--shadow); z-index: 60;
}
.erro-msg { color: var(--warn); font-size: 13px; font-weight: 600; }

@media (max-width: 760px) {
  .app { grid-template-columns: 56px 1fr; }
  .side .brand { display: none; }
  .side a span.txt { display: none; }
  .side a { justify-content: center; }
  .metrics { grid-template-columns: 1fr; }
  .field-row, .field-row.cfg-row-3 { grid-template-columns: 1fr; }
  .cfg-layout { grid-template-columns: 1fr; }
  .greet { display: none; }
}

/* ---------- Área de trabalho (painel) ---------- */
.pn-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pn-topo .atv-saudacao { margin: 0; }
.pn-card { text-align: left; cursor: pointer; font-family: inherit; color: inherit; transition: border-color .15s; }
.pn-card:hover { border-color: var(--accent); }
.pn-linha { display: flex; align-items: baseline; gap: 10px; }
.pn-var { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); }
.pn-var.sobe { background: var(--glow); color: var(--accent); }
.pn-var.desce { background: var(--warn-bg); color: var(--warn); }
.pn-meta { font-size: 13px; color: var(--ink-faint); }
.pn-sub { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.pn-sub.alerta { color: var(--warn); font-weight: 600; }
.pn-sub a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.pn-barra { height: 5px; border-radius: 3px; background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.pn-barra span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.pn-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: stretch; }
.pn-coluna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pn-tipos, .pn-equipe { display: flex; flex-direction: column; gap: 10px; }
.pn-tipo { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 32px; align-items: center; gap: 12px; font-size: 13px; }
.pn-tipo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pn-tipo strong { text-align: right; font-variant-numeric: tabular-nums; }
.pn-tipo-barra, .pn-pessoa-barra { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); }
.pn-tipo-barra span, .pn-pessoa-barra span { display: block; height: 100%; border-radius: 4px; background: var(--accent); opacity: .85; }
.pn-pessoa { display: grid; grid-template-columns: 28px 80px minmax(0, 1fr) 140px; align-items: center; gap: 10px; font-size: 13px; }
.pn-pessoa-num { font-size: 12px; color: var(--ink-soft); text-align: right; }
.pn-pessoa-num strong { color: var(--ink); }
.pn-marca-meta { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink-soft); border-radius: 1px; }
.pn-cal-cab { display: flex; align-items: center; justify-content: space-between; }
.pn-cal-cab strong { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; }
.pn-seta { background: none; border: none; color: var(--ink-soft); font-size: 20px; cursor: pointer; padding: 0 8px; line-height: 1; }
.pn-seta:hover { color: var(--accent); }
.pn-cal-sub { font-size: 12px; color: var(--ink-faint); text-align: center; margin: 2px 0 12px; }
.pn-semana, .pn-dias { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.pn-semana span { font-size: 11px; font-weight: 600; color: var(--ink-faint); padding-bottom: 6px; }
.pn-dias { row-gap: 4px; }
.pn-dia { position: relative; height: 34px; border: none; background: none; border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; font-variant-numeric: tabular-nums; }
.pn-dia:hover { background: var(--surface-2); color: var(--ink); }
.pn-dia.tem { color: var(--ink); font-weight: 600; }
.pn-dia.hoje { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--accent); font-weight: 700; }
.pn-dia i { position: absolute; top: -4px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 15px; background: var(--accent); color: var(--accent-contrast); }
.pn-dia i.atrasado { background: var(--warn); color: #fff; }
.pn-cal-link { display: block; text-align: right; font-size: 12px; color: var(--ink-soft); margin-top: 12px; cursor: pointer; }
.pn-cal-link:hover { color: var(--accent); }
@media (max-width: 900px) { .pn-grade { grid-template-columns: 1fr; } .pn-pessoa { grid-template-columns: 28px 70px minmax(0, 1fr); } .pn-pessoa-num { grid-column: 2 / -1; text-align: left; } }
.pn-secao { margin-top: 28px; }
.pn-secao-cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pn-secao-cab h2 { margin: 0; font-family: 'Newsreader', serif; font-size: 19px; font-weight: 600; color: var(--ink); }
.pn-secao-resumo { font-size: 12.5px; color: var(--ink-soft); }
.pn-ver-mais { margin-left: auto; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.pn-ver-mais:hover { color: var(--accent); }
.pn-grade-2, .pn-grade-3, .pn-grade-pub, .pn-grade-fin { display: grid; gap: 12px; align-items: stretch; }
.pn-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn-grade-pub { grid-template-columns: 260px minmax(0, 1fr); }
.pn-grade-fin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn-grade-2 > *, .pn-grade-3 > *, .pn-grade-fin > * { min-width: 0; }
.pn-kpis-2 { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
.pn-kpis-2 .metric { margin: 0; }
.pn-lista { display: flex; flex-direction: column; }
.pn-lista-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; border-radius: 4px; }
.pn-lista-item:first-child { border-top: none; }
.pn-lista-item:hover { background: var(--surface-2); }
.pn-lista-data { flex: none; width: 70px; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pn-lista-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.pn-lista-txt strong { color: var(--ink); font-weight: 600; }
.pn-ponto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.pn-ponto.novo { background: var(--accent); }
.pn-alerta { margin-top: 12px; border-left: 3px solid var(--warn); }
.pn-alerta-qtd { margin-left: 8px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); }
.pn-alerta h3 { justify-content: flex-start; }
@media (max-width: 1100px) { .pn-grade-3 { grid-template-columns: 1fr 1fr; } .pn-grade-3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .pn-grade-2, .pn-grade-3, .pn-grade-pub, .pn-grade-fin { grid-template-columns: 1fr; } }
.pn-secao .bi-nota a { color: var(--accent); font-weight: 600; text-decoration: underline; cursor: pointer; }
.pn-grade > .panel, .pn-secao .panel { display: flex; flex-direction: column; margin: 0; }
.pn-secao .panel > .bi-svg, .pn-secao .panel > .bi-legenda + .bi-svg { margin-top: auto; margin-bottom: auto; }
.pn-secao .panel > .bi-legenda { margin-bottom: 4px; }
.pn-pub h3 { justify-content: flex-start; gap: 8px; }
.pn-pub h3 .pn-alerta-qtd { margin-left: 0; }
.pn-pub .pn-ver-mais, .pn-secao .panel h3 .pn-ver-mais { font-weight: 400; }
.pn-rodape { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-faint); }
.pn-cal .pn-cal-link { margin-top: auto; padding-top: 12px; }
.pn-secao .metric { margin: 0; display: flex; flex-direction: column; justify-content: center; }

/* ---------- Agenda (calendário) ---------- */
.ag-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.ag-lateral { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ag-novo { width: 100%; margin-bottom: 6px; }
.ag-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 10px 0 4px; }
.ag-visoes { display: flex; flex-direction: column; gap: 2px; }
.ag-visoes button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; text-align: left; }
.ag-visoes button:hover { background: var(--surface-2); color: var(--ink); }
.ag-visoes button.ativa { background: var(--side-active-bg); color: var(--accent); font-weight: 600; }
.ag-select { width: 100%; }
.ag-status { display: flex; flex-direction: column; gap: 2px; }
.ag-status-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; color: var(--ink); cursor: pointer; border-radius: 6px; }
.ag-status-item:hover { background: var(--surface-2); }
.ag-status-item input { accent-color: var(--accent); margin: 0; }
.ag-status-item span { flex: 1; }
.ag-status-item strong { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ag-bolinha { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ag-bolinha.st-pendente { background: var(--accent); }
.ag-bolinha.st-atrasada { background: var(--warn); }
.ag-bolinha.st-concluida { background: var(--ink-faint); }
.ag-nota { font-size: 11px; color: var(--ink-faint); margin: 8px 0 0; }
.ag-principal { min-width: 0; }
.ag-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ag-nav { display: flex; align-items: center; gap: 2px; }
.ag-hoje { margin-left: 6px; padding: 5px 12px; font-size: 12.5px; }
.ag-titulo { margin: 0; font-family: 'Newsreader', serif; font-size: 21px; font-weight: 600; color: var(--ink); }
.ag-total { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.ag-mes-cab, .ag-mes-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-mes-cab span { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; padding: 0 8px 6px; }
.ag-mes-grade { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ag-cel { min-height: 112px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; }
.ag-cel:hover { background: var(--surface-2); }
.ag-cel.fora { background: var(--surface-2); }
.ag-cel.fora .ag-num { color: var(--ink-faint); opacity: .6; }
.ag-num { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 2px; }
.ag-cel.hoje .ag-num { background: var(--accent); color: var(--accent-contrast); }
.ag-chip { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 5px; font-size: 11.5px; line-height: 1.3; cursor: pointer; border-left: 3px solid var(--accent); background: var(--glow); color: var(--ink); min-width: 0; }
.ag-chip:hover { filter: brightness(0.96); }
.ag-chip-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-hora { font-size: 11px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; }
.ag-ini { flex: none; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); margin-left: auto; }
.ag-chip.st-atrasada, .ag-card.st-atrasada { border-left-color: var(--warn); background: var(--warn-bg); }
.ag-chip.st-concluida, .ag-card.st-concluida { border-left-color: var(--ink-faint); background: var(--surface-2); color: var(--ink-faint); }
.ag-chip.st-concluida .ag-chip-txt, .ag-card.st-concluida .ag-card-titulo { text-decoration: line-through; }
.ag-mais { font-size: 11px; font-weight: 600; color: var(--accent); padding: 0 6px; cursor: pointer; }
.ag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ag-sem-col { border-left: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; }
.ag-sem-col:first-child { border-left: none; }
.ag-sem-cab { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); cursor: pointer; background: var(--surface-2); }
.ag-sem-cab span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ink-faint); letter-spacing: .04em; }
.ag-sem-cab strong { font-family: 'Newsreader', serif; font-size: 20px; color: var(--ink); }
.ag-sem-col.hoje .ag-sem-cab strong { color: var(--accent); }
.ag-sem-col.hoje .ag-sem-cab { box-shadow: inset 0 -2px 0 var(--accent); }
.ag-sem-itens { padding: 6px; display: flex; flex-direction: column; gap: 6px; min-height: 380px; }
.ag-vazio-dia { color: var(--ink-faint); font-size: 12px; text-align: center; padding-top: 10px; }
.ag-card { padding: 7px 8px; border-radius: 6px; border-left: 3px solid var(--accent); background: var(--glow); cursor: pointer; min-width: 0; }
.ag-card:hover { filter: brightness(0.96); }
.ag-card-topo { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
.ag-card-topo .tag { font-size: 10px; padding: 1px 6px; }
.ag-card-titulo { font-size: 12.5px; font-weight: 600; color: inherit; overflow-wrap: anywhere; }
.ag-card-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.ag-st { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ag-st.st-pendente { background: var(--glow); color: var(--accent); }
.ag-st.st-atrasada { background: var(--warn-bg); color: var(--warn); }
.ag-st.st-concluida { background: var(--surface-2); color: var(--ink-faint); }
.ag-tabela tr { cursor: pointer; }
.ag-link { color: var(--accent); font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (max-width: 1000px) { .ag-layout { grid-template-columns: 1fr; } .ag-lateral { position: static; } .ag-semana { grid-template-columns: 1fr; } .ag-sem-col { border-left: none; border-top: 1px solid var(--line); } .ag-sem-itens { min-height: 0; } }
@media (max-width: 700px) { .ag-cel { min-height: 70px; } .ag-chip-txt { display: none; } }

/* ---------- Meu dia: produtividade e barra de ferramentas ---------- */
.pn-topo { justify-content: flex-end; }
.atv-prod { display: flex; flex-direction: column; }
.atv-prod-barra { height: 8px; border-radius: 4px; background: var(--brass-bg); margin-top: 10px; overflow: hidden; }
.atv-prod-barra span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.atv-prod-leg { display: flex; gap: 12px; margin-top: 7px; font-size: 11.5px; color: var(--ink-soft); flex-wrap: wrap; }
.atv-prod-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.atv-prod-leg i.c1 { background: var(--accent); }
.atv-prod-leg i.c2 { background: var(--brass); opacity: .55; }
.atv-barra { flex-wrap: wrap; gap: 6px; }
.atv-busca { display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-faint); min-width: 240px; }
.atv-busca input { border: none; background: none; outline: none; font-family: inherit; font-size: 13px; color: var(--ink); width: 100%; }
.atv-busca:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.atv-ferr { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: none; background: none; border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.atv-ferr:hover { background: var(--surface-2); color: var(--ink); }
.atv-ferr.ativa { color: var(--accent); font-weight: 600; }
.atv-drop { position: relative; }
.atv-menu { position: absolute; top: 38px; left: 0; z-index: 30; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.atv-menu[hidden] { display: none; }
.atv-menu-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 8px 4px; }
.atv-menu button { text-align: left; padding: 7px 8px 7px 26px; border: none; background: none; border-radius: 5px; font-family: inherit; font-size: 13px; color: var(--ink); cursor: pointer; position: relative; }
.atv-menu button:hover { background: var(--surface-2); }
.atv-menu button.marcado { color: var(--accent); font-weight: 600; }
.atv-menu button.marcado::before { content: '✓'; position: absolute; left: 9px; }
.atv-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.atv-icone { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; border: none; background: none; border-radius: 6px; color: var(--ink-soft); cursor: pointer; }
.atv-icone:hover { background: var(--surface-2); color: var(--ink); }
.atv-icone.ativa { background: var(--side-active-bg); color: var(--accent); }
.atv-icone-selo { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--warn); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 16px; }
.atv-andamentos { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin: 4px 0 12px; background: var(--surface-2); }
.atv-and-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.atv-and-cab strong { font-size: 13.5px; }
.atv-and-cab span { font-size: 12px; color: var(--ink-faint); }
.atv-and-cab .btn-ghost { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.atv-andamentos .pn-lista { max-height: 320px; overflow-y: auto; }
.atv-and-origem { margin-left: auto; flex: none; font-size: 11px; color: var(--ink-faint); }
.atv-metricas .metric { display: flex; flex-direction: column; justify-content: center; }
.atv-metricas .metric .label { margin-bottom: 6px; }

/* ---------- Meu dia: painel de filtros ---------- */
.atv-qtd-filtros { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-contrast); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.atv-filtros { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 14px 16px; margin: 4px 0 14px; }
.atv-filtros-cab { display: flex; align-items: center; margin-bottom: 12px; }
.atv-filtros-cab strong { font-size: 14px; }
.atv-filtros-cab .btn-ghost { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.atv-filtros-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.atv-filtros-grade .field select, .atv-filtros-grade .field input { width: 100%; }
.atv-filtros-datas > div { display: flex; gap: 6px; }
.atv-filtros-datas input { flex: 1; min-width: 0; }
.atv-filtros-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.atv-filtros-checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.atv-filtros-checks input { accent-color: var(--accent); margin: 0; }
.atv-filtros-rot { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.atv-filtros-div { width: 1px; height: 18px; background: var(--line); }
.atv-filtros-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 14px; }
.atv-limpar { font-size: 13px; color: var(--accent); cursor: pointer; font-weight: 600; }
.atv-limpar:hover { text-decoration: underline; }
.atv-menu-simples button { padding-left: 10px; }
.atv-menu-simples { left: auto; right: 0; min-width: 220px; }
@media (max-width: 900px) { .atv-filtros-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .atv-filtros-grade { grid-template-columns: 1fr; } }
.atv-pauta tr { cursor: pointer; }
.atv-pauta-data span { display: block; font-size: 11.5px; color: var(--ink-faint); }
.atv-pauta-desc { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; max-width: 320px; }
.atv-pauta-proc { color: var(--accent); text-decoration: underline; cursor: pointer; }
.atv-and-tabela { max-height: 360px; overflow-y: auto; }
.atv-and-tabela tr[data-proc] { cursor: pointer; }
.atv-and-tabela .atv-and-origem { margin: 2px 0 0; }
.atv-int-hoje td:nth-child(4), .atv-int-hoje td:nth-child(2), .atv-and-tabela td:nth-child(3) { white-space: nowrap; }

/* ---------- Processos e casos: topo com números e gráficos ---------- */
.pr-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.pr-graficos { margin-bottom: 14px; }
.pr-graficos > .panel { display: flex; flex-direction: column; margin: 0; }
.pr-graficos .bi-svg { margin: auto 0; }
.pr-sem-meta { margin: auto; text-align: center; color: var(--ink-soft); font-size: 13px; max-width: 320px; line-height: 1.6; }
.pn-link { color: var(--accent); font-weight: 600; text-decoration: underline; cursor: pointer; }
.pr-tabela tbody tr { cursor: pointer; }
.pr-contra { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.etapa-btn { font: inherit; font-size: 12px; color: var(--ink-soft); background: none; border: 1px dashed var(--line); border-radius: 5px; padding: 1px 7px; margin-top: 3px; cursor: pointer; }
.etapa-btn:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }
.etapa-menu { z-index: 1000; max-height: 360px; }
.etapa-menu .etapa-outras { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.etapa-menu .etapa-fase { font-weight: 600; color: var(--ink-soft); }
.etapa-fase-lista { display: flex; flex-direction: column; padding-left: 12px; border-left: 2px solid var(--line); margin: 0 0 4px 12px; }
.etapa-fase-lista[hidden] { display: none; }
.pr-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-and { max-width: 280px; }
@media (max-width: 900px) { .pr-cartoes { grid-template-columns: 1fr; } }
#pr-visao { width: auto; min-width: 200px; }

/* ---------- Gestão Kanban ---------- */
.kb-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-family: inherit; font-size: 13px; color: var(--ink-soft); box-shadow: var(--lift); }
.kb-chip strong { font-family: 'Newsreader', serif; font-size: 18px; color: var(--ink); }
button.kb-chip { cursor: pointer; }
button.kb-chip:hover { border-color: var(--accent); }
.kb-chip.alerta strong { color: var(--warn); }
.kb-chip.ativo { outline: 2px solid var(--accent); outline-offset: -1px; }
.kb-barra { margin-bottom: 6px; }
.kb-barra #kb-resp { width: auto; min-width: 190px; }
.kb-mostrando { font-size: 12px; color: var(--ink-faint); }
.kb-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.kb-filtros select { width: auto; }
.kb-filtros label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kb-filtros input { accent-color: var(--accent); margin: 0; }
.kb-abas span { white-space: nowrap; }
.kb-aba-n { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--side-active-bg); color: var(--ink-soft); margin-left: 4px; }
.kb-abas span.active .kb-aba-n { background: var(--accent); color: var(--accent-contrast); }
.kanban-board { align-items: stretch; height: calc(100vh - 300px); min-height: 380px; }
.kanban-col { width: 270px; display: flex; flex-direction: column; min-height: 0; }
.kcol-body { flex: 1; overflow-y: auto; min-height: 0; padding: 2px; }
.kcol-head .kcol-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.kcol-head .atv-drop { flex: none; }
.kcol-menu-btn { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.kcol-menu-btn:hover { background: var(--surface); color: var(--ink); }
.kcol-menu { top: 26px; font-weight: 400; }
.kcol-vazia { font-size: 12px; color: var(--ink-faint); text-align: center; padding: 14px 0; }
.kc-acao { font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; }
.kc-proc { display: flex; align-items: center; gap: 4px; margin: 4px 0; }
.kc-copiar { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 1px; display: inline-flex; }
.kc-copiar:hover { color: var(--accent); }
.kc-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kc-linha .kc-risk { margin: 0; }
.kc-valor { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.kc-rodape { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); position: relative; }
.kc-rodape .ag-ini { margin-left: 0; }
.kc-info { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.kc-info.alerta { color: var(--warn); }
.kc-acoes { margin-left: auto; display: inline-flex; gap: 2px; }
.kc-btn { background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 3px 4px; border-radius: 4px; display: inline-flex; }
.kc-btn:hover { background: var(--surface-2); color: var(--accent); }
.kb-mover { top: 30px; right: 0; left: auto; max-height: 260px; overflow-y: auto; }
.kb-mover button[disabled] { cursor: default; }
.kb-nova-col { flex: none; width: 220px; }
.kb-nova-col-input { width: 100%; padding: 9px 10px; border: 1px solid var(--accent); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.kb-mover button { padding-left: 26px; }

/* Empresa responsável (WB x PRAGMA) */
.tag-empresa { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; vertical-align: 1px; }
.tag-empresa.wb { background: color-mix(in srgb, var(--serie-7) 14%, transparent); color: var(--serie-7); }
.tag-empresa.pragma { background: var(--brass-bg); color: var(--brass); }
.tag-empresa.sem { background: var(--warn-bg); color: var(--warn); font-weight: 600; letter-spacing: 0; }
.field-ajuda { font-size: 11.5px; color: var(--ink-faint); font-weight: 400; }
#pr-empresa { width: auto; }

/* Modelos de documentos */
.mod-passos { margin: 0 0 12px; padding-left: 20px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.mod-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.mod-form .field { flex: 1; min-width: 220px; }
.mod-campos td { padding: 6px 8px; font-size: 12.5px; }
.mod-campo { cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 12px; color: var(--accent); white-space: nowrap; }
.mod-campo:hover { border-color: var(--accent); }
.mod-ancora { position: relative; display: inline-block; }
.mod-menu { top: 40px; right: 0; left: auto; min-width: 260px; }
.mod-aviso { font-size: 12px; color: var(--warn); padding: 6px 10px; max-width: 280px; line-height: 1.5; }
.cfg-intro { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.6; }
.list td a.btn-ghost { display: inline-block; text-decoration: none; width: auto; }

/* Calculadora de prazo */
.calc-prazo { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 10px 14px; }
.calc-prazo summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent); }
.calc-prazo[open] summary { margin-bottom: 10px; }
.calc-tribunal { font-size: 12.5px; background: var(--glow); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.calc-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.calc-dias { display: flex; gap: 4px; align-items: center; }
.calc-dias input { width: 70px; flex: none; }
.calc-atalho { border: 1px solid var(--line); background: var(--surface); border-radius: 5px; padding: 6px 8px; font-family: inherit; font-size: 12px; cursor: pointer; color: var(--ink-soft); }
.calc-atalho:hover { border-color: var(--accent); color: var(--accent); }
.calc-resultado { margin-top: 10px; font-size: 13px; }
.calc-venc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.calc-venc strong { font-family: 'Newsreader', serif; font-size: 20px; color: var(--accent); }
.calc-venc .btn-primary { padding: 6px 12px; font-size: 12.5px; }
.calc-memoria, .calc-memoria-salva ul { margin: 8px 0; padding-left: 18px; color: var(--ink-soft); line-height: 1.6; font-size: 12.5px; }
.calc-dica { font-size: 11.5px; color: var(--ink-faint); }
.fer-ano { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fer-ano strong { font-family: 'Newsreader', serif; font-size: 18px; }
@media (max-width: 900px) { .calc-grade { grid-template-columns: 1fr 1fr; } }
.calc-dias { flex-wrap: wrap; } .calc-grade { grid-template-columns: 1fr 1.4fr 1fr 1.3fr; }

/* Conexão ADVBox */
.adv-painel { margin-bottom: 14px; border-left: 3px solid var(--accent); }
.adv-ok { color: var(--accent); font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.adv-resultado { margin-top: 10px; }

/* Workflow: passos com quando / prazo / responsável */
.wf-form.form-page { max-width: 1100px; }
.wf-linha { grid-template-columns: 24px minmax(150px, 1.1fr) minmax(130px, 1fr) minmax(150px, 1fr) auto minmax(140px, 0.9fr) auto; }
.wf-uteis { width: auto; }
.wf-acoes { display: inline-flex; gap: 2px; }
.wf-g[hidden] { display: none; }
@media (max-width: 1000px) { .wf-linha { grid-template-columns: 24px 1fr 1fr; } }
.wf-dias .wf-n { width: 64px; flex: none; }
.wf-dias .wf-uteis { flex: none; }
.wf-linha { grid-template-columns: 24px minmax(150px, 1.2fr) minmax(130px, 1fr) minmax(170px, 0.9fr) auto minmax(150px, 0.9fr) auto; }

/* Requerimentos INSS */
.inss-cartoes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.inss-cartoes .pn-card { display: flex; flex-direction: column; justify-content: center; }
.ativa-card { outline: 2px solid var(--accent); outline-offset: -1px; }
.inss-sit { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.inss-sit.andamento { background: var(--glow); color: var(--accent); }
.inss-sit.atencao { background: var(--brass-bg); color: var(--brass); }
.inss-sit.ok { background: rgba(12, 163, 12, 0.12); color: var(--status-good); }
.inss-sit.ruim { background: var(--warn-bg); color: var(--warn); }
.inss-sit.neutro { background: var(--surface-2); color: var(--ink-faint); }
.inss-alerta { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.inss-alerta.critico { background: var(--warn-bg); color: var(--warn); }
.inss-alerta.atencao { background: var(--brass-bg); color: var(--brass); }
.inss-alerta.info { background: var(--surface-2); color: var(--ink-faint); }
.inss-tabela tbody tr { cursor: pointer; }
.inss-form.form-page { max-width: 1150px; }
.inss-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.inss-bloco { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.inss-bloco legend { font-size: 12px; font-weight: 700; color: var(--accent); padding: 0 6px; }
.inss-lado { position: sticky; top: 12px; }
.inss-info { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 4px; line-height: 1.6; }
.inss-hist { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.inss-hist li span { display: block; font-size: 11px; color: var(--ink-faint); }
.inss-mini { padding: 8px 6px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 4px; }
.inss-mini:first-of-type { border-top: none; }
.inss-mini:hover { background: var(--surface-2); }
.inss-prazos label { display: inline-flex; align-items: center; gap: 6px; }
.inss-prazos input { width: 64px; }
@media (max-width: 1000px) { .inss-cartoes { grid-template-columns: repeat(2, 1fr); } .inss-grade { grid-template-columns: 1fr; } .inss-lado { position: static; } }
.field-row.inss-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Resultado do processo */
.tag-resultado { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.tag-resultado.ok { background: rgba(12, 163, 12, 0.12); color: var(--status-good); }
.tag-resultado.ruim { background: var(--warn-bg); color: var(--warn); }
.tag-resultado.neutro { background: var(--surface-2); color: var(--ink-faint); }

/* Kanban: cartões maiores (pedido do Willian, 25/09) */
.kanban-col { width: 320px; padding: 12px; }
.kcol-head { font-size: 13.5px; margin-bottom: 12px; }
.kcol-body { gap: 10px; }
.kcard { padding: 14px 16px; font-size: 13.5px; border-radius: 10px; }
.kc-title { font-size: 14.5px; line-height: 1.35; }
.kc-sub { font-size: 13px; margin-top: 2px; }
.kc-acao { font-size: 12.5px; margin-top: 8px; line-height: 1.4; }
.kc-proc { font-size: 12.5px; margin: 6px 0; }
.kc-risk, .kc-valor { font-size: 12.5px; }
.kc-rodape { margin-top: 12px; padding-top: 10px; gap: 10px; }
.kc-rodape .ag-ini { font-size: 11px; padding: 2px 7px; }
.kc-info { font-size: 12.5px; gap: 4px; }
.kc-info svg { width: 14px; height: 14px; }
.kc-btn { padding: 5px 6px; }
.kc-btn svg { width: 17px; height: 17px; }
.tag-empresa { font-size: 10.5px; }

/* Kanban: cartões mais altos e colunas um pouco mais estreitas (ajuste do Willian, 25/09) */
.kanban-col { width: 255px; padding: 10px; }
.kcard { padding: 18px 13px; min-height: 170px; display: flex; flex-direction: column; line-height: 1.5; }
.kc-title { margin-bottom: 2px; }
.kc-sub { margin-top: 3px; }
.kc-acao { margin-top: 10px; }
.kc-proc { margin: 8px 0; }
.kc-linha { margin-top: 2px; }
.kc-rodape { margin-top: auto; padding-top: 12px; }
.kcard > .kc-rodape { margin-top: auto; }
.kcol-body { gap: 12px; }
.kc-proc { white-space: nowrap; font-size: 12px; letter-spacing: -0.1px; }
/* Kanban: um pouco maior nos dois sentidos (ajuste do Willian, 25/09) */
.kanban-col { width: 280px; }
.kcard { padding: 20px 15px; min-height: 190px; }
/* Kanban: mais espaço vertical na parte de cima do cartão (nome, serviço, chance); rodapé igual (25/09) */
.kcard { min-height: 220px; line-height: 1.6; }
.kc-title { margin-bottom: 6px; }
.kc-sub { margin-top: 4px; }
.kc-acao { margin-top: 14px; }
.kc-proc { margin: 12px 0 10px; }
.kc-linha { margin-top: 8px; }
.kc-rodape { margin-top: auto; padding-top: 12px; }

/* ---------- Jurisprudência (biblioteca) ---------- */
.juri-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.juri-oficial { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--ink-faint); margin: 2px 0 12px; }
.juri-oficial a { color: var(--accent); font-weight: 600; text-decoration: none; margin-right: 10px; }
.juri-oficial a:hover { text-decoration: underline; }
.juri-abas { margin-bottom: 14px; }
.jp-tese { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--ink-soft); padding: 10px 12px; margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.jp-tese strong { color: var(--ink); }
.jp-tese .spacer { flex: 1; }
.jp-tese .fechar-x { margin-left: 0; }
.pc-buscar-julgado { border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: none; color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.pc-buscar-julgado:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.jp-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.jp-form .toolbar-select:first-child { max-width: 300px; }
.jp-termo { flex: 1 1 260px; }
.jp-data { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.jp-data input { height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; }
@media (max-width: 700px) { .jp-form > * { flex: 1 1 100%; max-width: none !important; } }
.juri-item { border-top: 1px solid var(--line); padding: 12px 0; }
.juri-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.juri-ref { font-size: 12px; color: var(--ink-soft); }
.juri-assunto { font-weight: 700; font-size: 13.5px; margin: 6px 0 4px; }
.juri-ementa { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.juri-ementa.aberta { display: block; -webkit-line-clamp: unset; }
.juri-teses { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.juri-acoes { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 0 -10px; }
.juri-acoes .atv-ferr { height: 28px; font-size: 12px; text-decoration: none; }
.juri-panorama { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; background: var(--surface-2); }
.juri-panorama-tit { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.juri-pan-linha { display: grid; grid-template-columns: 120px minmax(0, 1fr) 190px; gap: 10px; align-items: center; font-size: 12px; margin-bottom: 6px; }
.juri-pan-trib { font-weight: 600; }
.juri-pan-barra { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.juri-pan-barra .fav { background: var(--status-good); }
.juri-pan-barra .desf { background: var(--status-critical); }
.juri-pan-barra .neu { background: var(--ink-faint); }
.juri-pan-num { color: var(--ink-soft); }
.field-row.juri-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.juri-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.juri-check input { margin-top: 2px; }
.juri-teses-check { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; max-height: 260px; overflow: auto; }
.juri-teses-check label { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.juri-teses-check small { color: var(--ink-faint); }
@media (max-width: 900px) { .juri-cartoes { grid-template-columns: repeat(2, 1fr); } .field-row.juri-row-3 { grid-template-columns: 1fr; } .juri-pan-linha { grid-template-columns: 80px 1fr; } .juri-pan-num { grid-column: 1 / -1; } }

/* ---------- Criação de peças ---------- */
.pc-passos { display: flex; flex-direction: column; gap: 16px; }
.pc-passo { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.pc-num { width: 26px; height: 26px; border-radius: 50%; background: var(--glow); color: var(--accent); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.pc-teses-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.pc-outros { margin-left: auto; font-size: 12px; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.pc-tese { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.pc-tese.marcada { border-color: var(--accent); background: var(--glow); }
.pc-tese-cab { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pc-tese-cab label { display: flex; gap: 8px; align-items: center; cursor: pointer; flex: 1; }
.pc-ordem { display: flex; gap: 2px; }
.pc-julgados { margin: 6px 0 2px 26px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }
.pc-julgados label { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.pc-julgados.vazio { color: var(--ink-faint); }
.pc-sep { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.pc-editor { max-width: none; }
.pc-editor-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pc-editor-grade aside { position: sticky; top: 12px; }
.pc-editor textarea#pe-texto, .pc-editor textarea#pf-texto { min-height: 62vh; font-family: 'Public Sans', system-ui, sans-serif; font-size: 13.5px; line-height: 1.6; }
.pc-pend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-pend li { font-size: 12px; background: var(--brass-bg); color: var(--brass); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.pc-pend li:hover { filter: brightness(0.95); }
.pc-guia code, .pc-campos code, .field-ajuda code { font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.pc-campos { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.pc-campos button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; cursor: pointer; font-family: inherit; color: var(--ink); }
.pc-campos button:hover { border-color: var(--line); background: var(--surface-2); }
.pc-campos small { font-size: 11px; color: var(--ink-faint); }
@media (max-width: 1000px) { .pc-editor-grade { grid-template-columns: 1fr; } .pc-editor-grade aside { position: static; } }

/* Criação de peças — fluxo "Qual peça você quer escrever?" */
.pc-escolher { max-width: 760px; margin: 0 auto; }
.panel h3.pc-pergunta { display: block; text-align: center; font-family: 'Newsreader', Georgia, serif; font-size: 22px; font-weight: 600; margin: 10px 0 16px; }
.pc-busca { width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.pc-busca:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pc-grupo { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; }
.pc-grupo span { font-weight: 600; opacity: .7; }
.pc-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; margin-bottom: 6px; cursor: pointer; font: inherit; color: var(--ink); }
.pc-item span { flex: 1; font-weight: 600; font-size: 14px; }
.pc-item small { font-size: 11px; color: var(--ink-faint); }
.pc-item i { font-style: normal; color: var(--ink-faint); font-size: 18px; line-height: 1; }
.pc-item:hover { border-color: var(--accent); background: var(--glow); }
.pc-topo { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.pc-topo > div { flex: 1; display: flex; flex-direction: column; }
.pc-topo small { font-size: 12px; color: var(--ink-faint); }
.pc-passo-txt { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.pc-info { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.pc-info .field em { font-style: normal; font-weight: 400; color: var(--ink-faint); }
.pc-info textarea#pc-fatos { min-height: 120px; }
.pc-docs { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; font-size: 13px; }
.pc-docs label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.pc-upload { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1.5px dashed var(--line); border-radius: 8px; padding: 18px; text-align: center; cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.pc-upload input { display: none; }
.pc-upload small { font-size: 11px; color: var(--ink-faint); }
.pc-upload.arrastando, .pc-upload:hover { border-color: var(--accent); background: var(--glow); }
.pc-upload.desligado { cursor: default; color: var(--ink-faint); }
.pc-upload.desligado:hover { border-color: var(--line); background: none; }
.pc-juri { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pc-switch { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pc-switch span { display: flex; flex-direction: column; font-size: 13px; }
.pc-switch small { font-size: 12px; color: var(--ink-soft); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chip { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; color: var(--ink-soft); }
.pc-chip.on { border-color: var(--accent); background: var(--glow); color: var(--accent); font-weight: 600; }
.pc-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.pc-anexos { display: flex; flex-direction: column; gap: 4px; }
.pc-anexos > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px; }
.pc-anexos a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-anexos a:hover { color: var(--accent); }
.pc-bloco { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.pc-bloco-cab { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.pc-bloco-cab span { display: flex; gap: 2px; }
.pc-bloco textarea { width: 100%; box-sizing: border-box; min-height: 70px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; resize: vertical; }
.pc-bloco textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pc-trib-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.juri-multi { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.juri-multi-rot { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
/* Lista de ticar (temas / tribunais) */
.lt { position: relative; display: inline-block; }
.lt-botao { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-width: 190px; max-width: 340px; justify-content: space-between; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-botao.ativo { border-color: var(--accent, #2563eb); font-weight: 600; }
.lt-seta { color: var(--ink-faint); font-size: 11px; }
.lt-painel { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; width: 300px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px; }
.lt-busca, .lt-novo { width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; }
.lt-lista { max-height: 300px; overflow-y: auto; margin: 4px 0; border-top: 1px solid var(--line); padding-top: 4px; }
.lt-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; font-size: 13px; cursor: pointer; }
.lt-item:hover { background: var(--line); }
.lt-item input { margin: 0; flex: none; width: 15px; height: 15px; cursor: pointer; }
.lt-todos { margin-top: 6px; }
.lt-grupo { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; padding: 8px 6px 2px; }
.lt-rodape { display: flex; gap: 6px; }
.lt-rodape .lt-ok { flex: none; padding: 6px 12px; font-size: 12.5px; }

/* ================= Área de trabalho — visual Índigo (29/09/2026) ================= */
/* Faixas de destaque: topo do painel e indicadores (.faixa-destaque, seguem a chave sol/lua desde 30/09/2026) e login (.sempre-escuro). */
.sempre-escuro, .faixa-destaque {
  position: relative; isolation: isolate; color: var(--ink); border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(55% 80% at 78% 0%, color-mix(in srgb, var(--serie-7) 26%, transparent), transparent 70%),
    radial-gradient(45% 70% at 0% 100%, var(--surface-2), transparent 70%),
    var(--bg);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -30px rgba(10, 13, 34, 0.55);
}
.pn-faixa { padding: 22px 22px 20px; display: grid; gap: 16px; margin-bottom: 16px; }
.pn-faixa-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pn-ola { margin: 0; font-family: 'Newsreader', serif; font-size: clamp(24px, 2.6vw, 31px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; }
.pn-data { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.pn-faixa .pill-toggle { border-color: var(--line); }
.pn-faixa .pill-toggle button { background: transparent; color: var(--ink-soft); }
.pn-faixa .pill-toggle button.active { background: var(--accent); color: var(--accent-contrast); }

/* atalhos */
.pn-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-atalho {
  display: inline-flex; align-items: center; gap: 8px; font: 600 13px 'Public Sans', sans-serif; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 13px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s;
}
.pn-atalho svg { color: var(--ouro); flex: none; }
.pn-atalho:hover { border-color: color-mix(in srgb, var(--ouro) 65%, transparent); background: var(--surface-2); transform: translateY(-1px); }

/* alerta de prazo fatal (só aparece quando existe) */
.pn-urgencia {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent); animation: pnBorda 2.2s ease-in-out infinite;
}
@keyframes pnBorda { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 16%, transparent), 0 0 28px -8px var(--warn); } }
.pn-sino { position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--warn); color: #fff; }
.pn-sino svg { animation: pnToca 2.6s ease-in-out infinite; transform-origin: 50% 10%; }
.pn-sino::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--warn); animation: pnOnda 1.8s ease-out infinite; }
@keyframes pnOnda { to { transform: scale(1.6); opacity: 0; } }
@keyframes pnToca { 0%, 45%, 100% { rotate: 0deg; } 5%, 15%, 25% { rotate: 14deg; } 10%, 20%, 30% { rotate: -14deg; } 35% { rotate: 0deg; } }
.pn-urg-txt { display: grid; min-width: 0; }
.pn-urg-txt strong { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; color: var(--warn); }
.pn-urg-txt span { font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.pn-urg-btn { font: 700 13px 'Public Sans', sans-serif; color: #fff; background: var(--warn); border: 0; border-radius: 9px; padding: 9px 15px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.pn-urg-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px var(--warn); }

/* cartões de número: traço colorido, número grande e, ao passar o mouse, fundo em degradê */
.pn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pn-kpi {
  position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 2px;
  padding: 18px 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 75%, transparent);
  border: 1px solid var(--line); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s, background .45s;
}
.pn-kpi .pn-traco { width: 24px; height: 3px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); margin-bottom: 6px; transition: width .35s; }
.pn-kpi .value { font-family: 'Newsreader', serif; font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--c); font-variant-numeric: tabular-nums; transition: color .3s, text-shadow .3s; }
.pn-kpi .label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 0; }
.pn-kpi .pn-sub { margin-top: 2px; }
.pn-kpi .pn-barra { width: 70%; margin-top: 6px; }
.pn-kpi .pn-barra span { background: var(--c); }
.pn-card.pn-kpi:hover {
  transform: translateY(-3px); border-color: var(--c);
  background:
    radial-gradient(1px 1px at 7px 7px, rgba(255, 255, 255, .28), transparent 70%) 0 0 / 14px 14px,
    linear-gradient(160deg, color-mix(in srgb, var(--c) 42%, transparent), color-mix(in srgb, var(--c) 14%, transparent) 55%, color-mix(in srgb, var(--bg) 70%, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 22px 44px -22px var(--c);
}
.pn-kpi:hover .pn-traco { width: 42px; }
.pn-kpi:hover .value { color: var(--ink); text-shadow: 0 0 20px var(--c); }
.pn-kpi[data-alerta] { border-color: color-mix(in srgb, var(--warn) 55%, transparent); animation: pnBorda 2.2s ease-in-out infinite; }

/* prazos e agenda de hoje (fundo normal: claro ou escuro, conforme a chave) */
.pn-dia-grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.pn-hoje h3 { font-family: 'Newsreader', serif; font-size: 18px; font-weight: 600; }
.pn-hoje .pn-ver-mais { margin-left: auto; font-family: 'Public Sans', sans-serif; font-weight: 600; color: var(--accent); }
.pn-prazos, .pn-agenda { display: grid; }
.pn-prazo, .pn-compromisso {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 10px; margin: 0 -10px; border-radius: 10px; border-top: 1px solid var(--line); cursor: pointer;
  transition: background .2s, transform .25s;
}
.pn-prazo:first-child, .pn-compromisso:first-child { border-top-color: transparent; }
.pn-prazo:hover, .pn-compromisso:hover { background: var(--side-active-bg); transform: translateX(3px); border-top-color: transparent; }
.pn-prazo:hover + .pn-prazo, .pn-compromisso:hover + .pn-compromisso { border-top-color: transparent; }
.pn-prazo-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--side-active-bg); color: var(--accent); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pn-prazo:hover .pn-prazo-ico { transform: rotate(-8deg) scale(1.08); }
.pn-prazo-txt { display: grid; min-width: 0; }
.pn-prazo-txt strong { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-prazo-txt span { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-prazo.urgente { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); margin-bottom: 3px; border-top-color: transparent; }
.pn-prazo.urgente .pn-prazo-ico { background: var(--warn); color: #fff; animation: pnIco 1.8s ease-in-out infinite; }
.pn-prazo.urgente .pn-prazo-txt strong { color: var(--warn); }
@keyframes pnIco { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 22%, transparent); } }
.pn-chip { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pn-chip.crit { color: var(--warn); background: var(--warn-bg); }
.pn-chip.warn { color: var(--brass); background: var(--brass-bg); }
.pn-chip.ok { color: var(--ink-soft); background: var(--side-active-bg); }
.pn-chip.tag { color: var(--ink-soft); background: var(--side-active-bg); }
.pn-compromisso { grid-template-columns: 52px minmax(0, 1fr) auto; }
.pn-hora { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.pn-compromisso.passou { opacity: .5; }
.pn-compromisso.agora { background: var(--side-active-bg); box-shadow: inset 3px 0 0 var(--accent); border-top-color: transparent; }

/* indicadores do escritório (faixa escura com abas) */
.pn-bi { margin-top: 16px; padding: 20px 22px 22px; }
.pn-bi-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.pn-bi-cab h2 { margin: 0; font-family: 'Newsreader', serif; font-size: 23px; font-weight: 600; color: var(--ink); }
.pn-bi-cab p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.pn-abas { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.pn-abas button { font: 600 13px 'Public Sans', sans-serif; color: var(--ink-soft); background: transparent; border: 0; border-radius: 7px; padding: 6px 13px; cursor: pointer; position: relative; transition: color .2s, background .2s; }
.pn-abas button:hover { color: var(--ink); }
.pn-abas button[aria-selected="true"] { color: var(--accent-contrast); background: var(--accent); }
.pn-bi .pn-secao-cab { border-bottom-color: var(--line); }
.pn-bi .panel { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.pn-entra { animation: pnEntra .55s cubic-bezier(.2,.8,.2,1); }
@keyframes pnEntra { from { opacity: .25; transform: translateY(8px); } }

@media (max-width: 1100px) { .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pn-dia-grade { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pn-urgencia { grid-template-columns: auto minmax(0, 1fr); } .pn-urg-btn { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) {
  .pn-urgencia, .pn-sino svg, .pn-sino::after, .pn-prazo.urgente .pn-prazo-ico, .pn-kpi[data-alerta], .pn-entra { animation: none; }
}

/* ================= Refino (29/09/2026): papel, cores contidas e efeitos ao passar o mouse ================= */
/* Cores com papel definido: índigo = navegação e ação; dourado = atalhos e destaques; vermelho = só urgência. */
@property --pn-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* Menu lateral: pílula índigo que desliza, ícone que ganha cor e anda um pouco */
.side a { position: relative; transition: background .2s, color .2s, padding-left .25s; }
.side a svg { transition: transform .3s cubic-bezier(.3,1.6,.5,1), color .2s, opacity .2s; }
.side a:hover { background: var(--side-active-bg); color: var(--ink); padding-left: 13px; }
.side a:hover svg { color: var(--accent); opacity: 1; transform: scale(1.14); }
.side a.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); }
.side a.active::before { content: ""; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.side a.active svg { color: var(--accent); opacity: 1; }
.brand-mark { transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
.side .brand:hover .brand-mark { transform: rotate(-14deg) scale(1.06); }

/* Topo: botões respondem com a cor da marca */
.icon-btn { transition: border-color .2s, color .2s, transform .2s, background .2s; }
.icon-btn:hover { border-color: color-mix(in srgb, var(--ink-faint) 55%, var(--line)); color: var(--accent); transform: translateY(-1px); }
.add-btn { transition: transform .2s, box-shadow .2s; }
.add-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px var(--accent); }
.search { transition: border-color .2s, box-shadow .2s; }
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); color: var(--ink); }

/* Faixas escuras: textura discreta de linhas finas (lembra papel timbrado) */
.sempre-escuro::before, .faixa-destaque::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, .018) 22px 23px);
}
html:not([data-app-theme="dark"]) .sempre-escuro { box-shadow: 0 26px 50px -30px rgba(31, 29, 43, .55), 0 2px 0 rgba(255, 255, 255, .6) inset; }

/* Atalhos: fundo sutil, ícone dourado que gira de leve */
.pn-atalho svg { transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.pn-atalho:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--ouro) 16%, transparent), color-mix(in srgb, var(--ouro) 6%, transparent)); color: var(--ink); }
.pn-atalho:hover svg { transform: rotate(-10deg) scale(1.18); }
.pn-atalho:active { transform: translateY(0) scale(.98); }

/* Cartões de número: em repouso, número claro e só o traço colorido; ao passar o mouse, borda
   luminosa que gira, fundo com um véu da cor do cartão e o número ganha a cor. */
.pn-kpi { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.pn-kpi .value { color: var(--ink); }
.pn-kpi[data-alerta] .value { color: var(--warn); }
.pn-kpi::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--pn-ang), transparent 0 55%, var(--c) 72%, var(--ouro) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity .35s; animation: pnGira 3.2s linear infinite;
}
@keyframes pnGira { to { --pn-ang: 360deg; } }
.pn-card.pn-kpi:hover {
  transform: translateY(-4px); border-color: transparent;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 65%),
    color-mix(in srgb, var(--surface) 75%, transparent);
  box-shadow: 0 24px 40px -24px var(--c);
}
.pn-kpi:hover::before { opacity: 1; }
.pn-kpi:hover .value { color: var(--c); text-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent); }
.pn-kpi:hover .label { color: var(--ink); }

/* Pílula "Meus números / Escritório" e abas dos indicadores: transição suave */
.pill-toggle button, .pn-abas button { transition: background .25s, color .25s; }
.pn-abas button[aria-selected="true"] { box-shadow: 0 6px 16px -8px var(--accent); }

/* Quadros claros (prazos, agenda, publicações, calendário): levantam de leve ao passar o mouse */
.pn-hoje, .pn-pub, .pn-cal { transition: box-shadow .3s, border-color .3s, transform .3s; }
.pn-hoje:hover, .pn-pub:hover, .pn-cal:hover { border-color: color-mix(in srgb, var(--ink-faint) 25%, var(--line)); box-shadow: 0 18px 36px -26px rgba(31, 29, 43, .35); }
.pn-hoje h3, .pn-pub h3 { font-family: 'Newsreader', serif; font-size: 18px; font-weight: 600; }
.pn-prazo-ico { transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .2s, color .2s; }
.pn-prazo:hover .pn-prazo-ico { background: var(--accent); color: var(--accent-contrast); }
.pn-prazo.urgente:hover .pn-prazo-ico { background: var(--warn); color: #fff; }
.pn-compromisso:hover .pn-hora { color: var(--ouro); }
.pn-hora { transition: color .2s; }
.pn-ver-mais { transition: color .2s, transform .2s; display: inline-block; }
.pn-ver-mais:hover { color: var(--accent); transform: translateX(3px); }
.pn-lista-item { transition: background .2s, padding-left .25s; border-radius: 8px; }
.pn-lista-item:hover { background: var(--side-active-bg); padding-left: 6px; }
.pn-dia:hover { background: var(--side-active-bg); color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .pn-kpi::before { animation: none; } }
.pn-hoje h3 .pn-alerta-qtd, .pn-pub h3 .pn-alerta-qtd { font-family: 'Public Sans', sans-serif; }

/* ================= Gráficos do BI e fundo papel mais vivo (29/09/2026) ================= */
:root { --positivo: #1c8a5e; }
html[data-app-theme="dark"], .sempre-escuro { --positivo: #4fd1a0; }

/* ---------- Fundo: papel com luz índigo e dourada que se move bem devagar ---------- */
.main { position: relative; isolation: isolate; }
.main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 45% at 85% 8%, color-mix(in srgb, var(--serie-1) 7%, transparent), transparent 70%),
    radial-gradient(32% 40% at 20% 95%, color-mix(in srgb, var(--ouro) 12%, transparent), transparent 70%),
    radial-gradient(28% 35% at 55% 55%, color-mix(in srgb, var(--serie-3) 5%, transparent), transparent 70%);
  background-size: 140% 140%;
  animation: fundoDeriva 38s ease-in-out infinite alternate;
}
@keyframes fundoDeriva {
  0% { background-position: 0% 0%, 100% 100%, 50% 50%; }
  50% { background-position: 30% 20%, 70% 80%, 30% 70%; }
  100% { background-position: 10% 40%, 90% 60%, 70% 30%; }
}
.side { background: linear-gradient(180deg, var(--side-bg) 0%, color-mix(in srgb, var(--ouro) 4%, var(--side-bg)) 100%); }

/* Quadros claros: fio índigo→dourado no alto e fundo papel com leve profundidade */
.pn-dia-grade .panel, .pn-grade .panel, .bi-painel, .bi-kpi { position: relative; overflow: hidden; }
.pn-dia-grade .panel::before, .pn-grade .panel::before, .bi-conteudo .bi-painel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--serie-1), var(--serie-3) 55%, var(--ouro));
  opacity: .55;
}
html:not([data-app-theme="dark"]) .pn-dia-grade .panel, html:not([data-app-theme="dark"]) .pn-grade .panel, html:not([data-app-theme="dark"]) .bi-conteudo .panel, html:not([data-app-theme="dark"]) .bi-kpi {
  background: linear-gradient(180deg, #fffefb 0%, #fbf8f1 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 32px -26px rgba(45, 38, 25, .35);
}

/* Faixas escuras: brilho que passeia devagar pelo fundo */
.pn-faixa::after, .pn-bi::after {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: .55;
  background:
    radial-gradient(22% 30% at 30% 40%, color-mix(in srgb, var(--serie-7) 38%, transparent), transparent 70%),
    radial-gradient(18% 26% at 70% 60%, color-mix(in srgb, var(--ouro) 22%, transparent), transparent 70%);
  animation: faixaBrilho 26s ease-in-out infinite alternate;
}
@keyframes faixaBrilho { 0% { transform: translate(-6%, -4%) rotate(0deg); } 100% { transform: translate(8%, 5%) rotate(12deg); } }

/* ---------- Gráficos ---------- */
.bi-painel h3 { font-family: 'Newsreader', serif; font-size: 16.5px; font-weight: 600; }
.bi-resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 12px; color: var(--ink-faint); margin: -4px 0 10px; }
.bi-resumo b { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; color: var(--ink); margin-right: 2px; }
.bi-res-var { font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); }
.bi-res-var.sobe { color: var(--positivo); background: color-mix(in srgb, var(--positivo) 12%, transparent); }
.bi-res-var.desce { color: var(--warn); background: var(--warn-bg); }
.bi-grade { stroke: var(--line); stroke-dasharray: 2 4; }
.bi-grade.base { stroke-dasharray: none; }
.bi-valor { font-family: 'Public Sans', sans-serif; font-size: 10.5px; font-weight: 600; fill: var(--ink-soft); pointer-events: none; }
.bi-media { stroke: var(--ouro); stroke-width: 1.3; stroke-dasharray: 5 4; opacity: .85; pointer-events: none; }
.bi-media-txt { font-family: 'Public Sans', sans-serif; font-size: 10.5px; font-weight: 700; fill: var(--ouro); pointer-events: none; }

/* colunas: crescem ao abrir; no mouse, a coluna escolhida acende e as outras recuam */
.bi-marca { transform-box: fill-box; transform-origin: 50% 100%; animation: biCresce .8s cubic-bezier(.2,.8,.2,1) both; transition: opacity .2s, filter .2s; }
@keyframes biCresce { from { transform: scaleY(0); } }
.bi-svg-col:has(.bi-col:hover) .bi-marca { opacity: .38; }
.bi-svg-col .bi-col:hover .bi-marca { opacity: 1; filter: brightness(1.12) drop-shadow(0 4px 8px rgba(0, 0, 0, .18)); }
.bi-col .bi-alvo:hover, .bi-alvo:hover { fill: var(--side-active-bg); opacity: .45; }

/* linhas: a curva se desenha ao abrir; ponto de leitura no mouse */
.bi-area { opacity: 1; animation: biSurge 1.2s ease both; }
@keyframes biSurge { from { opacity: 0; } }
.bi-traco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: biDesenha 1.4s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes biDesenha { to { stroke-dashoffset: 0; } }
.bi-ponto { opacity: 0; transition: opacity .15s; }
.bi-cruz-alvo:hover .bi-ponto { opacity: 1; }
.bi-ponto-final { animation: biPulsa 2.4s ease-in-out 1.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes biPulsa { 50% { transform: scale(1.35); } }

/* barras horizontais: degradê, crescem ao abrir, percentual discreto */
.bi-bh-linha { grid-template-columns: minmax(90px, 34%) 1fr auto; transition: background .2s; }
.bi-bh-trilho { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.bi-bh-barra { border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--cor) 45%, transparent), var(--cor)); transform-origin: left; animation: biCresceX .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes biCresceX { from { transform: scaleX(0); } }
.bi-bh-linha:hover .bi-bh-barra { filter: brightness(1.1); box-shadow: 0 0 12px color-mix(in srgb, var(--cor) 45%, transparent); }
.bi-bh-valor { min-width: 64px; }
.bi-bh-valor small { margin-left: 6px; font-size: 10.5px; font-weight: 500; color: var(--ink-faint); }

/* rosca: gira ao abrir, a fatia se destaca no mouse, legenda com barrinha */
.bi-rosca { animation: biGira .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes biGira { from { transform: rotate(-90deg) scale(.85); opacity: .3; } }
.bi-rosca-fundo { stroke: var(--surface-2) !important; }
.bi-fatia { transform-origin: 80px 80px; transition: transform .25s cubic-bezier(.3,1.6,.5,1), filter .2s; cursor: pointer; }
.bi-fatia:hover { transform: scale(1.06); filter: brightness(1.1); }
.bi-rosca-leg li { grid-template-columns: auto 1fr auto 40px; row-gap: 4px; }
.bi-rosca-barra { grid-column: 1 / -1; display: block; height: 3px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bi-rosca-barra b { display: block; height: 100%; border-radius: 3px; }

/* cartões de número do BI: traço colorido e leve elevação no mouse */
.bi-kpi { transition: transform .25s, box-shadow .25s, border-color .25s; }
.bi-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink-faint) 35%, var(--line)); }
.bi-kpi-traco { display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--serie-1); margin-bottom: 8px; transition: width .3s; }
.bi-kpi.k-dinheiro .bi-kpi-traco { background: var(--cor-receita); }
.bi-kpi.k-custo .bi-kpi-traco { background: var(--serie-4); }
.bi-kpi.k-despesa .bi-kpi-traco { background: var(--cor-despesa); }
.bi-kpi.k-contrato .bi-kpi-traco { background: var(--serie-2); }
.bi-kpi.k-taxa .bi-kpi-traco { background: var(--serie-3); }
.bi-kpi:hover .bi-kpi-traco { width: 38px; }
.bi-kpi.alerta .bi-kpi-traco { background: var(--warn); }
.bi-kpi.atencao .bi-kpi-traco { background: var(--ouro); }
.bi-kpi .value { font-family: 'Newsreader', serif; }

/* dica que segue o mouse: vidro, com fio índigo */
.bi-tip { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 10px; border-left: 3px solid var(--accent); box-shadow: 0 14px 30px -12px rgba(20, 18, 40, .35); padding: 9px 12px; }

@media (prefers-reduced-motion: reduce) {
  .main::before, .pn-faixa::after, .pn-bi::after, .bi-marca, .bi-area, .bi-traco, .bi-ponto-final, .bi-bh-barra, .bi-rosca { animation: none; }
  .bi-traco { stroke-dashoffset: 0; }
}
/* BI: duas colunas largas (gráficos maiores e legíveis); uma coluna em telas estreitas */
.bi-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .bi-grade-2 { grid-template-columns: 1fr; } }

/* ================= Versão calma para as telas de trabalho (29/09/2026) ================= */
/* Peças reaproveitáveis: .pg-cab (título da tela), .pg-cartao (cartão de número com traço), .pg-fio (quadro com fio índigo→dourado). */
.pg-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 0 16px; }
.pg-cab h1 { margin: 0; font-family: 'Newsreader', serif; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; }
.pg-cab p { margin: 4px 0 0; font-size: 13px; color: var(--ink-faint); }

/* Todos os quadros no modo claro: tom de papel com leve profundidade */
html:not([data-app-theme="dark"]) .panel:not(.sempre-escuro .panel) {
  background: linear-gradient(180deg, #fffefb 0%, #fbf8f1 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 32px -26px rgba(45, 38, 25, .35);
}
.pg-fio { position: relative; }
.pg-fio::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, var(--serie-1), var(--serie-3) 55%, var(--ouro)); opacity: .55;
}

/* Cartões de número das telas de trabalho: traço colorido, número serifado, sobe de leve no mouse */
.pg-cartao { position: relative; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s, background .3s; }
.pg-traco { display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--c, var(--accent)); margin-bottom: 9px; transition: width .3s; }
.pg-cartao .value { font-family: 'Newsreader', serif; }
button.pg-cartao:hover, .pg-cartao:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c, var(--accent)) 45%, var(--line)); box-shadow: 0 18px 30px -24px var(--c, var(--accent)); }
.pg-cartao:hover .pg-traco { width: 38px; }
.pg-cartao.ativa { outline: none; border-color: var(--c, var(--accent)); background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--accent)) 9%, var(--surface)), var(--surface)); }
.pg-cartao.ativa .pg-traco { width: 38px; }

/* ---------- Meu dia ---------- */
.atv-prod-barra { background: var(--surface-2); }
.atv-prod-barra span { background: linear-gradient(90deg, color-mix(in srgb, var(--ouro) 55%, var(--cor-receita)), var(--ouro)); transform-origin: left; animation: biCresceX .9s cubic-bezier(.2,.8,.2,1) both; }
.atv-prod-leg i.c1 { background: var(--ouro); }
.atv-prod-leg i.c2 { background: var(--surface-2); border: 1px solid var(--line); opacity: 1; }

.atv-secao-cab { font-family: 'Newsreader', serif; font-size: 16px; font-weight: 600; padding: 13px 2px; gap: 10px; transition: color .2s; }
.atv-secao-cab:hover { color: var(--accent); }
.atv-secao-cab .kcount { font-family: 'Public Sans', sans-serif; }
.atv-secao-marca { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.atv-secao[data-secao="Prazo fatal"] .atv-secao-marca, .atv-secao[data-secao="Urgentes"] .atv-secao-marca { background: var(--warn); }
.atv-secao[data-secao="Intimações"] .atv-secao-marca, .atv-secao[data-secao="Importantes"] .atv-secao-marca { background: var(--ouro); }
.atv-secao[data-secao="Não lidas"] .atv-secao-marca { background: var(--accent); }
.atv-secao[data-secao="Prazo fatal"]:not(.vazia) .atv-secao-marca { animation: pnIco 1.8s ease-in-out infinite; }
.atv-secao[data-secao="Prazo fatal"]:not(.vazia) .atv-secao-cab { color: var(--warn); }
.atv-secao.vazia .atv-secao-marca { opacity: .35; }

.atv-item { position: relative; transition: background .2s, box-shadow .2s, transform .25s, opacity .3s; }
.atv-item:hover { background: var(--side-active-bg); box-shadow: inset 3px 0 0 var(--accent); transform: translateX(2px); }
.atv-secao[data-secao="Prazo fatal"] .atv-item { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); margin-bottom: 4px; }
.atv-secao[data-secao="Prazo fatal"] .atv-item:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.atv-item.saindo { opacity: 0; transform: translateX(28px); }
.atv-item .check-concluido { transition: transform .2s; }
.atv-item .check-concluido:hover { transform: scale(1.15); }
.atv-item .btn-ghost { transition: border-color .2s, color .2s, background .2s; }
.atv-item .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.atv-ic { background: color-mix(in srgb, var(--ouro) 16%, transparent); color: var(--ouro); }
.atv-ferr, .atv-icone { transition: background .2s, color .2s; }
.atv-busca { transition: border-color .2s, box-shadow .2s; }
.atv-busca:focus-within { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
#atv-nova { transition: transform .2s, box-shadow .2s; }
#atv-nova:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px var(--accent); }
@media (prefers-reduced-motion: reduce) { .atv-secao[data-secao="Prazo fatal"] .atv-secao-marca, .atv-prod-barra span { animation: none; } }
.atv-metricas .metric.pg-cartao { justify-content: flex-start; }
.atv-metricas .pg-cartao .value { font-size: 32px; line-height: 1.1; }

/* ================= Acabamento geral de todas as telas (29/09/2026) ================= */
/* Fundo "Chuvisco" (js/fundo.js) */
canvas.chuvisco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
canvas.chuvisco-pagina { position: fixed; inset: auto; top: 0; left: 208px; height: 100vh; }

/* Título da tela no topo (some na Área de trabalho e no Meu dia, que já têm cabeçalho próprio) */
.topo-titulo { margin: 0 6px 0 0; font-family: 'Newsreader', serif; font-size: 22px; font-weight: 600; color: var(--ink); white-space: nowrap; letter-spacing: -0.01em; }
.topo-titulo:empty { display: none; }

/* ---------- Botões ---------- */
.btn-primary, .btn-receita, .btn-despesa, .add-btn {
  transition: transform .18s, box-shadow .2s, filter .2s; position: relative; overflow: hidden;
}
.btn-primary:hover, .btn-receita:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px var(--accent); filter: brightness(1.06); }
.btn-despesa:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px var(--warn); filter: brightness(1.06); }
.btn-primary:active, .btn-receita:active, .btn-despesa:active, .add-btn:active { transform: translateY(0) scale(.98); }
.btn-primary::after, .add-btn::after, .btn-receita::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s;
}
.btn-primary:hover::after, .add-btn:hover::after, .btn-receita:hover::after { left: 120%; }
.btn-primary:disabled { opacity: .55; transform: none; box-shadow: none; cursor: default; }
.btn-ghost, .btn-transferencia { transition: border-color .2s, color .2s, background .2s, transform .18s; }
.btn-ghost:hover, .btn-transferencia:hover { border-color: color-mix(in srgb, var(--ink-faint) 55%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.btn-ghost:active, .btn-transferencia:active { transform: scale(.98); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Campos ---------- */
.field input, .field select, .field textarea, .toolbar-select, .toolbar-input, .cfg-add input {
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:hover, .field select:hover, .field textarea:hover, .toolbar-select:hover, .toolbar-input:hover { border-color: color-mix(in srgb, var(--ink-faint) 40%, var(--line)); }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar-select:focus, .toolbar-input:focus, .cfg-add input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow);
}
.field > span { letter-spacing: .01em; }

/* ---------- Quadros e títulos ---------- */
.panel > h3 { font-family: 'Newsreader', serif; font-size: 16.5px; font-weight: 600; letter-spacing: -0.005em; }
.panel { transition: border-color .3s, box-shadow .3s; }

/* ---------- Tabelas ---------- */
table.list th { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
table.list tbody tr td { transition: background .15s; }
table.list tbody tr:hover td { background: var(--side-active-bg); }
table.list tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Etiquetas e prazos ---------- */
.tag { border-radius: 999px; padding: 2px 9px; }
.due { transition: transform .2s; }
tr:hover .due, .atv-item:hover .due { transform: scale(1.04); }

/* ---------- Abas ---------- */
.fase-tabs span, .panel-tabs span, .cfg-menu a { transition: color .2s, border-color .25s, background .2s; }
.fase-tabs span:hover, .panel-tabs span:hover { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--ink-faint) 60%, transparent); }
.fase-tabs span.active, .panel-tabs span.active { border-bottom-width: 2px; }
.pill-toggle button { transition: background .25s, color .25s; }
.pill-toggle button:not(.active):hover { color: var(--accent); }
.cfg-menu a:hover { background: var(--side-active-bg); }
.cfg-menu a.active { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Cartões de número em todas as telas (traço colorido) ---------- */
.metric:not(.pg-cartao):not(.pn-kpi):not(.bi-kpi) { position: relative; transition: transform .25s, border-color .25s, box-shadow .25s; }
.metric:not(.pg-cartao):not(.pn-kpi):not(.bi-kpi)::before { content: ""; display: block; width: 22px; height: 3px; border-radius: 3px; background: var(--traco, var(--accent)); margin-bottom: 9px; transition: width .3s; }
.metric:not(.pg-cartao):not(.pn-kpi):not(.bi-kpi):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink-faint) 35%, var(--line)); box-shadow: 0 18px 30px -24px var(--accent); }
.metric:not(.pg-cartao):not(.pn-kpi):not(.bi-kpi):hover::before { width: 38px; }
.fin-metrics .metric:nth-child(2) { --traco: var(--positivo); } .fin-metrics .metric:nth-child(3) { --traco: var(--warn); }
.fin-metrics .metric:nth-child(4) { --traco: var(--ouro); }

/* ---------- Kanban ---------- */
.kanban-col { background: color-mix(in srgb, var(--side-bg) 80%, transparent); }
.kcol-head { font-family: 'Newsreader', serif; font-size: 14.5px; font-weight: 600; }
.kcard { transition: transform .2s, box-shadow .2s, border-color .2s; }
.kcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink-faint) 40%, var(--line)); box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .35); }
.add-coluna-btn { transition: border-color .2s, color .2s; }
.add-coluna-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Listas de contas, menus suspensos, notificações ---------- */
.conta-item { transition: transform .2s, border-color .2s; }
.conta-item:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--ink-faint) 35%, var(--line)); }
.add-menu { border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(20, 18, 40, .35); animation: menuAbre .16s ease-out; }
@keyframes menuAbre { from { opacity: 0; transform: translateY(-4px); } }
.add-menu div { transition: background .15s, color .15s, padding-left .2s; }
.add-menu div:hover { color: var(--accent); padding-left: 13px; }

/* Caixas de seleção e chaves na cor da marca */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

@media (max-width: 900px) { canvas.chuvisco-pagina { left: 0; } .topo-titulo { font-size: 18px; } }

/* ================= Sem espaços vazios + barras de rolagem (29/09/2026) ================= */
/* Menu lateral fixo: ao rolar a página ele acompanha, sem deixar a coluna vazia */
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; }

/* Barras de rolagem finas, na cor da marca */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-faint) 55%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-faint) 45%, transparent); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink-faint) 75%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }

/* Atalhos ocupam a linha inteira, em partes iguais */
.pn-atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.pn-atalho { justify-content: center; }

/* Quadros lado a lado com a mesma altura; o conteúdo ocupa o quadro todo */
.pn-hoje, .pn-pub, .pn-cal { display: flex; flex-direction: column; }
.pn-hoje .pn-prazos, .pn-hoje .pn-agenda { max-height: 340px; overflow-y: auto; }
.pn-vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 18px 12px; min-height: 180px; }
.pn-vazio-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ouro) 16%, transparent), color-mix(in srgb, var(--ouro) 6%, transparent)); color: var(--ink); }
.pn-vazio strong { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; color: var(--ink); }
.pn-vazio span { font-size: 12.5px; color: var(--ink-faint); max-width: 280px; }
.pn-vazio .btn-ghost { margin-top: 10px; }
.pn-pub .pn-lista { flex: 1; max-height: 330px; overflow-y: auto; }
.pn-cal .pn-cal-link { margin-top: auto; padding-top: 12px; }

/* Gráficos: o quadro estica e o gráfico fica centralizado na altura (sem sobra embaixo) */
.pn-aba-conteudo .panel, .bi-painel { display: flex; flex-direction: column; }
.pn-aba-conteudo .panel > .bi-svg, .bi-painel > .bi-svg, .bi-painel > .bi-rosca-wrap, .bi-painel > .bi-barrash, .pn-aba-conteudo .panel > .bi-barrash { margin-top: auto; margin-bottom: auto; }
.pn-aba-conteudo .panel > .empty-state, .bi-painel > .empty-state { margin: auto 0; }
.pn-aba-conteudo .pn-grade-2, .pn-aba-conteudo .pn-grade-3 { align-items: stretch; }
.pn-hoje .pn-prazos, .pn-hoje .pn-agenda, .pn-pub .pn-lista { overflow-x: hidden; padding-inline: 10px; margin-inline: -10px; }
.pn-atalho { white-space: nowrap; }
.side { scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.side a .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================== Menu lateral: ícones em destaque (30/09/2026) ==================
   Ícone num quadradinho índigo claro; ao passar o mouse o quadradinho enche de índigo e o
   desenho faz um movimento próprio (engrenagem gira, balança oscila, megafone "fala"…).
   Texto em seminegrito e mais escuro para ler melhor; item aberto em negrito. */
.side a { gap: 10px; padding: 5px 10px 5px 6px; font-weight: 600; color: color-mix(in srgb, var(--ink) 82%, var(--side-bg)); letter-spacing: .005em; }
.side a.active { font-weight: 700; color: var(--accent); }
.side a svg {
  width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 9px; overflow: visible;
  opacity: 1; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background .25s, color .25s, box-shadow .25s, transform .3s cubic-bezier(.3,1.6,.5,1);
}
[data-app-theme="dark"] .side a svg { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.side a:hover { padding-left: 9px; }
.side a:hover svg, .side a.active svg {
  color: #fff; transform: translateY(-1px);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
[data-app-theme="dark"] .side a:hover svg, [data-app-theme="dark"] .side a.active svg { color: #0f1216; }
.side a svg > * { transform-box: view-box; transform-origin: 12px 12px; }

@keyframes mk-pop { 0%,100% { transform: scale(1); } 45% { transform: scale(.6); } 75% { transform: scale(1.12); } }
@keyframes mk-balanco { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } }
@keyframes mk-risco { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes mk-pulo { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-3.5px); } 70% { transform: translateY(1px); } }
@keyframes mk-onda { 0% { opacity: 0; transform: translateX(-3px); } 60% { opacity: 1; transform: translateX(1px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes mk-fala { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 55% { transform: rotate(6deg); } }
@keyframes mk-aceno { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } }
@keyframes mk-tampa { 0%,100% { transform: translate(0,0) rotate(0); } 45% { transform: translate(-1px,-3.5px) rotate(-10deg); } }
@keyframes mk-esticar { 0%,100% { transform: scale(1,1); } 30% { transform: scale(1.12,.86); } 60% { transform: scale(.94,1.1); } }
@keyframes mk-folha { 0%,100% { transform: rotate(0) translateY(0); } 35% { transform: rotate(-7deg) translateY(-1px); } 70% { transform: rotate(4deg); } }
@keyframes mk-escrever { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-2px,1.5px); } 50% { transform: translate(1px,-1px); } 75% { transform: translate(-1px,1px); } }
@keyframes mk-virar { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes mk-crescer { 0% { transform: scaleY(.25); } 70% { transform: scaleY(1.12); } 100% { transform: scaleY(1); } }
@keyframes mk-girar { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@keyframes mk-elo-a { 0%,100% { transform: translate(0,0); } 45% { transform: translate(1.8px,-1.8px); } }
@keyframes mk-elo-b { 0%,100% { transform: translate(0,0); } 45% { transform: translate(-1.8px,1.8px); } }

.side a:hover svg > * { animation-duration: .7s; animation-timing-function: cubic-bezier(.3,1.3,.5,1); animation-fill-mode: both; }
/* Área de trabalho: os quadradinhos pulam um depois do outro */
.side a[data-view="painel"]:hover svg > * { transform-box: fill-box; transform-origin: center; animation-name: mk-pop; }
.side a[data-view="painel"]:hover svg > :nth-child(2) { animation-delay: .07s; }
.side a[data-view="painel"]:hover svg > :nth-child(3) { animation-delay: .14s; }
.side a[data-view="painel"]:hover svg > :nth-child(4) { animation-delay: .21s; }
/* Agenda: o calendário balança pendurado */
.side a[data-view="agenda"]:hover svg > * { transform-origin: 12px 3px; animation-name: mk-balanco; animation-duration: .9s; }
/* Meu dia: o visto é desenhado */
.side a[data-view="atividades"]:hover svg > :first-child { stroke-dasharray: 20; animation: mk-risco .55s ease-out both; }
/* Kanban: as colunas pulam em sequência */
.side a[data-view="kanban"]:hover svg > * { animation-name: mk-pulo; }
.side a[data-view="kanban"]:hover svg > :nth-child(2) { animation-delay: .08s; }
.side a[data-view="kanban"]:hover svg > :nth-child(3) { animation-delay: .16s; }
/* Marketing: o megafone "fala" e as ondas saem */
.side a[data-view="marketing"]:hover svg > :first-child { transform-origin: 6px 12px; animation-name: mk-fala; }
.side a[data-view="marketing"]:hover svg > :nth-child(2) { animation-name: mk-onda; animation-delay: .1s; }
.side a[data-view="marketing"]:hover svg > :nth-child(3) { animation-name: mk-onda; animation-delay: .22s; }
/* Contatos: a pessoa acena com a cabeça */
.side a[data-view="contatos"]:hover svg > :first-child { animation-name: mk-aceno; }
.side a[data-view="contatos"]:hover svg > :nth-child(2) { animation-name: mk-pulo; animation-delay: .05s; }
/* Processos: a tampa da caixa abre */
.side a[data-view="processos"]:hover svg > :first-child { transform-origin: 3px 7px; animation-name: mk-tampa; animation-duration: .8s; }
/* Requerimentos INSS: o prédio se estica */
.side a[data-view="inss"]:hover svg > * { transform-origin: 12px 21px; animation-name: mk-esticar; }
/* Publicações: a folha vira de leve */
.side a[data-view="publicacoes"]:hover svg > * { transform-origin: 6px 20px; animation-name: mk-folha; animation-duration: .8s; }
/* Criação de peças: a caneta escreve */
.side a[data-view="pecas"]:hover svg > :nth-child(3) { animation-name: mk-escrever; animation-duration: .8s; }
/* Jurisprudência: a balança oscila */
.side a[data-view="jurisprudencia"]:hover svg > * { transform-origin: 12px 5px; animation-name: mk-balanco; animation-duration: 1s; }
/* Financeiro: a moeda gira */
.side a[data-view="financeiro"]:hover svg > * { animation-name: mk-virar; animation-duration: .7s; animation-timing-function: ease-in-out; }
/* Relatórios e BI: as barras crescem */
.side a[data-view="relatorios"]:hover svg > :nth-child(2) { transform-origin: 12px 17px; animation-name: mk-crescer; }
/* Configurações: a engrenagem gira */
.side a[data-view="configuracoes"]:hover svg > * { animation: mk-girar .9s cubic-bezier(.4,1.4,.5,1) both; }
/* Integrações: os elos se afastam e se juntam */
.side a[data-view="integracoes"]:hover svg > :first-child { animation-name: mk-elo-a; }
.side a[data-view="integracoes"]:hover svg > :nth-child(2) { animation-name: mk-elo-b; }

@media (prefers-reduced-motion: reduce) {
  .side a:hover svg > * { animation: none !important; }
  .side a svg { transition: none; }
}

/* ================== Tela Marketing (30/09/2026) ================== */
.mkt-topo { align-items: flex-end; }
.mkt-topo input[type="month"] { min-width: 150px; }
.mkt-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.mkt-toolbar .spacer { flex: 1; }
.mkt-nota { font-size: 12px; color: var(--ink-faint); margin: 10px 2px 0; line-height: 1.5; }

.mkt-orcamento { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px 14px; margin-bottom: 14px; box-shadow: var(--lift); }
.mkt-orc-txt { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.mkt-orc-txt strong { color: var(--ink); }
.mkt-orc-agencia { color: var(--ink-faint); font-size: 12px; margin-left: 6px; }
.mkt-orc-txt a { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; }
.mkt-orc-trilho { height: 8px; border-radius: 6px; background: var(--surface-2); margin-top: 10px; overflow: hidden; }
.mkt-orc-trilho span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--serie-4) 60%, transparent), var(--serie-4)); animation: mkt-encher .9s cubic-bezier(.3,1,.4,1) both; transform-origin: left; }
.mkt-orcamento.atencao .mkt-orc-trilho span { background: linear-gradient(90deg, var(--ouro), color-mix(in srgb, var(--ouro) 60%, #fff)); }
.mkt-orcamento.estourou .mkt-orc-trilho span { background: var(--warn); }
.mkt-orcamento.estourou .mkt-orc-txt b { color: var(--warn); }
@keyframes mkt-encher { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mkt-config { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-top: 12px; }
.mkt-config[hidden] { display: none; }

.mkt-conexoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; }
.mkt-conexoes p { flex: 1 1 280px; margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.mkt-conexao { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.mkt-conexao-nome { font-weight: 600; font-size: 13px; color: var(--ink); display: flex; flex-direction: column; }
.mkt-conexao-nome small { font-weight: 400; font-size: 11px; color: var(--ink-faint); }
.mkt-selo-off { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: var(--surface-2); color: var(--ink-faint); }

.mkt-tabela-rolagem { overflow-x: auto; }
.mkt-tabela td, .mkt-tabela th { white-space: nowrap; }
.mkt-tabela tr[data-id], tr[data-proc] { cursor: pointer; }
.mkt-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.mkt-plat { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.mkt-plat-meta { background: color-mix(in srgb, #0668e1 12%, transparent); color: #0a5bc4; }
.mkt-plat-google { background: var(--brass-bg); color: var(--ouro); }
.mkt-plat-outra { background: var(--surface-2); color: var(--ink-soft); }
.mkt-status { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--surface-2); color: var(--ink-soft); }
.mkt-status-ativa { background: color-mix(in srgb, var(--status-good) 14%, transparent); color: var(--status-good); }
.mkt-status-pausada { background: var(--brass-bg); color: var(--ouro); }
.mkt-total td { border-top: 2px solid var(--line); background: var(--surface-2); }
.mkt-parado { color: var(--ouro); font-weight: 700; }

.mkt-form-sec { font-family: 'Newsreader', serif; font-size: 16px; font-weight: 600; margin: 8px 0 -2px; color: var(--ink); }
.field-row.mkt-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mkt-compliance { border: 1px solid color-mix(in srgb, var(--ouro) 45%, var(--line)); background: var(--brass-bg); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.mkt-arquivos { display: flex; flex-direction: column; gap: 6px; }
.mkt-arquivo { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; }
.mkt-arquivo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-arquivo small { color: var(--ink-faint); margin-left: 6px; }
.mkt-arquivo a { font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: none; }
.mkt-arquivo a.mkt-arq-excluir { color: var(--warn); }
.mkt-upload { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 1.5px dashed color-mix(in srgb, var(--ink-faint) 45%, var(--line)); border-radius: 10px; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .2s; }
.mkt-upload:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mkt-upload small { color: var(--ink-faint); font-weight: 400; }

/* Quadro dos criativos (etapas lado a lado) */
.mkt-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.mkt-coluna { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 260px; display: flex; flex-direction: column; transition: border-color .2s, background .2s; }
.mkt-coluna.sobre { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.mkt-coluna-cab { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 2px 4px 8px; }
.mkt-coluna-cab b { font-size: 11px; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 9px; background: var(--surface); color: var(--ink-soft); }
.mkt-coluna[data-etapa="Publicado"] .mkt-coluna-cab { color: var(--status-good); }
.mkt-coluna[data-etapa="Reprovado"] .mkt-coluna-cab { color: var(--ink-faint); }
.mkt-coluna-corpo { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mkt-coluna-vazia { color: var(--ink-faint); text-align: center; padding: 18px 0; font-size: 12px; }
.mkt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; cursor: grab; box-shadow: var(--lift); transition: transform .2s, box-shadow .2s, border-color .2s; }
.mkt-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink-faint) 40%, var(--line)); box-shadow: var(--shadow); }
.mkt-card.arrastando { opacity: .45; }
.mkt-card-tipo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.mkt-card-titulo { font-size: 13px; font-weight: 600; color: var(--ink); margin: 3px 0 7px; line-height: 1.3; }
.mkt-card-pe { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--ink-faint); }
.mkt-ok { color: var(--status-good); font-weight: 700; }
.mkt-pendente { color: var(--ouro); font-weight: 700; }
.mkt-card-camp { font-size: 11px; color: var(--ink-soft); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }

/* Funil */
.mkt-funil { display: flex; flex-direction: column; gap: 12px; margin: auto 0; }
.mkt-funil-linha { display: grid; grid-template-columns: 170px 1fr 120px; align-items: center; gap: 10px; font-size: 13px; }
.mkt-funil-nome { color: var(--ink-soft); }
.mkt-funil-trilho { height: 22px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.mkt-funil-trilho span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; animation: mkt-encher .8s cubic-bezier(.3,1,.4,1) both; }
.mkt-funil-linha:last-child .mkt-funil-trilho span { background: linear-gradient(90deg, var(--ouro), color-mix(in srgb, var(--ouro) 55%, #fff)); }
.mkt-funil-valor b { font-family: 'Newsreader', serif; font-size: 18px; color: var(--ink); }
.mkt-funil-valor small { display: block; font-size: 10.5px; color: var(--ink-faint); }

@media (max-width: 800px) {
  .mkt-config { grid-template-columns: 1fr; }
  .field-row.mkt-row-3 { grid-template-columns: 1fr; }
  .mkt-funil-linha { grid-template-columns: 1fr; gap: 4px; }
}

/* Menu um pouco mais largo para caber os ícones maiores sem cortar o nome (ex.: Requerimentos INSS) */
@media (min-width: 761px) { .app { grid-template-columns: 228px 1fr; } }
@media (max-width: 760px) { .side a, .side a:hover { padding: 5px 0; } .side { padding-inline: 8px; } }
/* Marketing: 4 números por linha, sem buraco na segunda linha */
.mkt-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mkt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Criativos: as 8 etapas cabem na largura da tela (rola para o lado só em telas pequenas) */
.mkt-quadro { grid-auto-flow: initial; grid-template-columns: repeat(8, minmax(138px, 1fr)); gap: 8px; }
.mkt-coluna-cab { min-height: 34px; align-items: flex-start; gap: 6px; }
.mkt-compliance .check-row { display: block; line-height: 1.5; }
.mkt-compliance .check-row input { margin: 0 6px 0 0; vertical-align: -2px; accent-color: var(--accent); }
.mkt-arq-tipo { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 1px 6px; border-radius: 4px; margin-right: 8px; }

/* ================== Faixas do painel no modo claro (30/09/2026) ==================
   Antes ficavam escuras nos dois modos e pareciam um bloco pesado no meio da página clara.
   Agora, no claro: papel quase branco com um véu índigo no canto e um toque dourado, borda fina
   e sombra leve — o mesmo "destaque", só que claro. No escuro continuam como eram. */
html:not([data-app-theme="dark"]) .faixa-destaque {
  background:
    radial-gradient(60% 90% at 88% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(40% 70% at -5% 110%, color-mix(in srgb, var(--ouro) 12%, transparent), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f7f6fd 100%);
  border: 1px solid color-mix(in srgb, var(--ink-faint) 16%, var(--line));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 44px -32px rgba(47, 40, 140, .38);
}
html:not([data-app-theme="dark"]) .faixa-destaque::before { background: repeating-linear-gradient(115deg, transparent 0 22px, color-mix(in srgb, var(--accent) 3.5%, transparent) 22px 23px); }
html:not([data-app-theme="dark"]) .faixa-destaque::after { opacity: .28; }
html:not([data-app-theme="dark"]) .faixa-destaque .pn-atalho { background: #fff; }
html:not([data-app-theme="dark"]) .faixa-destaque .pn-abas { background: #fff; }

/* ================== Quadros no modo claro, no mesmo estilo das faixas (30/09/2026) ==================
   A mesma receita das faixas do painel, em dose menor: branco com um brilho índigo bem leve no
   canto de cima, um toque dourado no canto oposto, borda com pitada de índigo e sombra azulada.
   As faixas continuam mais fortes, para seguirem como destaque. */
html:not([data-app-theme="dark"]) .panel:not(.sempre-escuro .panel),
html:not([data-app-theme="dark"]) .pn-dia-grade .panel, html:not([data-app-theme="dark"]) .pn-grade .panel,
html:not([data-app-theme="dark"]) .bi-conteudo .panel, html:not([data-app-theme="dark"]) .bi-kpi,
html:not([data-app-theme="dark"]) .metric, html:not([data-app-theme="dark"]) .pg-cartao,
html:not([data-app-theme="dark"]) .mkt-orcamento {
  background:
    radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, color-mix(in srgb, var(--ouro) 5%, transparent), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #faf9fe 100%);
  border-color: color-mix(in srgb, var(--ink-faint) 11%, var(--line));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 36px -28px rgba(47, 40, 140, .30);
}

/* ---------- Asaas e ZapSign ---------- */
.asaas-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 4px; white-space: nowrap; vertical-align: 1px; }
.asaas-tag.ok { color: var(--status-good); background: color-mix(in srgb, var(--status-good) 12%, transparent); }
.asaas-tag.espera { color: var(--accent); background: var(--glow); }
.asaas-tag.alerta { color: var(--warn); background: var(--warn-bg); }
.asaas-tag.neutro { color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 12%, transparent); }
.asaas-box { margin-top: 16px; }
.asaas-info { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 8px; }
.asaas-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.asaas-acoes a.btn-ghost { text-decoration: none; }
.zs-mini { padding: 3px 9px; font-size: 11.5px; }
h3 .zs-mini { float: right; }
.zs-envio { border-top: 1px solid var(--line); padding: 10px 0; }
.zs-envio:first-of-type { border-top: 0; }
.zs-sig { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.zs-sig em { color: var(--ink-soft); font-style: normal; }
.zs-form { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 12px; }
.zs-form h4 { margin: 0 0 6px; font-size: 13.5px; }
.zs-rotulo { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 10px 0 6px; }
.zs-pessoa { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; position: relative; }
.zs-pessoa .zs-tirar { position: absolute; top: 6px; right: 6px; }
.zs-pessoa > span { display: none; }
.field-in { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.zs-pessoa .field-in:first-child { padding-right: 34px; }
.zs-form .check-row { display: block; margin: 6px 0; font-size: 13px; }
.integ-chave { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.integ-chave .ia-nome { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }

/* ---------- Logos das integrações ---------- */
/* Cada cartão recebe a cor da marca (--marca): fio no topo e brilho leve atrás do logo. */
.integ-card { position: relative; overflow: hidden; }
.integ-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--marca, var(--accent)); }
.integ-logo.com-img { background: #fff; padding: 6px; border: 1px solid color-mix(in srgb, var(--marca, var(--accent)) 22%, var(--line)); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--marca, var(--accent)) 55%, transparent); }
.integ-logo.com-img img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; }
.integ-titulo { display: inline-flex; align-items: center; gap: 10px; }
.integ-titulo .integ-logo.com-img { padding: 4px; }
.zs-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 8px 0; }
.zs-campos .field span { font-size: 11.5px; }
.zs-campos .field input { padding: 6px 9px; font-size: 13px; }
.zs-campo-falta input { border-color: var(--status-warning); background: color-mix(in srgb, var(--status-warning) 12%, var(--surface)); }
.zs-falta { font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--status-warning) 70%, var(--ink)); margin: 0 0 6px; }
@media (max-width: 760px) { .zs-campos { grid-template-columns: 1fr; } }
/* Chave liga/desliga dos cartões (formato ADVBox) */
.integ-estado { display: inline-flex; align-items: center; gap: 8px; }
.integ-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.integ-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.integ-switch span { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink-soft) 22%, var(--surface)); cursor: pointer; transition: background .18s; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.integ-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .18s; }
.integ-switch input:checked + span { background: var(--accent); }
.integ-switch input:checked + span::after { left: 23px; }
.integ-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.integ-switch.travado span { cursor: default; opacity: .55; }
.integ-card:not(.ligado) .integ-logo.com-img { filter: saturate(.85); }

/* Configurações › Histórico de alterações */
.hist-filtros select, .hist-filtros input { font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.hist-filtros input[type=search] { flex: 1; min-width: 180px; }
.hist-quando { white-space: nowrap; color: var(--ink-soft); }
.hist-tipo { color: var(--ink-faint); font-size: 12px; }
table.list tbody tr.hist-det { cursor: default; }
table.list tbody tr.hist-det:hover td { background: none; }
.hist-dif { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface-2); border-radius: 8px; }
.hist-dif th, .hist-dif td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); word-break: break-word; vertical-align: top; }
.hist-dif th:first-child, .hist-dif td:first-child { color: var(--ink-soft); white-space: nowrap; width: 1%; }
.hist-dif th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.hist-antes { color: var(--ink-soft); text-decoration: line-through; }
.hist-vazio { color: var(--ink-faint); font-style: italic; }
@media (max-width: 700px) { .hist-tabela th:nth-child(1), .hist-tabela td.hist-quando { white-space: normal; } }

/* Senhas e acessos do cliente */
.sh-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2); }
.sh-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.sh-acoes { display: flex; gap: 10px; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; }
.btn-link.btn-perigo { color: var(--danger, #c0392b); }
.sh-linha { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-top: 4px; flex-wrap: wrap; }
.sh-linha > span { color: var(--ink-soft); width: 44px; }
.sh-linha code { font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; word-break: break-all; }
.sh-linha .btn-ghost { padding: 2px 8px; font-size: 11.5px; }
.sh-obs { color: var(--ink-soft); font-size: 12px; margin-top: 6px; }
.sh-form { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 8px; display: grid; gap: 8px; }

/* Painel de filtros das listas (Contatos, Processos) */
.ct-filtros { align-items: flex-end; }
.ct-filtro { display: inline-flex !important; flex-direction: column; align-items: flex-start !important; gap: 4px !important; font-size: 11.5px; color: var(--ink-soft); cursor: default !important; }
.ct-filtro select { min-width: 150px; max-width: 220px; }
.ct-par { display: inline-flex; gap: 6px; }
.ct-par input { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: 12.5px; }
.ct-par input[type=number] { width: 64px; }
.ct-limpar { align-self: center; font-size: 12.5px; }

/* Ordenar clicando no título da coluna */
table.list th.ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
table.list th.ordenavel:hover { color: var(--ink); }
table.list th.ordenavel::after { content: '↕'; margin-left: 4px; opacity: 0; font-size: 10px; }
table.list th.ordenavel:hover::after { opacity: .5; }
table.list th.ord-asc, table.list th.ord-desc { color: var(--accent); }
table.list th.ord-asc::after { content: '↑'; opacity: 1; }
table.list th.ord-desc::after { content: '↓'; opacity: 1; }
.ag-topo .atv-drop { margin-left: 8px; }

/* Logos das empresas (réus, seguradoras, plataformas) — public/js/logos.js */
.emp-logo { display: inline-block; vertical-align: -3px; object-fit: contain; border-radius: 4px; background: #fff; margin-right: 5px; box-shadow: 0 0 0 1px var(--line); }
h2 .emp-logo { vertical-align: -4px; margin-left: 2px; }
.emp-logos-previa { margin-left: 6px; }
.emp-logos-previa .emp-logo { vertical-align: -4px; }
.mkt-plat { display: inline-flex; align-items: center; }
.mkt-plat .emp-logo { margin-right: 4px; vertical-align: 0; box-shadow: none; border-radius: 3px; }
.mkt-plat-tiktok { background: color-mix(in srgb, #111 10%, transparent); color: var(--ink); }
.mkt-plat-kwai { background: color-mix(in srgb, #ff7a00 15%, transparent); color: #d45f00; }
.mkt-conexao-nome { flex-direction: row; align-items: center; gap: 8px; }
.mkt-conexao-nome > span { display: flex; flex-direction: column; }
.mkt-conexao-nome .emp-logo { margin: 0; }

/* Marketing com menu lateral (como Configurações) */
.mkt-layout { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }
.mkt-principal { min-width: 0; }
.mkt-menu { position: sticky; top: 12px; }
.mkt-menu a { display: flex; align-items: center; gap: 9px; }
.mkt-menu-ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mkt-menu-ico .emp-logo { margin: 0; }
.mkt-menu-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 10px 4px; }
.mkt-topo { align-items: center; gap: 12px; }
.mkt-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-family: 'Newsreader', serif; font-size: 22px; font-weight: 600; color: var(--ink); }
.mkt-titulo small { font-family: inherit; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); font-family: system-ui, sans-serif; }
.mkt-titulo .emp-logo { margin: 0; border-radius: 6px; }
.mkt-titulo-ico { color: var(--accent); display: inline-flex; }
.mkt-titulo-ico svg { width: 22px; height: 22px; }
.mkt-topo .spacer { flex: 1; }
.mkt-sec-titulo { font-family: 'Newsreader', serif; font-size: 18px; margin: 22px 2px 10px; color: var(--ink); }
.mkt-conexao-topo { margin: 0 0 14px; }
@media (max-width: 900px) { .mkt-layout { grid-template-columns: 1fr; } .mkt-menu { position: static; } }

/* Site e SEO */
.seo-sites { gap: 8px; }
.seo-site { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font-family: inherit; color: var(--ink); }
.seo-site small { color: var(--ink-faint); font-size: 11px; }
.seo-site.ativo { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.seo-aviso { padding: 10px 14px; border-radius: 8px; background: var(--brass-bg, #fff6df); color: var(--ink); font-size: 13px; margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--ouro, #c9a227) 35%, transparent); }
.seo-aviso a { color: var(--accent); cursor: pointer; text-decoration: underline; }
.seo-painel { margin-bottom: 14px; }
.seo-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.seo-cab h3 { margin: 0; }
.seo-visao span { cursor: pointer; }
.seo-medidores { display: flex; gap: 26px; flex-wrap: wrap; margin: 16px 0 6px; }
.seo-medidor { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.seo-medidor circle { fill: none; stroke-width: 7; }
.seo-trilho { stroke: var(--surface-2); }
.seo-arco { stroke-linecap: round; }
.seo-medidor text { font-size: 22px; font-weight: 700; fill: var(--ink); font-family: system-ui, sans-serif; }
.seo-boa .seo-arco { stroke: #0cce6b; } .seo-media .seo-arco { stroke: #ffa400; } .seo-ruim .seo-arco { stroke: #ff4e42; } .seo-sem .seo-arco { stroke: transparent; }
.seo-legenda { font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.seo-legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 6px; }
i.seo-boa { background: #0cce6b; } i.seo-media { background: #ffa400; } i.seo-ruim { background: #ff4e42; }
.seo-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.seo-metrica { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-soft); }
.seo-metrica strong { font-size: 17px; color: var(--ink); }
.seo-metrica small { color: var(--ink-faint); font-size: 11px; }
.seo-metrica.seo-boa { border-left-color: #0cce6b; } .seo-metrica.seo-media { border-left-color: #ffa400; } .seo-metrica.seo-ruim { border-left-color: #ff4e42; }
.seo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow: auto; }
.seo-lista-compacta { gap: 7px; }
.seo-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.seo-item > div { display: flex; flex-direction: column; gap: 2px; }
.seo-det { color: var(--ink-soft); font-size: 12px; }
.seo-como { color: var(--ink); font-size: 12px; background: var(--surface-2); border-radius: 6px; padding: 4px 8px; margin-top: 2px; }
.seo-como:empty { display: none; }
.seo-est { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.seo-est-ok { background: #0cce6b; } .seo-est-aviso { background: #ffa400; } .seo-est-erro { background: #ff4e42; }
.seo-check-trilho { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-bottom: 12px; }
.seo-check-trilho span { display: block; height: 100%; background: var(--positivo, #0cce6b); }
.seo-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 22px; }
.seo-check .mkt-menu-rotulo { padding-left: 0; }
.seo-check-item { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13px; cursor: pointer; }
.seo-check-item input { margin-top: 3px; accent-color: var(--accent); }
.seo-check-item span { display: flex; flex-direction: column; gap: 1px; }
.seo-check-item small { color: var(--ink-faint); font-size: 11.5px; }
.seo-check-item.feito strong { color: var(--ink-soft); text-decoration: line-through; }
.seo-feito-em { color: var(--positivo, #1a9e55) !important; }
.seo-nota { font-weight: 700; } .seo-nota.seo-boa { color: #0a9f52; } .seo-nota.seo-media { color: #c77f00; } .seo-nota.seo-ruim { color: #e0372b; }
.seo-gerenciar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.seo-site-linha { display: flex; gap: 8px; }
.seo-site-linha input { flex: 1; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-family: inherit; }
.seo-site-acoes { display: flex; gap: 8px; }
.seo-site-acoes .spacer { flex: 1; }
.seo-grade { margin-bottom: 14px; }

/* Marketing > Blog (pauta) */
.blog-resumo { display: grid; grid-template-columns: repeat(3, minmax(150px, 220px)) 1fr; gap: 22px; align-items: start; margin-bottom: 14px; }
.blog-resumo .label { font-size: 12px; color: var(--ink-soft); }
.blog-num { font-family: 'Newsreader', serif; font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.blog-num small { font-size: 15px; color: var(--ink-faint); font-weight: 400; }
.blog-num.blog-alerta { color: var(--warn, #c77f00); }
.blog-resumo .seo-check-trilho { margin: 6px 0; max-width: 180px; }
.blog-dica { margin: 0 !important; align-self: center; }
.blog-quadro { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.blog-quadro .mkt-coluna { min-width: 0; }
.blog-quadro .mkt-card { overflow-wrap: anywhere; }
.blog-chave { font-size: 11.5px; color: var(--ink-soft); margin: 2px 0 6px; }
.blog-atrasado { color: var(--danger, #c0392b) !important; font-weight: 600; }
.blog-cont { font-weight: 400; font-size: 11.5px; color: var(--ink-faint); margin-left: 6px; }
.blog-cont.ruim { color: #c77f00; } .blog-cont.bom { color: #0a9f52; }
.blog-video { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; font-size: 13px; }
.blog-video a { color: var(--accent); cursor: pointer; }
@media (max-width: 900px) { .blog-resumo { grid-template-columns: 1fr 1fr; } }

/* ================== Menu lateral com cor por área (30/09/2026) ==================
   Antes: todos os ícones em quadradinho lilás. Agora cada área tem uma cor suave própria (mesma paleta
   dos gráficos); o item aberto ganha fundo claro da própria cor e o ícone preenchido. */
.side a { --mc: var(--ink-soft); }
.side a[data-view="painel"] { --mc: var(--serie-1); }
.side a[data-view="agenda"] { --mc: var(--serie-7); }
.side a[data-view="atividades"] { --mc: var(--serie-2); }
.side a[data-view="kanban"] { --mc: var(--serie-3); }
.side a[data-view="marketing"] { --mc: var(--serie-5); }
.side a[data-view="comercial"] { --mc: var(--serie-2); }
.side a[data-view="chat"] { --mc: var(--cor-receita); }
.side a[data-view="contatos"] { --mc: var(--serie-1); }
.side a[data-view="processos"] { --mc: var(--serie-7); }
.side a[data-view="inss"] { --mc: var(--serie-6); }
.side a[data-view="publicacoes"] { --mc: var(--serie-4); }
.side a[data-view="pecas"] { --mc: var(--serie-8); }
.side a[data-view="jurisprudencia"] { --mc: var(--ouro); }
.side a[data-view="financeiro"] { --mc: var(--cor-receita); }
.side a[data-view="relatorios"] { --mc: var(--serie-1); }
.side a[data-view="configuracoes"] { --mc: var(--ink-soft); }
.side a[data-view="integracoes"] { --mc: var(--serie-3); }
.side a svg, [data-app-theme="dark"] .side a svg {
  color: var(--mc);
  background: color-mix(in srgb, var(--mc) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 16%, transparent);
}
.side a:hover svg, .side a.active svg, [data-app-theme="dark"] .side a:hover svg, [data-app-theme="dark"] .side a.active svg {
  color: #fff;
  background: var(--mc);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--mc) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.side a.active { color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 13%, transparent), color-mix(in srgb, var(--mc) 3%, transparent)); }
.side a.active::before { background: var(--mc); box-shadow: none; }
.side a:hover { background: color-mix(in srgb, var(--mc) 7%, var(--side-active-bg)); }

/* ================== Etiquetas de fase com cor própria ================== */
.tag-fase { --fc: var(--ink-soft); color: color-mix(in srgb, var(--fc) 82%, var(--ink)); background: color-mix(in srgb, var(--fc) 13%, transparent); }
[data-app-theme="dark"] .tag-fase { color: var(--fc); }
.tag-fase[data-fase="Marketing"] { --fc: var(--serie-5); }
.tag-fase[data-fase="Negociação"] { --fc: var(--serie-4); }
.tag-fase[data-fase="Consultoria"] { --fc: var(--serie-3); }
.tag-fase[data-fase="Administrativo"] { --fc: var(--serie-1); }
.tag-fase[data-fase="Judicial"] { --fc: var(--serie-7); }
.tag-fase[data-fase="Recursal"] { --fc: var(--serie-2); }
.tag-fase[data-fase="Execução"] { --fc: var(--serie-6); }
.tag-fase[data-fase="Financeiro"] { --fc: var(--cor-receita); }
.tag-fase[data-fase="Arquivamento"] { --fc: var(--ink-faint); }

/* Logo oficial da WB Advocacia (monograma do círculo, Papelaria Advocacia/logo1) no menu e no login.
   Versão escura no modo claro, branca no modo escuro e no login (sempre escuro). */
.brand-mark.marca-wb { background: none; box-shadow: none; width: 40px; height: 40px; }
.brand-mark.marca-wb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark.marca-wb .marca-escuro { display: none; }
html[data-app-theme="dark"] .brand-mark.marca-wb .marca-claro, .sempre-escuro .brand-mark.marca-wb .marca-claro { display: none; }
html[data-app-theme="dark"] .brand-mark.marca-wb .marca-escuro, .sempre-escuro .brand-mark.marca-wb .marca-escuro { display: block; }
.side .brand:hover .brand-mark.marca-wb { transform: scale(1.06); }
.lg-marca .brand-mark.marca-wb { width: 48px; height: 48px; }

/* Documentos do cliente: área de arrastar (cadastro e fichas) e pastas na ficha */
.docz-form { border-top: 1px dashed var(--line); padding-top: 12px; }
.docz-titulo { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.docz-area { border: 1.5px dashed var(--line); border-radius: 10px; padding: 14px 12px; text-align: center; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; background: var(--surface-2); transition: border-color .15s, background .15s; }
.docz-area strong { color: var(--ink); font-weight: 600; }
.docz-area span { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.docz-area:hover, .docz-area:focus-visible, .docz-area.arrastando { border-color: var(--accent); background: var(--surface); outline: none; }
.docz-fila:not(:empty) { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.docz-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.docz-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docz-item select, .docc-mover { font-size: 11.5px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-soft); max-width: 150px; }
.docc-pasta { border-bottom: 1px solid var(--line); }
.docc-pasta summary { cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 8px 0; color: var(--ink); }
.docc-pasta .doc-item { padding-left: 12px; }
.docc-pasta .doc-item a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docc-enviar[hidden] { display: none; }
.tag-pdf-senha { background: var(--warn-bg); color: var(--warn); border-color: transparent; white-space: nowrap; }

/* Leitura dos documentos com IA no cadastro */
.docz-topo { border-top: 0; padding-top: 0; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
.ia-ler { width: 100%; justify-content: center; margin-top: 8px; border-color: color-mix(in srgb, var(--ouro) 55%, var(--line)); color: var(--ink); font-weight: 600; }
.ia-ler[hidden] { display: none; }
.ia-ler:hover { background: color-mix(in srgb, var(--ouro) 12%, transparent); }
.ia-box { margin-top: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; color: var(--ink-soft);
  background: color-mix(in srgb, var(--ouro) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ouro) 35%, var(--line)); }
.ia-box strong { color: var(--ink); font-weight: 600; }
.ia-box p { margin: 6px 0 0; }
.ia-box ul { margin: 6px 0 0; padding-left: 18px; }
.ia-box a { cursor: pointer; text-decoration: underline dotted; color: var(--accent); }
.ia-box .ia-custo { font-size: 11px; color: var(--ink-faint); }

/* Documentos pendentes (checklist por serviço) */
.ck-barra { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: -2px 0 8px; }
.ck-barra span { display: block; height: 100%; background: var(--positivo, #2e9e6b); border-radius: 99px; transition: width .3s; }
.ck-servicos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ck-etapa { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.ck-etapa select { font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.ck-aviso { font-size: 12px; color: var(--warn); background: var(--warn-bg); padding: 6px 9px; border-radius: 8px; margin: 0 0 8px; }
.ck-grupo { margin-top: 8px; }
.ck-titulo, .ck-depois summary { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 2px; }
.ck-titulo small { text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--ink-faint); margin-left: 4px; }
.ck-depois summary { cursor: pointer; padding: 4px 0; }
.ck-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ck-item label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; flex: 1; min-width: 0; }
.ck-item input { margin-top: 2px; flex: none; }
.ck-item small { display: block; font-size: 11px; color: var(--ink-faint); }
.ck-item.ok .ck-nome { color: var(--ink-faint); text-decoration: line-through; }
.ck-item.na { opacity: .5; }
.ck-item.na .ck-nome { text-decoration: line-through; }
.ck-na { flex: none; border: 0; background: none; font-size: 11px; color: var(--ink-faint); cursor: pointer; padding: 2px 4px; text-decoration: underline dotted; }
.ck-na:hover { color: var(--ink); }
.ck-acoes { display: flex; gap: 6px; margin-top: 10px; }
.ck-acoes .btn-ghost { flex: 1; justify-content: center; font-size: 12.5px; text-decoration: none; }
.ck-pronto { font-size: 12.5px; color: var(--positivo, #2e9e6b); font-weight: 600; margin: 10px 0 0; }

/* ================= Organização do escritório (organograma, RCC, POPs) ================= */
.side a[data-view="organizacao"] { --mc: var(--serie-4); }
.org-intro { color: var(--ink-soft); font-size: 13px; margin: -4px 0 12px; }
.org-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: 8px; background: var(--brass-bg); border: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); font-size: 13px; }
.org-aviso-item { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.org-aviso-item em { font-style: normal; font-size: 11px; color: var(--brass); font-weight: 700; margin-left: 2px; }
.org-rodape { color: var(--ink-faint); font-size: 12px; margin-top: 18px; }
.org-dica { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 12px; }
.org-vazio { color: var(--ink-faint); font-size: 13px; margin: 2px 0; }
.org-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.org-barra .spacer { flex: 1; }
.org-empresas { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.org-emp { font: inherit; font-size: 13px; padding: 7px 14px; border: 0; background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.org-emp + .org-emp { border-left: 1px solid var(--line); }
.org-emp.ativo { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }

/* Organograma */
.og-quadro { overflow-x: auto; padding: 12px 2px 12px; }
.og-arvore { min-width: 860px; }
.og-topo-linha { display: flex; justify-content: center; position: relative; padding-bottom: 22px; }
.og-topo-linha::after { content: ''; position: absolute; left: 50%; bottom: 0; height: 22px; border-left: 2px solid var(--line); }
.og-setores { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; position: relative; padding-top: 22px; }
.og-setores::before { content: ''; position: absolute; top: 0; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); border-top: 2px solid var(--line); }
.og-setor { position: relative; display: flex; flex-direction: column; gap: 10px; }
.og-setor::before { content: ''; position: absolute; top: -22px; left: 50%; height: 22px; border-left: 2px solid var(--line); }
.og-areas { display: flex; flex-direction: column; gap: 10px; }
.og-area { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 2px; }
.og-frentes { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px 14px; border-left: 2px solid var(--line); margin: 0 0 6px 16px; }
.og-no { position: relative; border-radius: 8px; padding: 9px 12px; }
.og-topo { background: var(--accent); color: var(--accent-contrast); min-width: 240px; text-align: center; box-shadow: var(--lift); }
.og-topo .og-desc, .og-topo .og-pessoas-txt { color: color-mix(in srgb, var(--accent-contrast) 80%, transparent); }
.og-setor-cab { background: var(--side-active-bg); text-align: center; }
.og-setor-cab .og-nome { font-family: 'Newsreader', Georgia, serif; font-size: 16px; }
.og-area-cab .og-nome { font-weight: 700; }
.og-frente { background: var(--surface-2); padding: 7px 10px; }
.og-nome { font-weight: 600; font-size: 13.5px; }
.og-desc { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }
.og-pessoas-txt { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
.og-pessoas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.og-pessoa { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
.og-pessoa.eu { background: var(--accent); color: var(--accent-contrast); }
.og-docs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.og-setor-cab .og-docs, .og-topo .og-docs { justify-content: center; }
.og-doc { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; background: var(--surface); }
.og-doc:hover, .og-doc.meu { border-color: var(--accent); color: var(--accent); }
.og-meu { outline: 2px solid var(--brass); outline-offset: 1px; }
.og-voce { position: absolute; top: -9px; right: 8px; font-size: 10px; font-weight: 700; background: var(--brass); color: #fff; border-radius: 999px; padding: 1px 7px; }
.og-acoes { display: flex; gap: 3px; margin-top: 6px; }
.og-acoes button { font: inherit; font-size: 12px; width: 24px; height: 22px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; padding: 0; }
.og-acoes button:hover { color: var(--accent); border-color: var(--accent); }
.og-acoes button.perigo:hover { color: var(--warn); border-color: var(--warn); }
.og-topo .og-acoes, .og-setor-cab .og-acoes { justify-content: center; }
.org-form-no { margin-top: 16px; max-width: 640px; }
.org-form-no h3 { margin-top: 0; }

/* Listas de POP / RCC */
.org-docs-lista { display: flex; flex-direction: column; gap: 6px; }
.org-doc-linha { font: inherit; text-align: left; display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; color: var(--ink); }
.org-doc-linha:hover { border-color: var(--accent); }
.org-doc-num { flex: none; width: 44px; height: 44px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', Georgia, serif; font-size: 17px; font-weight: 600; background: var(--side-active-bg); color: var(--ink); }
.org-doc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.org-doc-txt span { font-size: 12px; color: var(--ink-soft); }
.org-doc-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--ink-faint); }
.org-st { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.org-st.ok { background: color-mix(in srgb, var(--positivo) 14%, transparent); color: var(--positivo); }
.org-st.pend { background: var(--warn-bg); color: var(--warn); }

/* Leitura */
.org-doc-grade { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.org-doc-grade.sem-lado { grid-template-columns: minmax(0, 860px); }
.org-doc { padding: 22px 26px; }
.org-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.org-meta dt { font-size: 11px; color: var(--ink-faint); font-weight: 600; }
.org-meta dd { margin: 2px 0 0; font-size: 13px; }
.org-sec { margin: 0 0 20px; }
.org-sec h4 { font-family: 'Newsreader', Georgia, serif; font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.org-sec h5 { font-size: 12px; color: var(--ink-soft); margin: 0 0 4px; }
.org-sec p { margin: 0; line-height: 1.55; }
.org-lista { margin: 0; padding-left: 20px; line-height: 1.55; font-size: 14px; }
.org-lista li + li { margin-top: 3px; }
.org-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.org-passos li { display: flex; gap: 12px; align-items: flex-start; }
.org-passo-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.org-passo-txt { padding-top: 4px; line-height: 1.5; font-size: 14px; flex: 1; }
.org-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--accent); cursor: pointer; text-decoration: none; }
.org-link:hover { border-color: var(--accent); }
.org-link.video { color: var(--ink); }
.org-video { margin-top: 8px; position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.org-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.org-links-lista { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.org-ativ { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.org-dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.org-dl dt { color: var(--ink-soft); font-size: 13px; }
.org-dl dd { margin: 0; }
.org-priv { font-family: 'Public Sans', sans-serif; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-faint); margin-left: 6px; }
.org-ciencia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 14px 16px; border-radius: 9px; background: var(--brass-bg); font-size: 14px; }
.org-ciencia.ok { background: color-mix(in srgb, var(--positivo) 12%, transparent); color: var(--positivo); font-weight: 600; }
.org-lado { padding: 14px 16px; margin-bottom: 12px; }
.org-lado h4 { margin: 0 0 8px; font-size: 13px; }
.org-quem, .org-versoes { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.org-quem li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.org-versoes li { padding: 4px 0; color: var(--ink-soft); }
.org-versoes a { color: var(--accent); cursor: pointer; font-weight: 600; }
.org-v-res { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.org-antiga { margin-top: 4px; font-size: 12.5px; color: var(--brass); font-weight: 600; }

/* Formulário */
.org-form { max-width: 860px; }
.org-ajuda { font-style: normal; font-weight: 400; color: var(--ink-faint); font-size: 11.5px; margin-left: 4px; }
.org-ajuda-p { font-size: 12px; color: var(--ink-faint); margin: 4px 0 8px; }
.field-row.org-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.org-passo-ed { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.org-passo-ed .org-passo-n { margin-top: 6px; }
.org-passo-campos { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.org-passo-link { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }
.org-passo-link input { font-size: 12.5px; }
.org-passo-bts { display: flex; flex-direction: column; gap: 3px; }
.org-link-ed { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; margin-bottom: 6px; }
#org-add-passo, #org-add-link { margin-top: 8px; }
.org-resumo { padding: 12px; border-radius: 8px; background: var(--brass-bg); }

/* Equipe */
.org-equipe .eq-box { padding: 6px 0 10px; }
.eq-pops { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; }
.eq-grupo-nome { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.eq-grupo .check-row { margin: 3px 0; }
.usr-org { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.usr-org h4 { margin: 0 0 2px; font-size: 14px; }

@media (max-width: 900px) {
  .org-doc-grade { grid-template-columns: 1fr; }
  .org-ativ { grid-template-columns: 1fr; }
  .org-dl { grid-template-columns: 1fr; }
  .org-doc { padding: 16px; }
  .org-doc-linha { flex-wrap: wrap; }
  .org-doc-meta { justify-content: flex-start; width: 100%; }
  .field-row.org-row-3, .org-passo-link, .org-link-ed { grid-template-columns: 1fr; }
}

/* ---- Organização: cores (01/10/2026, Willian: "sem vida, coloque cores, mais didático") ----
   --dc / --sc = cor do setor (Negócios laranja, Operacional azul, Administrativo verde-água),
   repetida no organograma, nas listas e no documento. Cada parte do POP/RCC tem a sua cor (--sc da seção). */
.org-abas span[data-aba] { display: inline-flex; align-items: center; gap: 7px; }
.org-abas span[data-aba].active { border-bottom-color: var(--ac); }
.org-aba-ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, transparent); }
.org-aba-ic svg { width: 14px; height: 14px; }
.fase-tabs span.org-aba-ic { padding: 0; border: 0; }
.org-abas span.active .org-aba-ic { background: var(--ac); color: #fff; }

/* Organograma colorido por setor */
.og-setor::before { border-left-color: color-mix(in srgb, var(--sc) 55%, var(--line)); }
.og-setor-cab { background: color-mix(in srgb, var(--sc) 15%, var(--surface)); border-top: 3px solid var(--sc); }
.og-setor-cab .og-nome { color: color-mix(in srgb, var(--sc) 75%, var(--ink)); }
.og-area { border-color: color-mix(in srgb, var(--sc) 28%, var(--line)); box-shadow: inset 3px 0 0 var(--sc); }
.og-area-cab .og-nome { color: color-mix(in srgb, var(--sc) 70%, var(--ink)); }
.og-frentes { border-left-color: color-mix(in srgb, var(--sc) 40%, transparent); }
.og-frente { background: color-mix(in srgb, var(--sc) 7%, var(--surface)); }
.og-doc { border-color: color-mix(in srgb, var(--sc) 45%, var(--line)); color: color-mix(in srgb, var(--sc) 80%, var(--ink)); background: color-mix(in srgb, var(--sc) 9%, var(--surface)); }
.og-doc:hover, .og-doc.meu { background: var(--sc); border-color: var(--sc); color: #fff; }

/* Lista de POPs / RCCs */
.org-doc-linha { border-left: 4px solid var(--dc); transition: border-color .15s, box-shadow .15s; }
.org-doc-linha:hover { border-color: color-mix(in srgb, var(--dc) 60%, var(--line)); border-left-color: var(--dc); box-shadow: 0 6px 16px -12px var(--dc); }
.org-doc-num { flex-direction: column; gap: 0; line-height: 1; background: color-mix(in srgb, var(--dc) 15%, var(--surface)); color: color-mix(in srgb, var(--dc) 80%, var(--ink)); }
.org-doc-num small { font-family: 'Public Sans', sans-serif; font-size: 9.5px; font-weight: 700; opacity: .8; margin-bottom: 2px; }
.org-doc-num svg { width: 17px; height: 17px; }
.org-cam { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 0; }
.org-cam-setor { font-weight: 700; color: color-mix(in srgb, var(--dc) 80%, var(--ink)); background: color-mix(in srgb, var(--dc) 13%, transparent); padding: 0 7px; border-radius: 5px; }
.org-cam-sep { color: var(--ink-faint); margin: 0 5px; }
.org-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.org-chip.passos { background: color-mix(in srgb, var(--serie-6) 13%, transparent); color: var(--serie-6); }
.org-chip.links { background: color-mix(in srgb, var(--serie-5) 13%, transparent); color: var(--serie-5); }

/* Leitura do documento */
.org-doc-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.org-tipo { font-family: 'Public Sans', sans-serif; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 7px; background: var(--dc); color: #fff; }
.org-doc { border-top: 4px solid var(--dc); }
.org-meta { background: color-mix(in srgb, var(--dc) 6%, transparent); border: 1px solid color-mix(in srgb, var(--dc) 18%, var(--line)); border-radius: 10px; padding: 12px 16px; }
.org-meta dt { color: color-mix(in srgb, var(--dc) 70%, var(--ink-soft)); }
.org-sec { margin: 0 0 22px; }
.org-sec h4 { display: flex; align-items: center; gap: 10px; }
.org-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--sc) 15%, transparent); color: var(--sc); }
.org-sec-cont { margin-left: auto; font-family: 'Public Sans', sans-serif; font-size: 11.5px; font-weight: 600; color: var(--sc); }
.org-sec-corpo { margin-left: 15px; padding: 2px 0 2px 25px; border-left: 2px solid color-mix(in srgb, var(--sc) 30%, transparent); }
.org-sec .org-lista li::marker { color: var(--sc); font-weight: 700; }

/* Passo a passo: trilha com os números ligados */
.org-sec-corpo:has(> .org-passos) { border-left-color: transparent; padding-left: 4px; margin-left: 4px; }
.org-passos { gap: 0; }
.org-passos li { position: relative; padding-bottom: 14px; }
.org-passos li:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; border-left: 2px solid color-mix(in srgb, var(--sc) 35%, transparent); }
.org-sec .org-passo-n { background: var(--sc); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 15%, transparent); }
.org-passos li:hover .org-passo-txt { color: var(--ink); }
.org-link.video { color: var(--serie-8); border-color: color-mix(in srgb, var(--serie-8) 35%, var(--line)); background: color-mix(in srgb, var(--serie-8) 8%, var(--surface)); }
.org-link { color: var(--serie-1); }

/* Resultado esperado (✓) e ações corretivas (problema → o que fazer) */
.org-checks, .org-corr, .org-metas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.5; }
.org-checks li { position: relative; padding-left: 26px; }
.org-checks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--sc) 18%, transparent); color: var(--sc); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.org-corr li { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; background: color-mix(in srgb, var(--sc) 7%, transparent); border-left: 3px solid var(--sc); }
.org-corr strong { color: color-mix(in srgb, var(--sc) 80%, var(--ink)); font-size: 13.5px; }
.org-corr strong + span::before { content: 'O que fazer: '; font-weight: 600; color: var(--ink-soft); }
.org-metas li { position: relative; padding: 8px 12px 8px 36px; border-radius: 8px; background: color-mix(in srgb, var(--sc) 8%, transparent); }
.org-metas li::before { content: ''; position: absolute; left: 13px; top: 14px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 20%, transparent); }

/* Atividades: dia / semana / mês com intensidade crescente */
.org-ativ-col { padding: 10px 12px 12px; border-radius: 9px; background: color-mix(in srgb, var(--sc) 6%, transparent); border-top: 3px solid color-mix(in srgb, var(--sc) var(--forca), transparent); }
.org-ativ-col.c1 { --forca: 100%; } .org-ativ-col.c2 { --forca: 65%; } .org-ativ-col.c3 { --forca: 35%; }
.org-ativ-col h5 { color: color-mix(in srgb, var(--sc) 80%, var(--ink)); font-size: 12.5px; margin-bottom: 6px; }
.org-ativ-col .org-lista { font-size: 13.5px; padding-left: 18px; }

/* Remuneração por nível */
.org-niveis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.org-nivel { padding: 10px 12px; border-radius: 9px; font-size: 13.5px; background: color-mix(in srgb, var(--sc) calc(var(--n) * 1%), transparent); }
.org-nivel span { display: block; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--sc) 80%, var(--ink)); margin-bottom: 3px; }
.org-nivel.n1 { --n: 6; } .org-nivel.n2 { --n: 11; } .org-nivel.n3 { --n: 17; }
.org-sec .org-dl dt { color: color-mix(in srgb, var(--sc) 70%, var(--ink-soft)); font-weight: 600; }

@media (max-width: 900px) {
  .org-sec-corpo { margin-left: 0; padding-left: 14px; }
  .org-niveis { grid-template-columns: 1fr; }
}

/* ---- Menu lateral: títulos dos setores (02/10/2026, Willian: menu na ordem do fluxo do escritório) ----
   Seu dia (sem título) > Negócios > Operacional > Administrativo; Configurações e Integrações no rodapé. */
.side .side-grupo {
  flex: none; margin: 14px 8px 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap; overflow: hidden;
}
@media (max-width: 760px) {
  .side .side-grupo { font-size: 0; height: 1px; margin: 8px 6px; background: var(--line); }
}

/* ================== Comercial e Gestão Kanban — visual novo (02/10/2026) ==================
   Inspirado na fila de conversas que o Willian mostrou: colunas com cabeçalho colorido e contador,
   cartão com inicial colorida, telefone com final, última anotação e tempo com bolinha de cor.
   Animações em SVG: esteira (tracejado correndo + pacote), coluna vazia (grade flutuando, borda andando),
   áreas Fechou/Perdido com borda "formiguinha" ao arrastar, confete ao fechar contrato.
   Quem pede menos movimento no sistema (prefers-reduced-motion) vê tudo parado. */

/* ---- Abas e barra ---- */
.cm-abas .cm-aba-n { font-style: normal; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cm-abas .cm-aba-n[hidden] { display: none; }
.cm-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 12px; }
.cm-barra .spacer { flex: 1; }
.cm-busca { display: flex; align-items: center; gap: 8px; min-width: 240px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-faint); }
.cm-busca input { border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); width: 100%; }
.cm-busca:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.cm-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-pilula, .cm-agrupar { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; }
.cm-pilula select, .cm-agrupar select { border: 0; background: none; font: inherit; color: inherit; outline: 0; cursor: pointer; max-width: 190px; padding: 0 2px; }
.cm-pilula.ligada { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.cm-agrupar { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.cm-agrupar span { font-weight: 600; }
.cm-novo { display: inline-flex; align-items: center; gap: 6px; height: 36px; }

/* ---- Esteira (Comercial) ---- */
.cm-esteira { position: relative; height: 34px; margin: 2px 0 14px; }
.cm-esteira-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cm-est-trilho { stroke: var(--line); stroke-width: 2; }
.cm-est-fluxo, .kb-est-fluxo { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 2; stroke-dasharray: 6 10; stroke-linecap: round; animation: cm-fluxo 1.1s linear infinite; vector-effect: non-scaling-stroke; }
.cm-est-pacote { fill: var(--accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent)); }
@keyframes cm-fluxo { to { stroke-dashoffset: -16; } }
.cm-est-nos { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 100%; }
.cm-est-no { justify-self: center; align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 20px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--fc) 35%, var(--line)); font-size: 12px; font-weight: 700; color: var(--fc); white-space: nowrap; }
.cm-est-no i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc) 20%, transparent); }
.cm-est-no b { font-weight: 800; padding: 0 6px; border-radius: 9px; background: color-mix(in srgb, var(--fc) 14%, transparent); }

/* ---- Quadro e colunas (Comercial) ---- */
.cm-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; height: calc(100vh - 330px); min-height: 440px; align-items: stretch; }
.cm-grupo { flex: none; display: flex; flex-direction: column; min-height: 0; }
.cm-grupo-tit { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fc); padding: 0 4px 6px; margin-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--fc) 50%, transparent); }
.cm-grupo-cols { display: flex; gap: 12px; flex: 1; min-height: 0; }
.cm-col { flex: none; width: 282px; display: flex; flex-direction: column; min-height: 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--cc) 30%, var(--line)); background: color-mix(in srgb, var(--cc) 4%, var(--side-bg)); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.cm-col-cab { display: flex; align-items: center; gap: 8px; padding: 12px 12px; background: color-mix(in srgb, var(--cc) 11%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--cc) 22%, var(--line)); }
.cm-col-alca { color: color-mix(in srgb, var(--cc) 60%, var(--ink-faint)); display: inline-flex; }
.cm-col-nome { flex: 1; font-weight: 800; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-col-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--cc); }
.cm-col-menu-btn { border: 0; background: none; color: var(--ink-faint); cursor: pointer; padding: 2px; border-radius: 6px; display: inline-flex; }
.cm-col-menu-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cm-col-menu { right: 0; left: auto; top: 26px; min-width: 210px; }
.cm-col-menu .perigo { color: var(--warn); }
.cm-col-corpo { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.cm-col.drag-over { border-color: var(--cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 25%, transparent); }
.cm-nova-col { flex: none; width: 150px; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 2px dashed color-mix(in srgb, var(--fc) 35%, var(--line)); background: transparent; color: var(--fc); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .2s; }
.cm-nova-col small { display: block; font-weight: 500; color: var(--ink-faint); }
.cm-nova-col span { text-align: center; }
.cm-nova-col:hover { background: color-mix(in srgb, var(--fc) 7%, transparent); }

/* ---- Cartão (Comercial) ---- */
.cm-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 12px 12px 10px; cursor: pointer; box-shadow: var(--lift); font-size: 12.5px; animation: cm-entra-card .35s ease-out both; animation-delay: calc(var(--i, 0) * 35ms); transition: transform .15s, box-shadow .15s, border-color .15s; }
.cm-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--av) 45%, var(--line)); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--av) 70%, transparent); }
.cm-card.arrastando { opacity: .45; transform: rotate(-2deg); }
@keyframes cm-entra-card { from { opacity: 0; transform: translateY(8px); } }
.cm-c-topo, .kb-c-topo { display: flex; align-items: center; gap: 10px; }
.cm-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--av); color: #fff; font-weight: 800; font-size: 14.5px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--av) 18%, transparent); }
.cm-c-quem { flex: 1; min-width: 0; }
.cm-c-quem strong { display: block; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-c-quem small { display: block; font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.cm-tempo { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cm-tempo i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.cm-tempo.quente i { background: var(--cor-receita); box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-receita) 60%, transparent); animation: cm-pulso 2s ease-out infinite; }
.cm-tempo.novo i { background: var(--serie-3); animation: cm-pulso 2s ease-out infinite; }
.cm-tempo.morno i { background: var(--serie-4); }
.cm-tempo.frio { color: var(--warn); }
.cm-tempo.frio i { background: var(--warn); }
@keyframes cm-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-receita) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.cm-c-msg { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; }
.cm-c-msg svg { flex: none; margin-top: 2px; color: var(--serie-1); }
.cm-c-msg span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-c-msg.vazia { color: var(--ink-faint); font-style: italic; }
.cm-c-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; color: var(--ink-faint); }
.cm-c-resp { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.cm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cm-chips:empty { display: none; }
.cm-chip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; border: 0; color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 10%, transparent); }
.cm-chip.ruim { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.cm-chip.atencao { color: color-mix(in srgb, var(--serie-4) 85%, var(--ink)); background: color-mix(in srgb, var(--serie-4) 16%, transparent); }
.cm-chip-acao { cursor: pointer; }
.cm-chip-acao:hover { background: color-mix(in srgb, var(--warn) 20%, transparent); }
.cm-c-acoes { display: flex; justify-content: flex-end; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); opacity: .55; transition: opacity .15s; }
.cm-card:hover .cm-c-acoes { opacity: 1; }
.cm-zap { color: #25a35a !important; }
.cm-btn-ganhou:hover { color: var(--cor-receita) !important; }
.cm-btn-perdeu:hover { color: var(--warn) !important; }

/* ---- Coluna vazia (SVG) ---- */
.cm-vazio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 6px; color: var(--ink-faint); font-size: 12px; text-align: center; }
.cm-vazio-svg { width: 120px; height: 80px; }
.cm-vazio-borda { fill: none; stroke: color-mix(in srgb, var(--cc, var(--fc, var(--accent))) 45%, var(--line)); stroke-width: 1.6; stroke-dasharray: 5 5; animation: cm-formiga 1.4s linear infinite; }
.cm-vazio-grade rect { fill: none; stroke: color-mix(in srgb, var(--cc, var(--fc, var(--accent))) 70%, var(--ink-faint)); stroke-width: 1.8; }
.cm-vazio-grade { animation: cm-flutua 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes cm-formiga { to { stroke-dashoffset: -20; } }
@keyframes cm-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---- Fechou / Perdido ---- */
.cm-grupo-fim { position: sticky; right: 0; z-index: 3; padding-left: 14px; background: linear-gradient(90deg, transparent, var(--bg) 14px); }
.cm-alvo { position: relative; width: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px; border: 0 !important; background: color-mix(in srgb, var(--ac) 5%, var(--side-bg)) !important; color: var(--ink-soft); font-size: 12px; transition: transform .2s, background .2s; }
.cm-alvo strong { font-size: 14px; color: var(--ac); }
.cm-alvo span { line-height: 1.45; }
.cm-alvo-ic { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, transparent); }
.cm-alvo-ganhou { --ac: var(--cor-receita); }
.cm-alvo-perdeu { --ac: var(--warn); }
.cm-alvo-borda { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cm-alvo-borda rect { width: calc(100% - 3px); height: calc(100% - 3px); fill: none; stroke: color-mix(in srgb, var(--ac) 50%, transparent); stroke-width: 2; stroke-dasharray: 7 6; }
.cm-board.em-arraste .cm-alvo-borda rect { animation: cm-formiga .8s linear infinite; stroke: var(--ac); }
.cm-board.em-arraste .cm-alvo-ic { animation: cm-pula .9s ease-in-out infinite; }
.cm-alvo.drag-over { transform: scale(1.03); background: color-mix(in srgb, var(--ac) 16%, var(--side-bg)) !important; }
@keyframes cm-pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---- Confete ao fechar contrato ---- */
.cm-festa { position: fixed; inset: 0; z-index: 1200; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cm-festa svg { width: 600px; height: 600px; max-width: 100vw; overflow: visible; }
.cm-confete { animation: cm-confete 1.5s cubic-bezier(.15,.7,.3,1) both; animation-delay: var(--atraso); }
@keyframes cm-confete { 0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--rot)) scale(1); opacity: 0; } }
.cm-festa-circ { fill: var(--cor-receita); animation: cm-festa-circ 1.9s ease-out both; transform-box: fill-box; transform-origin: center; }
.cm-festa-visto { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: cm-desenha .45s .25s ease-out forwards, cm-some 1.9s ease-out both; }
@keyframes cm-festa-circ { 0% { transform: scale(0); opacity: 0; } 18% { transform: scale(1.12); opacity: 1; } 28% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cm-desenha { to { stroke-dashoffset: 0; } }
@keyframes cm-some { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.cm-festa-txt { margin-top: -230px; padding: 8px 16px; border-radius: 20px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; box-shadow: var(--shadow); animation: cm-entra .3s .3s ease-out both, cm-some 1.9s ease-out both; }

/* ---- Retornos do dia ---- */
.cm-sec { margin-bottom: 22px; }
.cm-sec-tit { display: flex; align-items: center; gap: 9px; font-size: 15px; margin: 0 0 2px; }
.cm-sec-tit em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 9px; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); }
.cm-sec-ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); }
.cm-sec-dica { margin: 0 0 10px 37px; font-size: 12px; color: var(--ink-faint); }
.cm-sec-vazia { margin-left: 37px; font-size: 12.5px; color: var(--ink-faint); }
.cm-lista { display: flex; flex-direction: column; gap: 6px; }
.cm-linha { display: grid; grid-template-columns: 34px minmax(200px, 1.2fr) minmax(180px, 1.3fr) minmax(120px, auto) 56px auto; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--sc); border-radius: 10px; cursor: pointer; box-shadow: var(--lift); font-size: 13px; animation: cm-entra-card .3s ease-out both; animation-delay: calc(var(--i, 0) * 30ms); }
.cm-linha:hover { border-color: color-mix(in srgb, var(--sc) 50%, var(--line)); }
.cm-linha-quem small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.cm-linha-msg { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-soft); font-size: 12.5px; min-width: 0; }
.cm-linha-msg svg { flex: none; margin-top: 2px; color: var(--serie-1); }
.cm-linha-msg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-linha-msg .vazia { color: var(--ink-faint); font-style: italic; }
.cm-linha .cm-tempo { align-self: center; }
.cm-linha-acoes { display: inline-flex; gap: 2px; }
.cm-tudo-certo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 50px 0; color: var(--cor-receita); }
.cm-tudo-certo span { color: var(--ink-soft); font-size: 13px; }
.cm-ok-circ { fill: color-mix(in srgb, var(--cor-receita) 14%, transparent); stroke: var(--cor-receita); stroke-width: 2.5; }
.cm-ok-visto { fill: none; stroke: var(--cor-receita); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cm-desenha .6s .2s ease-out forwards; }

/* ---- Indicadores ---- */
.cm-kpis { margin-bottom: 14px; }
.cm-tabela td:not(:first-child), .cm-tabela th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.cm-nota { font-size: 11.5px; color: var(--ink-faint); margin: 10px 0 0; }

/* ---- Janelas ---- */
.cm-fundo { position: fixed; inset: 0; z-index: 900; background: rgba(20, 18, 30, .45); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow-y: auto; }
.cm-janela { width: 100%; max-width: 500px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); border-top: 4px solid var(--accent); animation: cm-entra .18s ease-out; }
.cm-jan-ganhou { border-top-color: var(--cor-receita); }
.cm-jan-perdeu { border-top-color: var(--warn); }
.cm-jan-ganhou [data-ok] { background: var(--cor-receita); border-color: var(--cor-receita); }
.cm-jan-perdeu [data-ok] { background: var(--warn); border-color: var(--warn); }
@keyframes cm-entra { from { opacity: 0; transform: translateY(8px); } }
.cm-jan-topo { display: flex; align-items: center; padding: 14px 18px 4px; }
.cm-jan-topo h3 { margin: 0; font-size: 17px; flex: 1; }
.cm-jan-x { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-faint); cursor: pointer; }
.cm-jan-corpo { padding: 8px 18px 4px; display: flex; flex-direction: column; gap: 12px; }
.cm-jan-corpo textarea { font: inherit; }
.cm-jan-quem { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.cm-jan-quem small { display: block; color: var(--ink-faint); font-size: 11.5px; }
.cm-jan-pe { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; }
.cm-resultado { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-res { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: border-color .15s, background .15s; }
.cm-res strong { display: block; font-size: 13px; color: var(--ink); }
.cm-res small { display: block; font-size: 11.5px; color: var(--ink-faint); }
.cm-res.ativo { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent); }
.cm-res[data-res="sem_resposta"].ativo { border-color: var(--serie-4); background: color-mix(in srgb, var(--serie-4) 9%, var(--surface)); color: color-mix(in srgb, var(--serie-4) 85%, var(--ink)); }
.cm-cadencia { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--serie-4) 8%, transparent); font-size: 12.5px; color: var(--ink-soft); }
.cm-cadencia p { margin: 8px 0 0; }
.cm-cadencia p.ruim { color: var(--warn); }
.cm-cad-linha { display: flex; align-items: center; }
.cm-cad-passo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cm-cad-passo i { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 11.5px; border: 2px solid color-mix(in srgb, var(--serie-4) 50%, var(--line)); color: var(--ink-faint); background: var(--surface); }
.cm-cad-passo small { font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.cm-cad-passo.feito i { background: var(--serie-4); border-color: var(--serie-4); color: #fff; }
.cm-cad-passo.atual i { border-color: var(--serie-4); color: var(--serie-4); box-shadow: 0 0 0 4px color-mix(in srgb, var(--serie-4) 25%, transparent); animation: cm-pula 1.2s ease-in-out infinite; }
.cm-cad-passo.fim i { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); color: var(--warn); }
.cm-cad-passo.fim.atual i { background: var(--warn); color: #fff; border-color: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 25%, transparent); }
.cm-cad-fio { flex: 1; height: 2px; margin: 0 4px 14px; background: color-mix(in srgb, var(--serie-4) 35%, var(--line)); }
.cm-rapidos { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-rapido { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.cm-rapido.ativo, .cm-rapido:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cm-retorno-data { display: flex; gap: 8px; margin-top: 6px; }
.cm-motivos { display: flex; flex-direction: column; gap: 4px; }
.cm-motivo { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; }
.cm-motivo input { width: auto; flex: none; }
.cm-motivo:has(input:checked) { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.cm-aviso { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.cfg-cm-form { max-width: 620px; display: flex; flex-direction: column; gap: 10px; }

/* ================== Gestão Kanban com o mesmo visual ================== */
.kb-esteira { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 14px 0 16px; padding: 4px 0; overflow-x: auto; }
.kb-est-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.kb-est-trilho { stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.kb-no { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 20px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--fc) 30%, var(--line)); font-size: 12.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
.kb-no i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); }
.kb-no em { font-style: normal; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 9px; color: var(--fc); background: color-mix(in srgb, var(--fc) 14%, transparent); }
.kb-no:hover { color: var(--fc); transform: translateY(-1px); }
.kb-no.active { color: #fff; background: var(--fc); border-color: var(--fc); box-shadow: 0 6px 16px -8px var(--fc); }
.kb-no.active i { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, #fff 35%, transparent); }
.kb-no.active em { color: var(--fc); background: #fff; }
.kb-no-comercial { border-style: dashed; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .cm-est-fluxo, .kb-est-fluxo, .cm-vazio-borda, .cm-vazio-grade, .cm-tempo i, .cm-card, .kb-card, .cm-linha,
  .cm-board.em-arraste .cm-alvo-borda rect, .cm-board.em-arraste .cm-alvo-ic, .cm-cad-passo.atual i { animation: none !important; }
}
@media (max-width: 760px) {
  .cm-linha { grid-template-columns: 34px 1fr; }
  .cm-linha > :nth-child(n+3) { grid-column: 2; }
  .cm-board { height: auto; }
  .cm-busca { min-width: 0; flex: 1; }
}


.mkt-ir-comercial { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--serie-2) 45%, var(--line)); background: color-mix(in srgb, var(--serie-2) 6%, transparent); font-size: 13px; color: var(--ink-soft); }
.mkt-ir-comercial span { flex: 1; }


.cm-grupo-fim { background: var(--bg); box-shadow: -14px 0 14px -12px rgba(0,0,0,.18); }
.cm-col { width: 266px; }
.cm-nova-col { width: 124px; }
.cm-pilula select { max-width: 150px; }
.cm-linha { grid-template-columns: 34px minmax(0, 1.25fr) minmax(0, 1fr) auto auto auto; padding-right: 14px; }
.cm-col.cm-alvo { width: 168px; }

/* ---- Comercial: tamanho padrão (02/10/2026, pedido do Willian: colunas e cartões todos do mesmo tamanho) ---- */
.cm-col, .cm-alvos { width: 280px !important; flex: none; }
.cm-alvos { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.cm-alvos .cm-col.cm-alvo { width: 100% !important; flex: 1; min-height: 0; }
.cm-grupo-fim { padding-left: 12px; }
.cm-grupo-tit { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.cm-grupo-tit span { flex: 1; }
.cm-nova-col { width: auto !important; flex: none; align-self: auto; flex-direction: row; gap: 4px; padding: 3px 9px; border-radius: 7px; border: 1px dashed color-mix(in srgb, var(--fc) 45%, var(--line)); font-size: 11px; letter-spacing: 0; text-transform: none; }
.cm-col-corpo { gap: 10px; }
.cm-card { flex: none; height: 184px; display: flex; flex-direction: column; overflow: hidden; }
.cm-c-msg { height: 36px; flex: none; overflow: hidden; }
.cm-c-tags { flex-wrap: nowrap; overflow: hidden; height: 22px; flex: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.cm-c-tags > * { flex: none; }
.cm-c-tags .cm-chips { flex-wrap: nowrap; }
.cm-c-acoes { margin-top: auto; }
.kcol-body > .kcard { flex: none; }
.cm-card { height: 212px; }
.cm-c-tags { margin-top: 8px; }
.cm-c-avisos { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; height: 22px; flex: none; margin-top: 6px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.cm-c-avisos > * { flex: none; }
.cm-c-semaviso { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--ink-faint); }
.cm-c-origem { font-size: 10.5px; color: var(--ink-faint); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); }
.cm-c-acoes { margin-top: auto; padding-top: 6px; }

/* ---- Gestão Kanban no padrão do Comercial (02/10/2026, pedido do Willian) ----
   Mesma largura de coluna (280px), mesma altura de cartão (212px), mesmas cores e estrutura. */
.kanban-board.kb-padrao { gap: 12px; height: calc(100vh - 330px); min-height: 440px; align-items: stretch; }
.kb-padrao .kanban-col.cm-col { width: 280px; padding: 0; border-radius: 12px; display: flex; flex-direction: column; min-height: 0; background: color-mix(in srgb, var(--cc) 4%, var(--side-bg)); border: 1px solid color-mix(in srgb, var(--cc) 30%, var(--line)); }
.kb-padrao .kcol-head.cm-col-cab { margin: 0; justify-content: flex-start; font-size: inherit; padding: 12px; }
.kb-padrao .kcol-head .kcol-nome { cursor: default; }
.kb-padrao .kcol-body.cm-col-corpo { padding: 10px; gap: 10px; }
.kb-padrao .kcol-body.drag-over { outline: none; background: color-mix(in srgb, var(--cc) 10%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cc) 45%, transparent); }
.kb-padrao .kcard.cm-card { min-height: 0; height: 212px; padding: 12px 12px 10px; line-height: normal; font-size: 12.5px; border-radius: 11px; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; }
.kb-padrao .kcard.cm-card.dragging { opacity: .45; transform: rotate(-2deg); }
.kb-c-msg { flex-direction: column; gap: 3px; }
.kb-c-msg .kb-parte { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kb-c-msg .kb-acao { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-soft); }
.kb-c-msg .vazia { color: var(--ink-faint); font-style: italic; }
.cm-c-tags .kc-risk { margin: 0; font-size: 10.5px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 10%, transparent); white-space: nowrap; }
.kb-padrao .cm-chip svg, .kb-padrao .cm-c-semaviso svg { width: 11px; height: 11px; }
.kb-padrao .kc-acoes { margin-left: 0; }
.kb-padrao .cm-c-acoes .kb-mover { right: 0; left: auto; bottom: 30px; top: auto; }
.kb-padrao .cm-c-acoes { position: relative; }
.kb-padrao .kb-nova-col { flex: none; width: 280px; display: flex; }
.kb-padrao .kb-nova-col .add-coluna-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 2px dashed color-mix(in srgb, var(--cc) 35%, var(--line)); background: transparent; color: var(--cc); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.kb-padrao .kb-nova-col .add-coluna-btn:hover { background: color-mix(in srgb, var(--cc) 7%, transparent); }
.kb-padrao .kb-nova-col .kb-nova-col-input { align-self: flex-start; width: 100%; }

/* ---- Animações novas: saúde da coluna, rastro ao mover, anel de proporção, anel no avatar novo ---- */
.cm-saude { height: 4px; background: color-mix(in srgb, var(--cc, var(--accent)) 10%, transparent); flex: none; overflow: hidden; }
.cm-saude svg { display: block; }
.cm-saude-g { transform-origin: left center; animation: cm-saude-cresce .9s cubic-bezier(.2,.8,.2,1) both; }
.cm-saude-verde { fill: var(--cor-receita); }
.cm-saude-amarelo { fill: var(--serie-4); }
.cm-saude-vermelho { fill: var(--warn); }
@keyframes cm-saude-cresce { from { transform: scaleX(0); } }
.cm-rastro { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.cm-rastro svg { overflow: visible; }
.cm-rastro-linha { fill: none; stroke: var(--rc); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: cm-rastro-desenha .7s cubic-bezier(.3,0,.2,1) forwards, cm-rastro-some 1.3s ease-out forwards; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rc) 50%, transparent)); }
.cm-rastro-ponto { fill: var(--rc); filter: drop-shadow(0 0 6px var(--rc)); animation: cm-rastro-some 1.3s ease-out forwards; }
.cm-rastro-pouso { fill: none; stroke: var(--rc); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: cm-rastro-pouso .6s .65s ease-out forwards; }
@keyframes cm-rastro-desenha { to { stroke-dashoffset: 0; } }
@keyframes cm-rastro-some { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cm-rastro-pouso { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
.cm-anel { flex: none; }
.cm-anel-fundo { fill: none; stroke: color-mix(in srgb, var(--fc) 22%, transparent); stroke-width: 3; }
.cm-anel-fatia { fill: none; stroke: var(--fc); stroke-width: 3; stroke-linecap: round; animation: cm-anel-enche 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cm-anel-enche { from { stroke-dasharray: 0 var(--c); } }
.kb-no.active .cm-anel-fundo { stroke: color-mix(in srgb, #fff 35%, transparent); }
.kb-no.active .cm-anel-fatia { stroke: #fff; }
.cm-av { position: relative; }
.cm-av.novo::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px dashed var(--av); animation: cm-gira 6s linear infinite; }
@keyframes cm-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cm-saude-g, .cm-anel-fatia, .cm-av.novo::after { animation: none !important; }
}
.kb-c-msg .kb-parte { display: block; }
.kb-c-msg .kb-parte .logo-empresa, .kb-c-msg .kb-parte img { vertical-align: -3px; }

/* ---- Arrastar colunas e fases (02/10/2026) ---- */
.cm-col-cab[draggable="true"], .kb-padrao .kcol-head[draggable="true"] { cursor: grab; }
.cm-col-cab[draggable="true"]:active, .kb-padrao .kcol-head[draggable="true"]:active { cursor: grabbing; }
.cm-col.coluna-arrastando, .kanban-col.coluna-arrastando { opacity: .4; transform: scale(.98); }
.cm-col.alvo-esq, .kanban-col.alvo-esq { box-shadow: -4px 0 0 0 var(--accent); }
.cm-col.alvo-dir, .kanban-col.alvo-dir { box-shadow: 4px 0 0 0 var(--accent); }
.kb-no[draggable="true"] { cursor: grab; }
.kb-no.arrastando { opacity: .4; }
.kb-no.alvo-fase { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.kb-no-nova, .kb-no-cfg { border-style: dashed; color: var(--accent); --fc: var(--accent); }
.kb-no-cfg { padding: 6px 10px; }
.cfg-fases td { vertical-align: middle; }
.cfg-fases tr.inativa td { opacity: .5; }
.cfg-fase-nome { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.cfg-fase-nome i { width: 10px; height: 10px; border-radius: 50%; background: var(--fc); }
.cfg-fase-sis { font-size: 11px; color: var(--ink-faint); padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); }
.cfg-fase-jud { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.cfg-fase-cores { display: inline-flex; gap: 4px; }
.cfg-cor { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; }
.cfg-cor.ativa { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.cfg-fase-acoes { white-space: nowrap; text-align: right; }
.cfg-fase-acoes .btn-ghost { padding: 4px 8px; font-size: 12px; }
.cfg-fase-acoes .perigo { color: var(--warn); }
.cfg-nova-fase { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cfg-nova-fase input[name="nome"] { min-width: 260px; }
.cfg-fase-acoes > div { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.cfg-cor { width: 16px; height: 16px; }
.cfg-fase-cores { gap: 3px; }
.kb-esteira { gap: 4px; scrollbar-width: thin; }
.kb-no { padding: 5px 10px; font-size: 12px; gap: 6px; }
.kb-no-cfg { padding: 5px 9px; }

/* ---- Janelas do CRM no lugar das caixas do navegador (02/10/2026) ---- */
.crm-dialogo { z-index: 1300; }
.crm-dialogo .cm-janela { max-width: 440px; }
.crm-dlg-texto { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.crm-dlg-marcar { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.crm-dlg-marcar input { width: auto; }
.crm-dlg-erro { outline: 2px solid var(--warn) !important; }

/* ---- Alinhamento (02/10/2026, Willian: "quadro desalinhado, aparece o fundo") ---- */
.cm-grupo-tit { height: 30px; box-sizing: border-box; margin-bottom: 8px; padding-bottom: 0; align-items: center; }
.cm-grupo-tit .cm-nova-col { padding: 2px 8px; }
.cm-grupo-fim { background: transparent !important; box-shadow: none !important; padding-left: 12px; }
.cm-grupo-fim .cm-grupo-tit { border-bottom-color: color-mix(in srgb, var(--ink-soft) 30%, transparent); }
.cm-grupo-fim .cm-grupo-tit span, .cm-grupo-fim .cm-grupo-tit { background: none; }
.cm-alvos { padding: 0; border-radius: 12px; background: var(--side-bg); box-shadow: -10px 0 18px -14px rgba(0,0,0,.35); }
.cm-board.em-arraste .cm-alvos, .cm-alvos:hover { box-shadow: -10px 0 18px -14px rgba(0,0,0,.35); }
.cm-barra { gap: 8px; }
.cm-busca { min-width: 200px; }
.cm-pilula select { max-width: 120px; }
.cm-barra .atv-ferr { padding: 6px 8px; }
@media (max-width: 1500px) {
  .kb-esteira { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; overflow: visible; }
  .kb-est-svg { display: none; }
}
.cm-busca { min-width: 180px; }

/* ---- Botão × padrão para fechar quadros e janelas (02/10/2026, pedido do Willian) ---- */
.fechar-x { flex: none; width: 30px; height: 30px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; padding: 0; font-size: 0; line-height: 0; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.fechar-x:hover { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); transform: rotate(90deg); }
.fechar-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-jan-topo .fechar-x { margin-left: 12px; }
.atv-filtros-cab { display: flex; align-items: center; gap: 10px; }
.notif-cab { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 6px 6px 8px 10px; margin: -6px -6px 4px; background: var(--surface); border-bottom: 1px solid var(--line); }
.notif-cab strong { font-size: 13.5px; color: var(--ink); }
.lt-painel { padding-top: 40px !important; position: absolute; }
.lt-painel > .fechar-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; }
.kb-filtros { position: relative; padding-right: 48px !important; }
.kb-filtros > .fechar-x { position: absolute; top: 8px; right: 8px; }
.integ-painel h3, #advbox-painel h3 { display: flex; align-items: center; gap: 10px; }

.cfg-secao-titulo { display: flex; align-items: center; gap: 10px; }
.fechar-x-auto { margin-left: 8px; }

/* ---- Comercial: "Nova coluna", "Fechou contrato" e "Perdido" como colunas normais (02/10/2026) ---- */
.cm-grupo-fim { position: static !important; padding-left: 0 !important; background: none !important; box-shadow: none !important; }
.cm-grupo-fim .cm-grupo-tit { border-bottom-color: color-mix(in srgb, var(--ink-soft) 30%, transparent); }
.cm-col-nova { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: inherit; cursor: pointer; color: var(--accent); background: transparent !important; border: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--line)) !important; transition: background .2s; }
.cm-col-nova:hover { background: color-mix(in srgb, var(--accent) 6%, transparent) !important; }
.cm-col-nova strong { font-size: 14px; }
.cm-col-nova span { font-size: 12px; color: var(--ink-faint); }
.cm-col-resultado { --ac: var(--cc); }
.cm-col-res-ic { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--cc); }
.cm-solte { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 10px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); background: color-mix(in srgb, var(--cc) 7%, transparent); }
.cm-solte > svg:not(.cm-alvo-borda) { flex: none; color: var(--cc); }
.cm-solte .cm-alvo-borda rect { stroke: color-mix(in srgb, var(--cc) 50%, transparent); }
.cm-board.em-arraste .cm-col-resultado .cm-solte { background: color-mix(in srgb, var(--cc) 14%, transparent); }
.cm-board.em-arraste .cm-col-resultado .cm-alvo-borda rect { animation: cm-formiga .8s linear infinite; stroke: var(--cc); }
.cm-col-resultado.drag-over { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 35%, transparent); }
.cm-res-rotulo { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 2px 0; }
.cm-res-item { flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; font-size: 12.5px; }
.cm-res-item:hover { border-color: color-mix(in srgb, var(--cc) 45%, var(--line)); }
.cm-res-item .cm-av { width: 28px; height: 28px; font-size: 12px; box-shadow: none; }
.cm-res-item div { flex: 1; min-width: 0; }
.cm-res-item strong, .cm-res-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-res-item small { color: var(--ink-faint); font-size: 11px; }
.cm-res-item em { font-style: normal; font-size: 11px; color: var(--ink-faint); }

/* ---- Rolagem dos quadros (02/10/2026): barra grossa, setas ‹ › e arrastar o fundo ---- */
.quadro-rolagem { position: relative; }
.cm-board, .kanban-board { scrollbar-width: auto; scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--line)) color-mix(in srgb, var(--ink) 6%, transparent); padding-bottom: 4px; }
.cm-board::-webkit-scrollbar, .kanban-board::-webkit-scrollbar { height: 16px; }
.cm-board::-webkit-scrollbar-track, .kanban-board::-webkit-scrollbar-track { background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 8px; }
.cm-board::-webkit-scrollbar-thumb, .kanban-board::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
.cm-board::-webkit-scrollbar-thumb:hover, .kanban-board::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
.quadro-seta { position: absolute; top: 50%; transform: translateY(-50%) scale(.9); z-index: 6; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--accent); box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.quadro-seta-esq { left: -10px; }
.quadro-seta-dir { right: -10px; }
.quadro-rolagem.pode-esq .quadro-seta-esq, .quadro-rolagem.pode-dir .quadro-seta-dir { opacity: .92; pointer-events: auto; transform: translateY(-50%) scale(1); }
.quadro-seta:hover { background: var(--accent); color: #fff; opacity: 1; }
.cm-board, .kanban-board { cursor: default; }
.cm-board.quadro-puxando, .kanban-board.quadro-puxando { cursor: grabbing; user-select: none; }

/* ---- Enquadramento dos quadros (02/10/2026, pedido do Willian: "cartões fora de enquadro") ----
   quadros.js calcula --col-w para que só caibam colunas INTEIRAS na tela (nada cortado na borda direita)
   e alinha a rolagem sempre no começo de uma coluna. Espaço entre colunas igual em todo o quadro (12px). */
.cm-board { gap: 12px; }
.cm-grupo-fim { padding-left: 0; box-shadow: none; }
.cm-board .cm-col, .cm-board .cm-alvos, .kb-padrao .kanban-col.cm-col, .kb-padrao .kb-nova-col { width: var(--col-w, 280px) !important; }
/* cartões com a mesma largura em todas as colunas, com ou sem barrinha de rolagem na coluna */
.cm-col-corpo { scrollbar-gutter: stable; padding-right: 2px !important; }
.cm-col-corpo::-webkit-scrollbar { width: 8px; }
/* setas menores e mais para fora, para não cobrir os cartões */
.quadro-seta { width: 34px; height: 34px; }
.quadro-seta-esq { left: -17px; }
.quadro-seta-dir { right: -17px; }

/* Meu dia: botões da barra com o nome escrito ao lado do ícone (06/10/2026) */
.atv-icone.com-nome { width: auto; gap: 6px; padding: 0 10px; font-family: inherit; font-size: 13px; white-space: nowrap; }
.atv-icone.com-nome .atv-icone-selo { position: static; margin-left: 2px; }
/* Meu dia: aniversariantes (06/10/2026) */
.atv-niver { margin: 12px 0 4px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ouro) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ouro) 28%, transparent); }
.atv-niver-cab { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.atv-niver-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.atv-niver-item:first-of-type { border-top: none; }
.atv-niver-item .atv-corpo { flex: 1; min-width: 0; }
.atv-niver-nome { font-weight: 600; cursor: pointer; color: var(--ink); }
.atv-niver-nome:hover { color: var(--accent); }
.atv-niver-zap { text-decoration: none; white-space: nowrap; }
.atv-niver-ok { font-size: 12.5px; color: var(--ok, #1f8a5b); white-space: nowrap; }

/* Publicações: cliente sugerido pelo nome (06/10/2026) */
.sug-nome { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ouro); }
.sug-nome strong { color: var(--ink); }
.pub-cliente { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--ouro); background: var(--brass-bg); }
.pub-nosso { text-decoration: underline; text-decoration-color: var(--ouro); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Agenda: marca do prazo fatal no dia do vencimento (06/10/2026) */
.ag-chip.ag-fatal, .ag-card.ag-fatal { background: color-mix(in srgb, var(--crit, #b3261e) 12%, transparent); border-left-color: var(--crit, #b3261e); color: var(--crit, #b3261e); font-weight: 600; }
.ag-card.ag-fatal .tag { background: var(--crit, #b3261e); color: #fff; }

/* Agenda: responsável pelo primeiro nome / bolinha de cor (06/10/2026) */
.ag-resp { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.ag-resp i, .ag-resp-bola { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ag-resp-bola { margin-left: 4px; }

/* Agenda (mês): até 2 linhas por compromisso (06/10/2026) */
.ag-chip { align-items: flex-start; }
.ag-chip-txt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ag-chip .ag-resp-bola { margin-top: 4px; }

/* Marketing: assistente (chat) — 07/10/2026 */
.mkt-chat { display: flex; flex-direction: column; gap: 10px; min-height: 520px; }
.mkt-chat-msgs { flex: 1; overflow-y: auto; max-height: 60vh; display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.mkt-chat-msg { max-width: 80%; padding: 10px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; }
.mkt-chat-msg.eu { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.mkt-chat-msg.ia { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 4px; }
.mkt-chat-msg.pensando { color: var(--ink-soft); font-style: italic; }
.mkt-chat-vazio { margin: auto; text-align: center; max-width: 560px; color: var(--ink-soft); font-size: 13px; }
.mkt-chat-vazio strong { color: var(--ink); font-size: 14.5px; }
.mkt-chat-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.mkt-chat-form { display: flex; gap: 8px; align-items: flex-end; }
.mkt-chat-form textarea { flex: 1; resize: vertical; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; }

/* Ficha do processo: linha do tempo com a origem de cada andamento (07/10/2026) */
.and-origem { font-size: 10.5px; color: var(--ink-faint); margin-left: 6px; font-weight: 500; }
.and-tribunal, .and-publicacao { opacity: .95; }
.and-teor { white-space: pre-wrap; font-size: 12px; color: var(--ink-soft); background: var(--surface-2); border-radius: 6px; padding: 8px 10px; margin-top: 6px; max-height: 260px; overflow: auto; }

/* Kanban: barra numa linha só no notebook (07/10/2026) */
#kb-resp { max-width: 180px; }
.kb-barra .atv-busca { max-width: 230px; }

/* Criação de peças: IA (07/10/2026) */
.pc-ia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-ia-avisos { background: color-mix(in srgb, var(--ouro) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ouro) 30%, transparent); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin: 6px 0 10px; }
.pc-ia-avisos ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Financeiro: revisão de 09/10/2026 ---------- */
.fin-grid { align-items: stretch; }
.fin-grafico { display: flex; flex-direction: column; }
.fin-grafico .bar-chart { flex: 1; min-height: 160px; height: auto; }
.fin-legenda { display: flex; gap: 14px; font-size: 11px; color: var(--ink-soft); margin: -4px 0 10px; }
.fin-legenda span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.fin-legenda .fl-receita::before { background: var(--accent); }
.fin-legenda .fl-despesa::before { background: var(--warn); }
.fin-metric-link { cursor: pointer; }
.fin-metric-link:hover .label { color: var(--accent); }
.fin-acoes { margin-bottom: 8px; }
.fin-acoes .btn-receita { flex: 1; }
.fin-btn-hon { width: 100%; justify-content: center; margin-bottom: 12px; font-size: 12.5px; }
.conta-item { cursor: pointer; }
.conta-item small { display: block; font-size: 10.5px; color: var(--ink-faint); font-weight: 400; }
.conta-item.ativa { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.fin-gerir-contas { display: block; text-align: center; margin-top: 10px; font-size: 12px; }
.fin-abas { align-items: center; }
.fin-abas .spacer { flex: 1; }
.fin-filtro-empresa { width: auto; padding: 6px 10px; margin-bottom: 6px; font-size: 12.5px; }
.fin-empresa { font-size: 10.5px; color: var(--ink-faint); }
.fin-empresa.vazia { color: var(--ouro); }
.fin-tag-atraso { font-size: 10.5px; font-weight: 700; color: var(--warn); }
.fin-tag-conta { display: inline-flex; gap: 6px; align-items: center; }
.fin-tag-conta a { color: inherit; text-decoration: none; }
.fin-atraso-info { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; }
.fin-atrasos { display: flex; flex-direction: column; gap: 8px; }
.fin-atraso-cliente { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.fin-atraso-cliente summary { display: flex; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.fin-atraso-cliente summary::-webkit-details-marker { display: none; }
.fin-atraso-cliente .fac-nome { flex: 1; font-weight: 600; font-size: 13px; }
.fin-atraso-cliente .fac-nome small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-faint); }
.fin-atraso-cliente .fac-qtd { font-size: 11.5px; color: var(--ink-soft); }
.fin-atraso-cliente .fac-total { font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; min-width: 110px; text-align: right; }
.fin-atraso-cliente table { margin: 0; }
.fin-atraso-cliente tr[data-id] { cursor: pointer; }
.hon-intro { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.hon-aviso { font-size: 13px; color: var(--warn); font-weight: 600; }
.hon-sim { margin-top: 14px; }
.hon-sim tfoot td { border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .fin-metrics { grid-template-columns: 1fr 1fr; }
  .fin-grid { grid-template-columns: 1fr; }
  .fin-abas { flex-wrap: wrap; }
  .fin-atraso-cliente summary { flex-wrap: wrap; }
  .fin-atraso-cliente .fac-total { min-width: 0; }
}
.fin-acoes button { white-space: nowrap; }
.fin-acoes .btn-despesa { flex: 1; }
.conta-item .conta-saldo { white-space: nowrap; padding-left: 8px; }
.fin-grafico .bar-chart { min-height: 200px; max-height: 300px; }
.fin-grid .contas-lista { max-height: 230px; overflow-y: auto; padding-right: 2px; }
.bi-nota.bi-aviso { color: var(--ouro); font-weight: 600; }
.bi-nota-empresa { margin: -6px 0 12px; }
.usr-avisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; }
.usr-aviso-dono { font-size: 11px; color: var(--ink-faint); }

/* ---------- API do CRM (Integrações e API, 09/10/2026) ---------- */
.api-crm { margin-top: 16px; }
.api-ajuda { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.api-nova { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.api-nova .toolbar-input { flex: 1; min-width: 200px; }
.api-pref { font-size: 11px; color: var(--ink-faint); }
.api-tabela td { vertical-align: top; }
.api-st { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.api-st.ok { color: var(--positivo); background: color-mix(in srgb, var(--positivo) 12%, transparent); }
.api-st.erro { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.api-chave-mostra { border: 1px solid var(--ouro); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; background: color-mix(in srgb, var(--ouro) 8%, var(--surface)); }
.api-chave-mostra p { margin: 0 0 6px; font-size: 13px; }
.api-chave-mostra code, .api-manual code { font-size: 12px; word-break: break-all; }
.api-manual { margin: 12px 0; font-size: 13px; color: var(--ink-soft); }
.api-manual summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.api-sub { margin: 16px 0 8px; font-size: 13px; }
.os-form { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 12px; background: var(--surface); }
.os-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.integ-saude { font-size: 11px; margin-top: 6px; font-weight: 600; }
.integ-saude.ok { color: var(--positivo); }
.integ-saude.falha { color: var(--warn); }
.integ-saude.pausa { color: var(--ink-soft); }

/* Botão de olho nos campos de senha (js/olho-senha.js, 10/10/2026). */
.senha-olho { position: relative; display: block; width: 100%; }
.senha-olho > input { width: 100%; padding-right: 42px !important; }
.senha-olho-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.senha-olho-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* Chat ao vivo (js/chat.js, 13/10/2026): fila de conversas, conversa aberta e o caso do cliente com fase e etapa. */
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr) 270px; height: calc(100vh - 96px); min-height: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--lift); }
.chat-fila { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--side-bg); }
.chat-fila-topo { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px; }
.chat-busca { min-width: 0; flex: 1; padding: 6px 10px; }
.chat-busca input { font-size: 13px; }
.chat-filtros { display: flex; gap: 4px; padding: 0 10px 8px; }
.chat-filtros button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.chat-filtros button:hover { background: var(--surface-2); }
.chat-filtros button.ativo { background: var(--side-active-bg); color: var(--ink); }
.chat-aviso-conexao { margin: 0 10px 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 600; }
.chat-aviso-conexao a { text-decoration: underline; cursor: pointer; color: inherit; }
.chat-lista { flex: 1; min-height: 0; overflow-y: auto; }
.chat-vazio { margin: 0; padding: 22px 16px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.chat-item { display: flex; gap: 10px; padding: 10px 12px; cursor: pointer; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.chat-item:hover { background: var(--surface-2); }
.chat-item.aberta { background: var(--side-active-bg); }
.chat-item .cm-av { width: 36px; height: 36px; box-shadow: none; }
.chat-item-txt { min-width: 0; flex: 1; }
.chat-item-l1 { display: flex; align-items: baseline; gap: 8px; }
.chat-item-l1 strong { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-l1 small { flex: none; font-size: 11px; color: var(--ink-faint); }
.chat-item-l2 { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.chat-item-l2 span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-l2 i { font-style: normal; color: var(--ink-faint); }
.chat-item-l2 em { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cor-receita); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-item.nova .chat-item-l1 strong, .chat-item.nova .chat-item-l2 span { color: var(--ink); font-weight: 700; }
.chat-item.nova .chat-item-l1 small { color: var(--cor-receita); font-weight: 700; }
.chat-item-l3 { display: flex; align-items: center; gap: 6px; margin-top: 5px; min-width: 0; }
.chat-item-l3 .tag { font-size: 10.5px; padding: 1px 7px; flex: none; }
.chat-etapa { font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-etapa.sem { color: var(--warn); font-weight: 600; }

.chat-meio { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.chat-inicio { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-faint); text-align: center; padding: 20px; }
.chat-inicio strong { font-size: 16px; color: var(--ink-soft); }
.chat-inicio span { font-size: 13px; }
.chat-cab { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-cab .cm-av { box-shadow: none; }
.chat-cab strong { display: block; font-size: 14.5px; }
.chat-cab small { font-size: 12px; color: var(--ink-faint); }
.chat-fluxo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.chat-dia { align-self: center; margin: 8px 0 4px; }
.chat-dia span { font-size: 11px; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.chat-msg { align-self: flex-start; max-width: min(72%, 560px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 7px 10px 5px; font-size: 13.5px; line-height: 1.42; overflow-wrap: anywhere; }
.chat-msg.minha { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: color-mix(in srgb, var(--accent) 11%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.chat-quem { display: block; font-size: 10.5px; font-weight: 700; color: var(--accent); margin-bottom: 1px; }
.chat-txt a { color: var(--accent); text-decoration: underline; }
.chat-hora { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }
.chat-st { display: inline-flex; color: var(--ink-faint); }
.chat-st.lida { color: var(--serie-1); }
.chat-apagada, .chat-tipo { font-size: 12.5px; color: var(--ink-faint); }
.chat-img { display: block; max-width: 100%; max-height: 300px; border-radius: 8px; margin-bottom: 4px; }
.chat-img.figurinha { max-height: 130px; }
.chat-msg audio { display: block; width: 260px; max-width: 100%; height: 38px; }
.chat-msg video { display: block; max-width: 100%; max-height: 300px; border-radius: 8px; }
.chat-arquivo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 13px; text-decoration: none; margin-bottom: 4px; }
.chat-arquivo:hover { color: var(--accent); }
.chat-escrever { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line); }
.chat-escrever textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; padding: 9px 12px; max-height: 140px; outline: 0; }
.chat-escrever textarea:focus { border-color: var(--accent); }
.chat-enviar { height: 38px; width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; }

.chat-caso { min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-caso:empty { display: none; }
.chat-caso h4 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.chat-caso-nota { margin: 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.4; }
.chat-caso-l { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.chat-caso-l .tag-empresa { flex: none; white-space: nowrap; }
.chat-caso-l.apagado { font-size: 12px; color: var(--ink-soft); }
.chat-cliente { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.chat-cliente:hover { color: var(--accent); }
.chat-sep { height: 1px; background: var(--line); margin: 4px 0; }
.chat-largo { width: 100%; justify-content: center; }
.chat-fecha { background: var(--cor-receita); border-color: var(--cor-receita); }
.chat-vinc-lista { display: flex; flex-direction: column; gap: 2px; }
.chat-vinc-lista button { display: flex; align-items: center; gap: 7px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); text-align: left; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.chat-vinc-lista button:hover { background: var(--surface-2); color: var(--accent); }

.chat-conexao { max-width: 560px; width: 100%; margin: 0 auto; padding: 22px 20px; overflow-y: auto; }
.chat-conexao h3 { margin: 0 0 14px; font-size: 16px; }
.chat-passo { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.chat-passo h4 { margin: 0; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.chat-passo h4 i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-passo.feito h4 i { background: var(--cor-receita); color: #fff; }
.chat-passo p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.chat-passo p.ruim { color: var(--warn); font-weight: 600; }
.chat-passo a, .chat-desligar a { color: var(--accent); cursor: pointer; text-decoration: underline; font-size: 12px; }
.chat-ok { display: flex; align-items: center; gap: 6px; color: var(--cor-receita) !important; font-weight: 600; }
.chat-linha { display: flex; gap: 8px; }
.chat-linha input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; padding: 8px 10px; }
.chat-sessao { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.chat-sessao strong { display: block; font-size: 13px; }
.chat-sessao small { font-size: 11.5px; color: var(--ink-faint); }
.chat-qr { display: grid; place-items: center; min-height: 240px; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: #555; font-size: 13px; padding: 10px; }
.chat-qr img { width: 240px; height: 240px; }
.chat-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
.chat-desligar { margin: 6px 0 0; text-align: right; }
.chat-desligar a { color: var(--ink-faint); }
@media (max-width: 1150px) { .chat { grid-template-columns: 260px minmax(0, 1fr); } .chat-caso { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: 240px; } }
.chat-meio:has(+ .chat-caso:empty) { grid-column: 2 / -1; }
.chat-linha .btn-primary { white-space: nowrap; flex: none; }
/* Arquivo, foto e voz no chat */
.chat-bt { height: 38px; width: 36px; flex: none; align-items: center; justify-content: center; }
.chat-bt.gravando { color: #fff; background: var(--warn); animation: chat-gravando 1.2s ease-in-out infinite; }
@keyframes chat-gravando { 50% { opacity: .55; } }
.chat-anexo { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface-2); border-top: 1px solid var(--line); color: var(--ink-soft); }
.chat-anexo[hidden] { display: none; }
.chat-anexo img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.chat-anexo audio { height: 36px; width: 240px; max-width: 45%; flex: none; }
.chat-anexo div { flex: 1; min-width: 0; }
.chat-anexo strong { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-anexo small { font-size: 11.5px; color: var(--ink-faint); }
.chat-anexo.enviando { opacity: .55; pointer-events: none; }
.chat-meio.soltar { outline: 2px dashed var(--accent); outline-offset: -6px; }
.chat-guardar, .chat-guardado { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; font-weight: 600; }
.chat-guardar { color: var(--accent); cursor: pointer; }
.chat-guardar:hover { text-decoration: underline; }
.chat-guardado { color: var(--cor-receita); }