/*
  Listas do Flow no desenho das atividades do WeManage (pedido da Laise em
  23/10/2026: "deixa o design de qualquer lista no aplicativo Flow no mesmo
  design das páginas de atividades do weManage").

  O modelo é a vista Lista da aba Atividades do WeManage
  (`~/Sites/wemanage/src/styles/atividades-tabela.css`), medida na tela:
  caixa com borda e cantos de 12px, cabeçalho fixo em tom de papel com texto
  de 12px seminegrito, linhas finas de 38px com divisórias nas duas direções,
  título em seminegrito numa linha só, e status, etiqueta, data e marca em
  pílulas coloridas (fundo lavado, texto puxado para a tinta).

  Este arquivo só muda o desenho. Quais itens entram em cada lista, a ordem, os
  cliques e os dados continuam nos módulos de cada tela. Ele é carregado depois
  dos estilos do painel e dos módulos; onde um módulo injeta o próprio estilo
  em tempo de execução (Directs, Edições), a regra daqui leva `html` na frente
  para ganhar sem `!important`.

  Listas cobertas: Planejamento na vista Lista, Inbox na vista Lista (temas
  longos e conteúdos curtos), Directs (Palavras e Leads), Design Maker (tabela
  de gastos), Central de edições (Falta você aprovar e Edições anteriores),
  Histórico do Dashboard e a gaveta Para aprovar. Galerias de cards, colunas do
  Kanban e o Virais do Mercado (desenho do Jack, decisão dela de 20/10) ficam
  como estão.

  Os botões, abas e filtros dessas telas também seguem o WeManage (segundo
  pedido dela no mesmo dia, ao ver a primeira versão: "Os botões estão
  diferentes, o estilo está diferente. E a lista não está igual a do
  WeManage"). O modelo é a barra da aba Atividades (`.col-barra`, `.segmentado`,
  `.btn-principal`, `.chave-concluidos` e `.btn-sutil` do WeManage), na cor da
  marca escolhida no Flow (`--accent`): filtros num cartão tingido da marca,
  rótulos em maiúsculas, campos de cantos 10px, abas e formas de ver numa pílula
  com a ativa cheia na cor da marca, botão principal em pílula e botão
  secundário de cantos 8px. Tamanho e fonte são os mesmos em todas as seções.
*/

:root {
  --lista-fundo: #fffcf8;
  --lista-cab: #f5efe8;
  --lista-tinta: #1e1b2e;
  --lista-linha: rgba(30, 27, 46, 0.1);
  --lista-linha-forte: rgba(30, 27, 46, 0.18);
  --lista-apagado: #585262;
  --lista-sombra: 0 2px 6px rgba(30, 27, 46, 0.06);
  --lista-hover: color-mix(in srgb, var(--lista-tinta) 4%, var(--lista-fundo));
  /* Fundo de linha feita, o verde do estado do cartão do WeManage. */
  --lista-feito: #cdebd8;
  --lista-feito-cor: #2e9e5b;
  /* A cor da marca escolhida no Flow (o painel troca --accent na raiz). */
  --lista-marca: var(--accent, #d97559);
}

/* ── Caixa ──────────────────────────────────────────────────────────────── */
/* A altura limitada é o que deixa o cabeçalho fixo: a caixa vira o contêiner
   de rolagem e o `sticky` prende dentro dela, como no WeManage. */
.plt-wrap,
.lg-tabela-wrap {
  max-width: 100%;
  max-height: max(360px, calc(100dvh - 240px));
  overflow: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--lista-linha-forte);
  border-radius: 12px;
  background: var(--lista-fundo);
  box-shadow: var(--lista-sombra);
}
/* Directs e Design Maker não têm caixa em volta: a própria tabela vira a caixa. */
html .dr-tab,
.dm-tabela {
  border: 1px solid var(--lista-linha-forte);
  border-radius: 12px;
  background: var(--lista-fundo);
  box-shadow: var(--lista-sombra);
  overflow: hidden;
}

/* ── Tabela ─────────────────────────────────────────────────────────────── */
.plt,
.lg-tabela,
html .dr-tab,
.dm-tabela {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--lista-tinta);
  background: var(--lista-fundo);
}
.plt th, .plt td,
.lg-tabela th, .lg-tabela td,
html .dr-tab th, html .dr-tab td,
.dm-tabela th, .dm-tabela td {
  padding: 5px 10px;
  border-top: 0;
  border-bottom: 1px solid var(--lista-linha);
  border-right: 1px solid var(--lista-linha);
  text-align: left;
  vertical-align: middle;
  background: var(--lista-fundo);
}
.plt tr > :last-child,
.lg-tabela tr > :last-child,
html .dr-tab tr > :last-child,
.dm-tabela tr > :last-child { border-right: 0; }
.plt tbody tr:last-child td,
.lg-tabela tbody tr:last-child td,
html .dr-tab tbody tr:last-child td,
.dm-tabela tbody tr:last-child td { border-bottom: 0; }

/* Cabeçalho fixo, em tom de papel e texto discreto, sem caixa alta. */
.plt thead th,
.lg-tabela thead th,
html .dr-tab thead th,
.dm-tabela th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 7px 10px;
  background: var(--lista-cab);
  border-bottom: 1px solid var(--lista-linha-forte);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lista-apagado);
  white-space: nowrap;
}

/* Sem zebra; o retorno de passar o mouse é o leve escurecido do WeManage. */
.plt tbody tr:nth-child(even) td,
.lg-tabela tbody tr:nth-child(even) { background: var(--lista-fundo); }
.plt tbody tr:hover td,
.pp-tabela tbody tr:hover td,
.lg-tabela tbody tr:hover td,
html .dr-tab tr.dr-click:hover td,
.dm-tabela tbody tr:hover td { background: var(--lista-hover); }
.lg-tabela tbody tr:hover { background: none; }

/* ── Planejamento › Lista ───────────────────────────────────────────────── */
.plt .pp-th { gap: 5px; }
.plt .pp-ico { font-size: 11px; }
.plt .pd-ord:hover { color: var(--lista-tinta); }

/* Título numa linha só, em seminegrito; o que não couber termina em reticências. */
.plt td.pd-t { min-width: 380px; }
.pd-t .pd-tt { max-width: 460px; align-items: center; }
.pd-t .pd-nome {
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
.pd-t .pd-lapis { opacity: 0; font-size: 12px; }
.plt tr:hover .pd-lapis,
.plt tr:focus-within .pd-lapis { opacity: 1; }
@media (hover: none) { .pd-t .pd-lapis { opacity: 1; } }
.plt-titulo { font-weight: 600; }

/* Formato, duração, status e propriedades: a caixa de escolha vira pílula. */
.plt .pd-pill,
.plt .plt-sel {
  border-radius: 999px;
  padding: 3px 24px 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  min-height: 0;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--pc, var(--lista-linha)) 42%, transparent);
  background-color: color-mix(in srgb, var(--pc, var(--lista-fundo)) 13%, var(--lista-fundo));
  color: color-mix(in srgb, var(--pc, var(--lista-tinta)) 68%, var(--lista-tinta));
}
/* Os ícones das plataformas ficam ao lado do status, na mesma linha. */
.plt td:has(> .pev-plats) { white-space: nowrap; }
.plt td > .pev-plats { display: inline-flex; vertical-align: middle; margin: 0 0 0 6px; }
.plt .pd-pill:hover { background-color: color-mix(in srgb, var(--pc, var(--lista-fundo)) 20%, var(--lista-fundo)); }
.plt .pp-sel.vazia {
  border-style: dashed;
  border-color: var(--lista-linha-forte);
  background-color: transparent;
  color: var(--lista-apagado);
}

/* Marca: o selo cheio, em formato de pílula, como a prioridade do WeManage. */
.plt .rtag,
.lg-tabela .rtag {
  display: inline-block;
  min-width: 34px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
}

/* Tipo (Longo, Curto, Carrossel): etiqueta suave de cantos de 6px, como o projeto. */
.plt .pev-fmt {
  height: auto;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 18px;
  background: color-mix(in srgb, var(--lista-apagado) 9%, var(--lista-fundo));
  border: 1px solid color-mix(in srgb, var(--lista-apagado) 18%, transparent);
  color: var(--lista-tinta);
}

/* Datas: o campo de data enxuto como uma pílula. A data em branco continua
   marcada em laranja tracejado, que é o aviso de "falta definir". */
.plt td.pd-d input {
  border: 1px solid var(--lista-linha-forte);
  border-radius: 999px;
  background: var(--lista-fundo);
  padding: 2px 8px;
  font-size: 12px;
  color: var(--lista-tinta);
}
.plt td.pd-vazia input,
.plt td.pd-d input.vazia {
  border: 1px dashed var(--accent-deep);
  background: var(--accent-wash);
  color: var(--lista-apagado);
}

/* Texto curto editado direto na célula: sem moldura até receber o foco. */
.plt .pp-in { padding: 3px 6px; font-size: 12.5px; border-radius: 6px; }
.plt .pp-multi { min-height: 26px; padding: 2px 6px; border-radius: 6px; }
.plt .pp-chip { font-size: 11.5px; font-weight: 600; padding: 2px 9px; }
.plt .pp-vazio, .plt .pd-off { color: var(--lista-apagado); font-size: 12px; white-space: nowrap; }

/* Peça publicada: a linha fica no verde de feito do WeManage, com a marca na esquerda. */
.plt tbody tr.pd-ancora-pub td,
.plt tbody tr.pd-ancora-pub:hover td { background: var(--lista-feito); color: var(--lista-tinta); }
.plt tbody tr.pd-ancora-pub td:first-child { box-shadow: inset 3px 0 0 var(--lista-feito-cor); }
.plt tbody tr.pd-ancora-pub:hover td { filter: brightness(0.97); }

/* Derivado aberto embaixo do tema: um recuo discreto no tom de papel. */
.plt tbody tr.pd-sub td { background: color-mix(in srgb, var(--lista-cab) 55%, var(--lista-fundo)); }
.plt tbody tr.pd-sub.pd-ancora-pub td { background: var(--lista-feito); }

/* ── Inbox › Lista (temas longos e conteúdos curtos) ─────────────────────── */
.lg-tabela-wrap { border-color: var(--lista-linha-forte); }
.lg-tabela .num-badge {
  min-width: 34px;
  height: auto;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.lg-tabela td { white-space: nowrap; }
/* A categoria do curto é texto livre e às vezes longo: ela quebra a linha, senão
   empurra o botão Selecionar para fora da caixa. */
.lg-tabela td:nth-child(2):not(.lg-t) { white-space: normal; min-width: 180px; }
.lg-tabela .lg-t,
.lg-tabela td > strong {
  font-weight: 600;
  color: var(--lista-tinta);
}
/* Título do curto numa linha só; o que não couber termina em reticências. */
.lg-tabela td > strong { display: block; max-width: 520px; overflow: hidden; text-overflow: ellipsis; }
.lg-tabela .lg-cat {
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: color-mix(in srgb, var(--lg-cor, var(--lista-apagado)) 17%, var(--lista-fundo));
  color: color-mix(in srgb, var(--lg-cor, var(--lista-apagado)) 62%, var(--lista-tinta));
  border: 1px solid color-mix(in srgb, var(--lg-cor, var(--lista-apagado)) 22%, transparent);
}
.lg-tabela .lg-vazio { color: var(--lista-apagado); font-size: 12px; }
/* Selecionado não pinta mais a linha inteira de verde: como no WeManage, a linha
   fica branca e quem diz o estado é a pílula verde "Selecionado". */
html .lg-tabela tbody tr.is-sel,
html .lg-tabela tbody tr.fc-sel,
html .lg-tabela tbody tr.is-sel td,
html .lg-tabela tbody tr.fc-sel td { background: var(--lista-fundo) !important; }
html .lg-tabela tbody tr.is-sel:hover td,
html .lg-tabela tbody tr.fc-sel:hover td { background: var(--lista-hover) !important; }
/* A caixinha de seleção vira pílula de status: verde quando selecionado. */
.lg-tabela .selchk {
  gap: 6px;
  padding: 2px 10px 2px 3px;
  border: 1px solid var(--lista-linha-forte);
  border-radius: 999px;
  background: var(--lista-fundo);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lista-apagado);
}
.lg-tabela .selchk .selbox { width: 17px; height: 17px; border-radius: 999px; border-width: 1.5px; font-size: 10px; }
.lg-tabela .selchk.on {
  border-color: color-mix(in srgb, var(--lista-feito-cor) 42%, transparent);
  background: color-mix(in srgb, var(--lista-feito-cor) 13%, var(--lista-fundo));
  color: color-mix(in srgb, var(--lista-feito-cor) 68%, var(--lista-tinta));
}

/* ── Directs (Palavras e Leads) ─────────────────────────────────────────── */
/* Aqui o texto pode quebrar linha, senão a tabela passa da tela e esconde os
   botões de editar. "Aprovada por" ganha largura mínima para não virar uma
   coluna estreita de seis linhas. */
html .dr-tab td:nth-child(7) { min-width: 170px; }
/* O texto da DM fica em até duas linhas: inteiro numa linha só, ele empurraria
   os botões de editar para fora da tela. */
html .dr-tab .dr-texto { max-width: 240px; -webkit-line-clamp: 2; }
html .dr-tab .dr-sub { font-size: 11.5px; color: var(--lista-apagado); margin-top: 0; }
html .dr-tab td > .dr-sub { margin-left: 0; }
/* Etapa do lead: o "por motor" fica ao lado da pílula, na mesma linha. */
html .dr-tab .dr-sel + .dr-sub { display: inline-block; margin: 0 0 0 6px; }
html .dr-tab .dr-palavra { font-weight: 600; letter-spacing: 0.02em; }
html .dr-tab .dr-mini { padding: 2px 10px; font-size: 11.5px; }
html .dr-tab .dr-sel {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
html .dr-tab .dr-chip {
  margin: 0 4px 0 0;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: color-mix(in srgb, #8a63d2 13%, var(--lista-fundo));
  color: color-mix(in srgb, #8a63d2 62%, var(--lista-tinta));
  border: 1px solid color-mix(in srgb, #8a63d2 22%, transparent);
}
html .dr-tab tr.dr-aberto td { background: color-mix(in srgb, #8a63d2 9%, var(--lista-fundo)); }
/* A ficha aberta ocupa a linha inteira, como a nota aberta do WeManage. */
html .dr-tab td:has(> .dr-ficha) { white-space: normal; background: var(--lista-cab); padding: 8px 12px; }

/* ── Design Maker (gastos) ──────────────────────────────────────────────── */
.dm-tabela td.num, .dm-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Central de edições ─────────────────────────────────────────────────── */
/* Os vídeos que falta aprovar viram uma lista só, numa caixa, com divisórias. */
html .ed-apr-item {
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--lista-linha-forte);
  border-radius: 0;
  background: var(--lista-fundo);
  font-size: 13px;
}
html .ed-apr-item + .ed-apr-item { border-top: 0; box-shadow: inset 0 1px 0 var(--lista-linha); }
html .ed-apr-item:not(.ed-apr-item + .ed-apr-item) { border-radius: 12px 12px 0 0; }
html .ed-apr-item:not(:has(+ .ed-apr-item)) { border-radius: 0 0 12px 12px; box-shadow: var(--lista-sombra), inset 0 1px 0 var(--lista-linha); }
html .ed-apr-item:not(.ed-apr-item + .ed-apr-item):not(:has(+ .ed-apr-item)) { border-radius: 12px; box-shadow: var(--lista-sombra); }
html .ed-apr-item:hover { background: var(--lista-hover); }
html .ed-apr-item img,
html .ed-apr-item .ed-apr-sem { width: 30px; height: 40px; border-radius: 5px; }
html .ed-apr-item b {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
html .ed-apr-item .ed-apr-meta { font-size: 11.5px; gap: 10px; color: var(--lista-apagado); opacity: 1; }
html .ed-apr-status {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, #d97559 42%, transparent);
  background: color-mix(in srgb, #d97559 13%, var(--lista-fundo));
  color: color-mix(in srgb, #d97559 68%, var(--lista-tinta));
}
@media (max-width: 760px) {
  html .ed-apr-item { grid-template-columns: 30px 1fr; }
  html .ed-apr-item img, html .ed-apr-item .ed-apr-sem { width: 30px; height: 40px; }
}

/* ── Histórico do Dashboard ("O que mudou") ─────────────────────────────── */
.hist-row { gap: 10px; padding: 6px 10px; font-size: 13px; }
.hist-row.hist-link:hover { background: var(--lista-hover); }
.hist-av, .hist-av-ini { width: 22px; height: 22px; font-size: 10px; }
.hist-when { font-size: 11.5px; color: var(--lista-apagado); font-variant-numeric: tabular-nums; }
.hist-who { font-size: 11.5px; font-weight: 600; color: var(--lista-apagado); }
.hist-badge {
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hist-msg { font-size: 13px; }

/* ── Gaveta Para aprovar ────────────────────────────────────────────────── */
/* Os cartões viram linhas de uma lista só, com divisórias; a cor da etapa
   continua como a faixa fina à esquerda. */
.apr-list { gap: 0; padding: 0; }
.apr-item {
  border: 0;
  border-bottom: 1px solid var(--lista-linha);
  border-radius: 0;
  padding: 9px 16px 9px 18px;
  background: var(--lista-fundo);
  box-shadow: inset 3px 0 0 var(--st-rev);
}
.apr-item:hover { background: var(--lista-hover); }
.apr-item .ap-t { font-size: 13px; font-weight: 600; }
.apr-item .ap-m { margin-top: 4px; gap: 4px; }
.apr-item .ap-m .rtag { font-size: 10px; padding: 2px 8px; border-radius: 999px; }
.apr-item .ap-go {
  width: auto;
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

/* ══ Botões, abas e filtros das telas de lista ═════════════════════════════ */
/* O módulo de curtos manda os botões herdarem a fonte dele (15px normal), por
   isso a mesma aba saía maior lá embaixo da Inbox. As regras daqui levam `html`
   na frente para valer igual nas duas seções. */

/* Abas e formas de ver: uma pílula branca com a opção ativa cheia na cor da
   marca, como o seletor Lista | Matriz do WeManage. */
html .inbox-abas,
html .lg-modos,
html .plan-seg,
html .salvos-abas,
html .tracks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--lista-marca) 30%, transparent);
  border-radius: 999px;
  background: var(--lista-fundo);
  box-shadow: none;
}
html .inbox-abas > .inbox-aba,
html .lg-modos > .lg-modo,
html .plan-seg > button,
html .salvos-abas > .salvos-aba,
html .tracks > .trk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transform: none;
  font-family: 'Lufga', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lista-apagado);
  white-space: nowrap;
  cursor: pointer;
}
html .inbox-abas > .inbox-aba:hover,
html .lg-modos > .lg-modo:hover,
html .plan-seg > button:hover,
html .salvos-abas > .salvos-aba:hover,
html .tracks > .trk:hover {
  background: color-mix(in srgb, var(--lista-marca) 10%, transparent);
  color: var(--lista-tinta);
  transform: none;
  box-shadow: none;
}
html .inbox-abas > .inbox-aba.on,
html .lg-modos > .lg-modo[aria-pressed='true'],
html .plan-seg > button.on,
html .salvos-abas > .salvos-aba.ativa,
html .tracks > .trk.on {
  background: var(--lista-marca);
  /* Texto claro sobre a cor da marca; escuro quando a marca é clara (o amarelo da WLH). */
  color: #fffcf8;
  color: oklch(from var(--lista-marca) clamp(0.22, (0.75 - l) * 1000, 0.99) 0 0);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--lista-marca) 35%, transparent);
}
html .inbox-abas > .inbox-aba:focus-visible,
html .lg-modos > .lg-modo:focus-visible,
html .plan-seg > button:focus-visible,
html .salvos-abas > .salvos-aba:focus-visible,
html .tracks > .trk:focus-visible { outline: 2px solid var(--lista-marca); outline-offset: 2px; }
/* O número ao lado da aba (Selecionados 23) vira texto miúdo na mesma pílula. */
html .inbox-aba .pill {
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px;
  font-weight: 600;
  color: inherit;
  opacity: 0.72;
}
/* Centralizado, o número menor subia acima da linha do nome; na mesma linha de base ele fica alinhado ao texto (Laise, 26/10). */
html .inbox-abas > .inbox-aba { align-items: baseline; }
/* Abas dos Directs: só o nome na pílula; a explicação fica para leitor de tela. */
html .salvos-aba .sa-t { font: inherit; color: inherit; }
html .salvos-aba .sa-d {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html .plan-seg { display: inline-flex; }
html .tracks > .trk .sw { flex: none; }

/* Barra da lista: o cartão tingido da marca que fica em cima da lista, com os
   filtros, as abas, as formas de ver e os botões dentro (segundo pedido dela,
   23/10: "junta as abas e os botões dentro do cartão de filtros"). */
html .lista-barra,
html .fc-toolbar.fc-toolbar-pill,
html .dr-barra {
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--lista-marca) 22%, transparent);
  border-radius: 16px;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--lista-marca) 10%, transparent),
    color-mix(in srgb, var(--lista-marca) 3%, transparent));
  box-shadow: none;
}
html .lista-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 10px;
  margin: 0 0 16px;
}
html .lista-barra > .inbox-abas,
html .lista-barra > .lg-modos,
html .lista-barra > .plan-seg,
html .lista-barra > .tracks { margin: 0; }
/* Os campos de filtro dos curtos ocupam a primeira linha do cartão, como Buscar
   e Projeto no WeManage; o cartão de fora é o da barra, não o deles. */
html .lista-barra > .fc-toolbar.fc-toolbar-pill {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
/* Na Lista do Planejamento, a barra dela (tipo, situação e colunas) sobe para o
   cartão e se mistura aos outros botões; a explicação vai para a última linha. */
html .lista-barra > .pd-bar { display: contents; }
html .lista-barra > .pd-bar > span {
  order: 99;
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--lista-apagado);
}
/* Os botões ficam no fim da linha, à direita, como o "+ Nova atividade". */
html .lista-barra > .lista-barra-principal,
html .lista-barra > .plan-acoes { margin-left: auto; }
html .plan-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html .plan-acoes:empty { display: none; }

/* Campos: rótulo em maiúsculas em cima e o campo embaixo, fundo branco, borda
   na cor da marca e cantos de 10px, como Buscar atividade e Projeto no
   WeManage. O módulo de curtos fixa borda, fundo e altura dos campos com
   !important, por isso aqui também. */
html .fc-toolbar.fc-toolbar-pill { align-items: flex-end; }
html .fc-toolbar-pill .fc-filter,
html .fc-toolbar-pill .fc-search {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep, var(--lista-apagado));
}
html .fc-toolbar-pill .fc-filter:focus-within,
html .fc-toolbar-pill .fc-search:focus-within { box-shadow: none; }
/* A busca não tem rótulo escrito, só a lupa: o rótulo vira "Buscar". */
html .fc-toolbar-pill .fc-search > span { font-size: 0; line-height: normal; }
html .fc-toolbar-pill .fc-search > span::before { content: 'Buscar'; font-size: 11px; }
html .fc-toolbar-pill input,
html .fc-toolbar-pill select {
  width: 100%;
  min-height: 36px !important;
  padding: 7px 10px !important;
  border: 1px solid color-mix(in srgb, var(--lista-marca) 30%, transparent) !important;
  border-radius: 10px;
  background: var(--lista-fundo) !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lista-tinta);
}
html .fc-toolbar-pill select { max-width: 220px; padding-right: 26px !important; }
html .fc-toolbar-pill input:focus,
html .fc-toolbar-pill select:focus { outline: 2px solid color-mix(in srgb, var(--lista-marca) 45%, transparent); outline-offset: 1px; }
html .dr-barra input[type='search'],
html .dr-barra select {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--lista-marca) 30%, transparent);
  border-radius: 10px;
  background: var(--lista-fundo);
  font-size: 13px;
  color: var(--lista-tinta);
}
html .dr-barra input[type='search']:focus,
html .dr-barra select:focus { outline: 2px solid color-mix(in srgb, var(--lista-marca) 45%, transparent); outline-offset: 1px; }

/* Botão principal: pílula cheia na cor da marca, como o "+ Nova atividade".
   Os de "Novo conteúdo" seguem a cor da própria faixa (laranja nos longos,
   roxo nos curtos), só sem o degradê. */
html .lista-barra > .lista-barra-principal,
html .dr-pri,
html .plan-acoes > .cal-gav[data-novo-card] {
  min-height: 0;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--lista-marca);
  color: #fffcf8;
  color: oklch(from var(--lista-marca) clamp(0.22, (0.75 - l) * 1000, 0.99) 0 0);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lista-marca) 35%, transparent);
}
html .lg-toggle .lista-barra > .lista-barra-principal {
  background: var(--lg-a);
  color: #fffcf8;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lg-a) 35%, transparent);
}
html .lista-barra > .lista-barra-principal:hover,
html .dr-pri:hover,
html .plan-acoes > .cal-gav[data-novo-card]:hover { filter: brightness(1.05); }

/* Botão secundário: contorno fino, fundo branco e cantos de 8px, como o
   "Mostrar concluídos"; cheio na cor da marca quando está ligado. */
html .plan-acoes > .cal-gav,
html .dr-sec,
html .ed-apr-top .ed-sec,
html .cal-nav > button[data-cal] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 0;
  padding: 6px 11px;
  border: 1px solid var(--lista-linha-forte);
  border-radius: 8px;
  background: var(--lista-fundo);
  color: var(--lista-apagado);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: none;
}
html .cal-nav > button[data-cal] { width: 32px; height: 32px; padding: 0; font-size: 15px; }
html .plan-acoes > .cal-gav:hover,
html .dr-sec:hover,
html .ed-apr-top .ed-sec:hover,
html .cal-nav > button[data-cal]:hover { background: var(--lista-cab); color: var(--lista-tinta); border-color: var(--lista-linha-forte); }
html .plan-acoes > .cal-gav.on {
  background: var(--lista-marca);
  border-color: transparent;
  color: #fffcf8;
  color: oklch(from var(--lista-marca) clamp(0.22, (0.75 - l) * 1000, 0.99) 0 0);
}
html .cal-gav .gav-ct {
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  background: var(--lista-marca);
  color: #fffcf8;
  color: oklch(from var(--lista-marca) clamp(0.22, (0.75 - l) * 1000, 0.99) 0 0);
}
html .cal-gav.on .gav-ct { background: color-mix(in srgb, #fffcf8 26%, transparent); }

/* Botão discreto, sem moldura, como o "Colunas" do WeManage. */
html .pd-colunas > summary {
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lista-apagado);
  font-size: 12.5px;
  font-weight: 600;
}
html .pd-colunas > summary:hover,
html .pd-colunas[open] > summary { background: rgba(30, 27, 46, 0.06); color: var(--lista-tinta); }

/* Botões pequenos dentro das linhas (Editar, Desligar). */
html .dr-tab .dr-mini {
  padding: 4px 10px;
  border: 1px solid var(--lista-linha-forte);
  border-radius: 8px;
  background: var(--lista-fundo);
  font-size: 12px;
  font-weight: 600;
}
html .dr-tab .dr-mini:hover { background: var(--lista-cab); }

/* Etapas dos leads (Novo, Conversando...): dentro do cartão, na mesma pílula
   das abas, com o número miúdo depois do nome; o botão fica no fim da linha. */
html .dr-barra > .dr-etapas {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: fit-content;
  margin: 0;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--lista-marca) 30%, transparent);
  border-radius: 999px;
  background: var(--lista-fundo);
}
html .dr-barra > [data-dr-conferir] { order: 3; margin-left: auto; }
/* A busca larga empurra as etapas para a segunda linha, junto do botão. */
html .dr-barra > input[type='search'] { flex: 1 1 360px; min-width: 240px; }
html .dr-barra .dr-etapa {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lista-apagado);
}
html .dr-barra .dr-etapa b { display: inline; font-size: 11.5px; font-weight: 600; line-height: 1.3; opacity: 0.72; }
html .dr-barra .dr-etapa span { font-size: 12.5px; color: inherit; }
html .dr-barra .dr-etapa:hover { background: color-mix(in srgb, var(--lista-marca) 10%, transparent); color: var(--lista-tinta); }
html .dr-barra .dr-etapa.on {
  background: var(--lista-marca);
  color: #fffcf8;
  color: oklch(from var(--lista-marca) clamp(0.22, (0.75 - l) * 1000, 0.99) 0 0);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--lista-marca) 35%, transparent);
}
html .dr-barra .dr-etapa.on span { color: inherit; }