/* ═══════════════════════════════════════════════════════════════════════
   O QUADRO EM LISTAS
   ═══════════════════════════════════════════════════════════════════════
   A referência é o Trello: colunas estreitas de largura FIXA, roladas na
   horizontal, com cartões baixos empilhados. A largura fixa é o ponto — é ela
   que faz caber cinco listas na tela e faz o título do cartão quebrar em duas
   linhas em vez de virar uma faixa larga e vazia.

   O fundo do quadro continua sendo o do usuário (as quatro camadas do
   `CAMADAS_DE_FUNDO`), e por isso lista e cartão são superfícies opacas: texto
   sobre foto não se lê, e escurecer o fundo apagaria a escolha de quem o pôs.
   ═══════════════════════════════════════════════════════════════════════ */

/* Em modo lista o canvas some da vista, mas NÃO do DOM: a `.note` continua
   montada, com todos os seus ouvintes, e é ela mesma que a janela do cartão
   recebe emprestada. Ver o cabeçalho de `kanban.js`. */
#board.kanban-on > .note,
#board.kanban-on > .stack-wrap { display: none !important; }
#board.kanban-on { overflow: auto; }

/* ── QUEM ROLA É O QUADRO, E NÃO A FILEIRA ────────────────────────────
   `#kanban` tinha `overflow-x:auto` com `overflow-y:hidden`, e isso é uma
   armadilha do CSS: um eixo em `auto` obriga o outro a virar `auto` também.
   O efeito era um recorte na altura da tela — a coluna parava ali e ligava a
   barra interna, mesmo com o quadro podendo crescer até 1,5 tela.

   Sem `overflow` nenhum aqui, a fileira apenas ocupa a largura que precisa
   (`width:max-content`) e quem rola nos dois eixos é o `#board`, que já era o
   quadro rolável desde sempre. */
#kanban {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 26px;
  /* `max-content` com `min-width:100%`: a fileira ocupa o que precisar, e a
     barra horizontal do `#board` só nasce quando isso passa da tela. Enquanto
     as listas couberem, não há barra nenhuma — foi a escolha do dono do
     produto em 01/09/2026, contra a alternativa de reservar meia tela extra
     sempre (que traria a barra para o quadro de três listas). */
  width: max-content;
  min-width: 100%;
  min-height: 100%;
  /* ── A ÚLTIMA LISTA NÃO FICA PELA METADE ─────────────────────────────
     Sem isto, a rolagem para no meio de uma coluna: metade dos cartões some
     na borda direita e a pessoa não sabe se aquilo é o fim do quadro ou um
     corte. `proximity` (e não `mandatory`) porque arrastar cartão entre
     listas exige poder parar onde se quer — o encaixe é uma ajuda, não uma
     trava. */
  scroll-snap-type: x proximity;
}
.kb-lista { scroll-snap-align: start; scroll-margin-left: 16px; }

/* ── A LISTA ─────────────────────────────────────────────────────────── */
.kb-lista {
  flex: 0 0 302px;
  width: 302px;
  /* ── A LISTA SÓ ROLA QUANDO O QUADRO ACABA ───────────────────────────
     Duas versões erraram aqui, e a segunda foi minha: `100vh - 120px` e
     depois `100dvh - 70px` prendiam a coluna a UMA tela. Mas o quadro do
     MyDesk não tem uma tela — ele rola até `MAX_TELAS_ROLAGEM`, que são 1,5.
     A coluna ligava a barra interna com meia tela de espaço sobrando embaixo.

     `150dvh` é o mesmo 1,5 do `app.js`, escrito no CSS. Os 90px descontam a
     barra de ferramentas e o respiro do `#kanban`. Abaixo disso a coluna
     cresce e quem rola é o quadro; só ao passar de 1,5 tela — que é o limite
     do próprio quadro — a lista rola por dentro. */
  max-height: calc(150dvh - 90px);
  display: flex;
  flex-direction: column;
  background: rgba(12, 16, 22, .92);
  border: 1px solid rgba(255, 255, 255, .07);
  border-top: 3px solid #6366f1;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
}
.kb-lista.kb-alvo {
  border-color: #22d3ee;
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .35), 0 6px 22px rgba(0, 0, 0, .35);
}
.kb-lista-cab {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 10px 10px 13px;
}
/* A barrinha é o botão de cor da lista (ver `kanban.js`). Alvo pequeno na
   horizontal, então o `padding` invisível dá área de clique sem engordar o
   desenho — e no dedo ela cresce para 40px de altura. */
.kb-lista-barra {
  width: 5px; height: 20px; border-radius: 3px; flex-shrink: 0;
  border: none; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 4px transparent;
}
.kb-lista-barra:hover:not(:disabled) { box-shadow: 0 0 0 4px rgba(255, 255, 255, .09); }
.kb-lista-barra:disabled { cursor: default; }
.kb-lista-barra:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
.kb-lista-tit,
.kb-lista-tit-fixo {
  flex: 1 1 auto; min-width: 0;
  font: 600 .98rem/1.35 'Inter', system-ui, sans-serif;
  color: #e8ecf3;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 5px 7px;
}
.kb-lista-tit:hover { background: rgba(255, 255, 255, .05); }
.kb-lista-tit:focus { background: rgba(255, 255, 255, .08); border-color: #22d3ee; outline: none; }
.kb-lista-cont {
  font: 600 .76rem 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .45);
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  flex-shrink: 0;
}
.kb-lista-mais {
  flex-shrink: 0;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: none; border-radius: 6px;
  color: rgba(232, 236, 243, .5); font-size: 1.15rem; cursor: pointer;
}
.kb-lista-mais:hover { background: rgba(255, 255, 255, .08); color: #e8ecf3; }

.kb-cards {
  flex: 0 1 auto; min-height: 8px;
  overflow-y: auto; overflow-x: hidden;
  padding: 0 10px 6px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
}

/* ── O CARTÃO FECHADO ────────────────────────────────────────────────── */
/* A faixa de cor no alto do cartão é a mesma `.n-bar` da nota: é o que faz
   um quadro de notas âmbar continuar parecendo um quadro de notas âmbar
   depois de virar lista. */
.kb-faixa {
  position: absolute; inset: 0 0 auto; height: 4px;
  border-radius: 9px 9px 0 0;
}
.kb-card {
  position: relative;
  background: #1b2430;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 9px;
  padding: 12px 13px 12px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .28);
  transition: background .12s, transform .12s, box-shadow .12s;
}
/* O hover CLAREIA o que já está pintado, em vez de trocar por uma cor fixa:
   com `filter` o cartão âmbar clareia âmbar e o índigo clareia índigo. */
.kb-card:hover { filter: brightness(1.28); }
.kb-card:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.kb-card.kb-arrastando { opacity: .45; transform: rotate(2deg); }

/* ── A CAPA DO CARTÃO ────────────────────────────────────────────────
   Sangra até a borda (margens negativas que anulam o `padding` do cartão),
   porque uma imagem com moldura de 13px lê como anexo, e não como capa.
   `aspect-ratio` fixa a altura antes de a imagem chegar: sem isso a coluna
   inteira pula para baixo quando cada capa carrega. */
.kb-card-capa {
  margin: -12px -13px 10px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 9px 9px 0 0;
  background: rgba(255, 255, 255, .04);
}
.kb-card-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A faixa de cor fica POR CIMA da capa: ela é o que identifica a nota, e
   sumir atrás da imagem tiraria a única marca de cor do cartão. */
.kb-card-capa + .kb-card-etqs { margin-top: 0; }
.kb-faixa { z-index: 1; }

.kb-card-etqs { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
/* A etiqueta SEMPRE leva o nome, nunca só a cor: cor sozinha não distingue
   para quem não enxerga a diferença entre elas. O texto é escuro porque as dez
   cores do catálogo são claras — conferido uma vez, no catálogo. */
.kb-etq {
  display: inline-block; max-width: 100%;
  font: 700 .71rem/1.6 'Inter', system-ui, sans-serif;
  color: #10151c;
  padding: 2px 10px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-card-titulo {
  font: 500 .96rem/1.45 'Inter', system-ui, sans-serif;
  color: #e8ecf3;
  overflow-wrap: anywhere;
}
.kb-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 11px;
  font: 500 .73rem 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .48);
}
.kb-card-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
/* O avatar de quem está no cartão. `hidden` até haver delegação — ver o
   comentário em `kanban.js`. */
.kb-card-collab {
  margin-left: auto; padding: 0; border: none; background: transparent;
  display: inline-flex; align-items: center; cursor: pointer;
}
.kb-card-collab[hidden] { display: none !important; }
/* ── O AVATAR DE QUEM ESTÁ NO CARTÃO ───────────────────────────────────
   `_renderNoteCollaborationHost` desenha em 22px, tamanho pensado para a
   fileira de chips da nota, que é estreita. No cartão o avatar é o único
   elemento gráfico e concorre com uma linha de texto: em 22px ele lê como
   ruído, e não como uma pessoa.

   O ajuste é por CONTEXTO, com `!important`, porque o tamanho vem inline do
   desenhista — mesmo caminho que `.stack-note-collab` e `.stack-collab-host`
   já usam para ENCOLHER nos deles. */
.kb-card-collab .note-collab-avatar {
  width: 28px !important; height: 28px !important;
  margin-left: -7px; border-width: 2px;
}
.kb-card-collab .note-collab-avatar:first-child { margin-left: 0; }
.kb-card-collab .note-collab-more {
  width: 28px !important; height: 28px !important; font-size: .68rem;
}
.kb-card-collab .note-collab-empty { font-size: .8rem; }
.kb-card-status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.kb-card-ico { display: inline-flex; align-items: center; gap: 3px; }
.kb-completo { color: #4bce97; }
.kb-card-prazo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 5px;
  background: rgba(255, 255, 255, .07);
}
/* Vermelho E a palavra "Atrasado" no title: a cor avisa quem a vê, o texto
   avisa quem não a vê. */
.kb-vencido { background: rgba(248, 113, 104, .18); color: #f87168; }

/* ── A LISTA CLARA ───────────────────────────────────────────────────
   Mesmo problema do cartão, um nível acima: com a cor "Papel" o fundo da
   coluna é claro, e o nome dela, o contador, o ⋯ e o "+ Adicionar cartão"
   nascem em texto claro. Todos precisam virar escuros de uma vez — um
   esquecido não some da tela, some do olho de quem escolheu a cor. */
.kb-lista.claro .kb-lista-tit,
.kb-lista.claro .kb-lista-tit-fixo { color: rgba(15, 23, 42, .94); }
.kb-lista.claro .kb-lista-tit:hover { background: rgba(15, 23, 42, .06); }
.kb-lista.claro .kb-lista-tit:focus { background: rgba(15, 23, 42, .09); }
.kb-lista.claro .kb-lista-cont {
  color: rgba(15, 23, 42, .55); background: rgba(15, 23, 42, .08);
}
.kb-lista.claro .kb-lista-mais { color: rgba(15, 23, 42, .5); }
.kb-lista.claro .kb-lista-mais:hover { background: rgba(15, 23, 42, .09); color: rgba(15, 23, 42, .9); }
.kb-lista.claro .kb-add-card { color: rgba(15, 23, 42, .6); }
.kb-lista.claro .kb-add-card:hover { background: rgba(15, 23, 42, .08); color: rgba(15, 23, 42, .92); }
.kb-lista.claro .kb-ajuda { color: rgba(15, 23, 42, .42); }
.kb-lista.claro .kb-lista-barra:hover:not(:disabled) { box-shadow: 0 0 0 4px rgba(15, 23, 42, .1); }

/* ── O CARTÃO CLARO ──────────────────────────────────────────────────
   A cor "Papel" tem fundo claro, e o cartão herda a paleta da nota. Sem este
   bloco o título branco cai sobre #f4f6fa e some — o mesmo problema que o
   `.note.claro` resolve na nota, na mesma classe que `_palAplicarClasses`
   já liga aqui. */
.kb-card.claro .kb-card-titulo { color: rgba(15, 23, 42, .94); }
.kb-card.claro .kb-card-meta { color: rgba(15, 23, 42, .6); }
.kb-card.claro .kb-card-status,
.kb-card.claro .kb-card-prazo { background: rgba(15, 23, 42, .07); }
.kb-card.claro .kb-vencido { background: rgba(220, 38, 38, .14); color: #b91c1c; }
.kb-card.claro .kb-completo { color: #047857; }
.kb-card.claro:hover { filter: brightness(.96); }
/* A faixa do topo é pintada inline com a cor da paleta, e num cartão branco
   ela seria branco sobre branco. Escurece só aqui — o `!important` é o único
   jeito de vencer o `style` inline sem apagar a pintura que as outras cores
   dependem. */
.kb-card.claro .kb-faixa { background: rgba(15, 23, 42, .18) !important; }

.kb-ajuda {
  margin: 4px 2px 8px;
  font: 400 .78rem/1.55 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .35);
}

.kb-add-card {
  margin: 4px 10px 12px;
  padding: 10px 12px;
  text-align: left;
  font: 500 .84rem 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .6);
  background: transparent; border: none; border-radius: 8px;
  cursor: pointer;
}
.kb-add-card:hover { background: rgba(255, 255, 255, .08); color: #e8ecf3; }
/* ── O CARTÃO ABERTO ─────────────────────────────────────────────────── */
.kb-modal-bg {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(4, 7, 11, .68);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.kb-modal-bg-alto { z-index: 4200; }
.kb-modal-faixa {
  position: absolute; inset: 0 0 auto; height: 4px;
  border-radius: 14px 14px 0 0;
}
.kb-modal {
  position: relative;
  width: min(700px, 100%);
  background: #0f151d;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  padding: 14px;
}
.kb-modal-peq { width: min(460px, 100%); }
.kb-modal-topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.kb-modal-tit { flex: 1; margin: 0; font: 700 .95rem 'Inter', system-ui, sans-serif; color: #e8ecf3; }
.kb-modal-fechar {
  flex-shrink: 0; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); border: none; border-radius: 8px;
  color: #e8ecf3; font-size: .9rem; cursor: pointer;
}
.kb-modal-fechar:hover { background: rgba(255, 255, 255, .13); }

/* A `.note` emprestada. Ela chega com `position:absolute`, `left`, `top`,
   `width` e `height` no atributo `style` — que vence qualquer classe. Por isso
   estas nove declarações são `!important`: é o único jeito de a nota do canvas
   virar um bloco normal dentro da janela sem apagar o estilo que o quadro
   livre precisa de volta ao fechar. */
.note.n-em-modal {
  position: static !important;
  left: auto !important; top: auto !important;
  width: 100% !important; height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  z-index: auto !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
  animation: none !important;
}
/* Dentro da janela não há para onde arrastar nem o que redimensionar. */
.note.n-em-modal .n-resize,
.note.n-em-modal .n-pin-btn { display: none !important; }
.note.n-em-modal .n-expand-area { display: block !important; }

/* ── DETALHE DO CARTÃO: editor à esquerda, conversa à direita ───────────
   A nota continua sendo o elemento real montado pelo app. Só os blocos dela
   são reposicionados enquanto a janela está aberta; fechar devolve cada um ao
   lugar original, portanto nenhum ouvinte de edição é duplicado. */
.kb-modal-detalhe {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #242528;
  /* Coluna de flex para que cabeçalho, capa e corpo se empilhem e o CORPO
     receba a altura que sobrar. Com os três em fluxo normal, uma capa alta
     empurrava o corpo para fora do modal — que tem `overflow:hidden` — e a
     parte de baixo era simplesmente cortada. */
  display: flex;
  flex-direction: column;
}
.kb-modal-detalhe .kb-modal-faixa { height: 3px; border-radius: 12px 12px 0 0; }
.kb-modal-cabecalho {
  height: 54px; padding: 9px 13px 9px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #222326; border-bottom: 1px solid rgba(255,255,255,.08);
}
.kb-modal-lista-select {
  min-width: 110px; max-width: 260px; height: 34px;
  padding: 0 30px 0 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  background: #4a4c50; color: #f1f2f4;
  font: 650 .76rem 'Inter', system-ui, sans-serif; cursor: pointer; color-scheme: dark;
}
.kb-modal-lista-select:focus-visible { outline: 2px solid #579dff; outline-offset: 2px; }
.kb-modal-cab-acoes { display: flex; align-items: center; gap: 7px; }
.kb-modal-icon-btn,
.kb-modal-detalhe .kb-modal-fechar {
  flex: 0 0 34px; width: 34px; min-width: 34px; height: 34px; padding: 0;
  display: inline-grid; place-items: center;
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  background: rgba(255,255,255,.055); color: #d8dee9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}
.kb-modal-icon-btn svg,
.kb-modal-detalhe .kb-modal-fechar svg {
  width: 17px; height: 17px; display: block; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.kb-modal-icon-btn:hover,
.kb-modal-detalhe .kb-modal-fechar:hover {
  background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25);
  color: #fff; box-shadow: 0 5px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.kb-modal-icon-btn:active,
.kb-modal-detalhe .kb-modal-fechar:active { transform: translateY(0); box-shadow: none; }
.kb-modal-icon-btn:focus-visible,
.kb-modal-detalhe .kb-modal-fechar:focus-visible { outline: 2px solid #8ec5ff; outline-offset: 2px; }
.kb-modal-detalhe .note.n-em-modal {
  background: transparent !important; border: none !important; box-shadow: none !important;
  overflow: visible !important; border-radius: 0 !important;
  /* ── O ELO QUE FALTAVA NA CORRENTE ──────────────────────────────────
     O corpo de duas colunas (`.kb-modal-layout`) não é filho do modal: ele
     vive DENTRO da `.note` emprestada. Então a `.note` é o item de flex do
     modal, e era ela quem não encolhia — com `height:auto` ela crescia com o
     conteúdo, o layout crescia junto, e as colunas nunca chegavam a rolar.
     O `overflow:hidden` do modal cortava o fim, e "Anexos" não existia na
     tela de quem tinha muito conteúdo.

     Para o `overflow-y:auto` das colunas funcionar, TODOS os elos entre o
     modal e elas precisam poder encolher: cada um com `min-height:0`. Um
     único elo sem isso trava a corrente inteira — que é o que estava
     acontecendo. */
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
}
.kb-modal-detalhe .note.n-em-modal:hover { box-shadow: none !important; }
.kb-modal-detalhe .note.n-em-modal > .n-bar,
.kb-modal-detalhe .note.n-em-modal > .n-head,
.kb-modal-detalhe .note.n-em-modal > .n-resize { display: none !important; }
.kb-modal-layout {
  display: grid; grid-template-columns: minmax(0, 58%) minmax(340px, 42%);
  min-height: 510px;
  /* ── A ARMADILHA QUE CORTAVA O FIM DO CARTÃO ────────────────────────
     Item de grid (como o de flex) tem `min-height:auto`: ele NÃO encolhe
     abaixo do próprio conteúdo. Com isso, o `overflow-y:auto` das duas
     colunas nunca entrava em ação — elas cresciam com o conteúdo, estouravam
     o modal, e o `overflow:hidden` dele cortava o resto sem barra de rolagem
     nenhuma. Num cartão com descrição, datas, checklist e anexos, "Anexos"
     simplesmente não existia na tela.

     `min-height:0` nas duas colunas é o que devolve a rolagem. O
     `max-height` fixo saiu junto: quem manda na altura é o modal, e dois
     tetos concorrentes davam um vão embaixo quando a capa estava presente. */
  flex: 1 1 auto;
  min-height: 0;
}
.kb-modal-principal {
  min-width: 0; min-height: 0;
  padding: 26px 40px 34px 56px; overflow-y: auto;
  background: #28292c; scrollbar-width: thin;
}
.kb-modal-lateral {
  min-width: 0; min-height: 0;
  padding: 17px 16px 24px;
  background: #303134; border-left: 1px solid rgba(255,255,255,.1);
  overflow-y: auto; scrollbar-width: thin;
}
.kb-modal-titulo-linha { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; }
.kb-modal-concluir {
  width: 17px; height: 17px; margin-top: 7px; padding: 0; border-radius: 50%;
  border: 1.5px solid #a9abb0; background: transparent; color: transparent;
  font-size: .65rem; line-height: 1; cursor: pointer;
}
.kb-modal-concluir:hover { border-color: #85b8ff; background: rgba(87,157,255,.12); }
.kb-modal-concluir.concluido { border-color: #4bce97; background: #4bce97; color: #172b24; }
.kb-modal-detalhe .n-title-row { padding: 0; }
.kb-modal-detalhe .n-title {
  min-height: 34px; font-size: 1.45rem; line-height: 1.35; font-weight: 650;
  color: #f1f2f4; -webkit-text-fill-color: #f1f2f4;
}
.kb-modal-acoes { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 16px 32px; }
.kb-modal-acao {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 5px;
  background: #333539; color: #c4c6cb; font: 550 .76rem 'Inter', sans-serif; cursor: pointer;
}
.kb-modal-acao:hover { background: #424448; color: #fff; }
.kb-modal-acao-ico { font-size: 1rem; color: #bfc1c6; }
.kb-modal-membros { display: inline-flex; align-items: center; gap: 4px; }
.kb-modal-membros .kb-modal-acao { min-height: 34px; }
.kb-modal-detalhe .kb-modal-collab {
  min-width: 34px; height: 34px; margin-left: 0; padding: 0 6px;
  border: 1px solid rgba(139,92,246,.28); background: rgba(124,58,237,.12);
}
.kb-modal-detalhe .kb-modal-collab .note-collab-avatar {
  width: 23px !important; height: 23px !important; border-color: #28292c;
}
.kb-modal-detalhe .kb-modal-collab .note-collab-more { border-color: #28292c; }
.kb-modal-etiquetas-pop {
  display: none; margin: -7px 0 17px 32px; padding: 10px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #1f2023;
}
.kb-modal-etiquetas-pop.aberto { display: block; }
.kb-modal-secao-titulo { display: flex; align-items: center; gap: 11px; margin: 12px 0 16px -31px; }
.kb-modal-secao-titulo h3 { margin: 0; color: #e3e4e7; font: 650 .9rem 'Inter', sans-serif; }
.kb-modal-secao-ico { color: #c5c7cc; font-size: 1.05rem; }
.kb-modal-detalhe .n-body-inline { padding: 0 0 17px; }
.kb-modal-detalhe .n-text {
  display: block; min-height: 92px; padding: 12px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 5px; background: rgba(0,0,0,.08); color: #c2c4c9;
  -webkit-text-fill-color: #c2c4c9; font-size: .82rem; line-height: 1.55;
}
.kb-modal-detalhe .n-text:focus { border-color: #579dff; box-shadow: 0 0 0 1px #579dff; }
.kb-modal-detalhe .n-expand-area > .n-sep { display: none; }
.kb-modal-detalhe .n-dates,
.kb-modal-detalhe .n-checklist-wrap,
.kb-modal-detalhe .n-ficha-edit,
.kb-modal-detalhe .n-files,
.kb-modal-detalhe .n-color-wrap { margin-left: 0; padding-left: 0 !important; padding-right: 0 !important; }
.kb-modal-detalhe .n-date-row { max-width: 340px; }
.kb-modal-detalhe .kb-modal-checklist {
  margin-top: 8px; padding: 18px 0 15px !important;
  border-top: 1px solid rgba(255,255,255,.08);
}
.kb-modal-detalhe .n-checklist-head {
  margin-bottom: 10px; font-size: .76rem; letter-spacing: .04em; color: #d8d9dd;
}
.kb-modal-detalhe .n-prog {
  display: block; width: 100%; margin: 0 0 13px; background: rgba(255,255,255,.13);
}
.kb-modal-detalhe .n-checklist-add { width: 25px; height: 25px; }
.kb-modal-arquivos { padding: 18px 0 4px; border-top: 1px solid rgba(255,255,255,.08); }
.kb-modal-arquivos-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.kb-modal-arquivos-cab h3 { margin: 0; color: #d8d9dd; font: 650 .86rem 'Inter', sans-serif; }
.kb-modal-arquivos-qtd {
  min-width: 20px; padding: 2px 6px; border-radius: 10px; text-align: center;
  background: rgba(255,255,255,.08); color: #aeb0b5; font: 650 .62rem 'JetBrains Mono', monospace;
}
.kb-modal-detalhe .n-files { gap: 7px; }
.kb-modal-detalhe .f-item { min-height: 38px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.045); }
.kb-modal-detalhe .f-drop { padding: 10px 12px; border-color: rgba(255,255,255,.16); color: #aeb0b5; }
.kb-modal-lateral-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kb-modal-lateral-cab h3 { flex: 1; margin: 0; color: #d8d9dd; font: 650 .88rem 'Inter', sans-serif; }
.kb-modal-detalhes {
  min-height: 32px; padding: 0 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  background: #383a3e; color: #b9bbc0; font: 550 .72rem 'Inter', sans-serif; cursor: pointer;
}
.kb-modal-detalhes:hover { background: #45474c; color: #fff; }
.kb-modal-lateral .n-coment-wrap { padding: 0; border: 0; display: flex; flex-direction: column; }
.kb-modal-lateral .n-coment-head { display: none; }
.kb-modal-lateral .n-coment-novo { order: -2; margin-bottom: 14px; }
.kb-modal-lateral .n-coment-inp {
  min-height: 38px; padding: 9px 11px; border-color: rgba(255,255,255,.12);
  background: #242529; color: #e4e5e8; -webkit-text-fill-color: #e4e5e8;
}
.kb-modal-lateral .n-coment-lista { max-height: 250px; margin-bottom: 14px; }
.kb-modal-lateral .n-coment-item { padding: 9px 10px; border-radius: 8px; background: rgba(0,0,0,.12); }
.kb-atividade-lista { display: flex; flex-direction: column; gap: 13px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.kb-atividade-item { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 9px; align-items: start; }
.kb-atividade-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #0c66e4; color: #fff; font: 700 .75rem 'Inter', sans-serif;
}
.kb-atividade-texto p { margin: 2px 0 3px; color: #c8c9cd; font: 500 .76rem/1.4 'Inter', sans-serif; }
.kb-atividade-texto time { color: #85b8ff; font: 500 .67rem 'Inter', sans-serif; text-decoration: underline; }
.kb-atividade-vazia { margin: 0; color: rgba(255,255,255,.38); font: .74rem/1.5 'Inter', sans-serif; }

/* ── ETIQUETAS: a fileira do cartão aberto e o gerenciador ───────────── */
.kb-etq-barra { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.kb-etq-rot {
  font: 600 .64rem 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .45);
  text-transform: uppercase; letter-spacing: .06em;
  margin-right: 2px;
}
.kb-etq-vazio { font: 400 .7rem 'Inter', system-ui, sans-serif; color: rgba(232, 236, 243, .35); }
.kb-etq-btn {
  border: 2px solid transparent; cursor: pointer;
  padding: 2px 9px; opacity: .42;
  transition: opacity .12s, border-color .12s;
}
.kb-etq-btn:hover { opacity: .75; }
/* Marcada não é só "mais opaca": ganha contorno claro, porque diferença de
   opacidade entre dois chips coloridos é fraca demais para carregar sozinha o
   estado ligado/desligado. O `aria-pressed` diz o mesmo a quem não vê. */
.kb-etq-on { opacity: 1; border-color: #e8ecf3; }
.kb-etq-editar {
  width: 26px; height: 22px; padding: 0;
  background: rgba(255, 255, 255, .07); border: none; border-radius: 5px;
  color: #e8ecf3; cursor: pointer; font-size: .72rem;
}
.kb-etq-editar:hover { background: rgba(255, 255, 255, .14); }

.kb-etq-lista { display: flex; flex-direction: column; gap: 8px; }
.kb-etq-linha { display: flex; align-items: center; gap: 8px; }
.kb-etq-cor {
  width: 42px; flex-shrink: 0; height: 30px;
  border: none; border-radius: 6px; cursor: pointer;
  color: #10151c; font-size: .6rem; font-weight: 700;
  /* `appearance:none` porque o desenho nativo do seletor ignora a cor de
     fundo em tema escuro — ver a armadilha 10 do CHECKLIST. */
  appearance: none; text-indent: 4px;
}
.kb-etq-cor:focus-visible { outline: 2px solid #22d3ee; outline-offset: 1px; }
.kb-etq-nome {
  flex: 1; min-width: 0; height: 30px;
  padding: 0 8px; border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #e8ecf3; font: 500 .78rem 'Inter', system-ui, sans-serif;
}
.kb-etq-nome:focus { border-color: #22d3ee; outline: none; }
.kb-etq-apagar {
  flex-shrink: 0; width: 30px; height: 30px; padding: 0;
  background: transparent; border: none; border-radius: 6px;
  color: rgba(232, 236, 243, .5); cursor: pointer;
}
.kb-etq-apagar:hover { background: rgba(248, 113, 104, .18); color: #f87168; }
.kb-btn {
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
  color: #e8ecf3; font: 600 .76rem 'Inter', system-ui, sans-serif; cursor: pointer;
}
.kb-btn:hover { background: rgba(255, 255, 255, .13); }
.kb-btn-largo { width: 100%; margin-top: 4px; }

/* ── AS QUATRO FAIXAS ────────────────────────────────────────────────
   Nenhuma tela é a tela padrão (CHECKLIST 4.1). No celular a lista ocupa
   quase a largura toda e continua rolando na horizontal — uma coluna de cada
   vez é como o Trello se comporta no telefone, e empilhar as listas em
   vertical faria a quinta ficar a cinco telas de distância. */
@media (max-width: 768px) {
  .kb-lista { flex-basis: 86vw; width: 86vw; }
  .kb-lista { max-height: none; }
  #kanban { gap: 10px; padding: 10px 12px 22px; }
  /* Alvo de toque de 40px no dedo. */
  .kb-add-card, .kb-lista-mais, .kb-modal-fechar { min-height: 40px; }
  .kb-lista-barra { height: 40px; width: 5px; }
  .kb-card { padding: 12px 12px 11px; }
  .kb-modal-bg { padding: 0; align-items: stretch; }
  .kb-modal-detalhe { width: 100%; max-height: 100dvh; border-radius: 0; }
  .kb-modal-layout { grid-template-columns: minmax(0,1fr); min-height: 0; overflow-y: auto; }
  /* Em coluna única quem rola é o layout inteiro; as duas metades voltam
     a crescer com o conteúdo, senão apareceriam duas barras aninhadas. */
  .kb-modal-principal, .kb-modal-lateral { overflow-y: visible; }
  .kb-modal-principal { padding: 22px 20px 28px 45px; overflow: visible; }
  .kb-modal-lateral { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); overflow: visible; }
  .kb-modal-acoes { margin-left: 0; }
  .kb-modal-etiquetas-pop { margin-left: 0; }
  .kb-modal-lista-select { max-width: calc(100vw - 155px); }
}
@media (min-width:769px) and (max-width:1050px) {
  .kb-modal-layout { grid-template-columns: minmax(0,56%) minmax(320px,44%); }
  .kb-modal-principal { padding-left: 48px; padding-right: 28px; }
}
@media (min-width: 2000px) {
  /* Monitor grande ganha listas mais largas em vez de uma faixa morta à
     direita: grade de dados só melhora com espaço. */
  .kb-lista { flex-basis: 348px; width: 348px; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-card { transition: none; }
  .kb-card.kb-arrastando { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   AS BARRAS DE ROLAGEM
   ══════════════════════════════════════════════════════════════════════
   A barra padrão do Windows é um trilho cinza-claro de 17px, desenhado para
   uma janela clara: sobre a coluna escura ela vira uma faixa branca grudada
   na borda do cartão, que foi exatamente a reclamação.

   `scrollbar-width: thin` resolve no Firefox; os `::-webkit-scrollbar`
   resolvem no Chrome e no Edge. Os dois precisam existir, e nenhum substitui
   o outro. A barra também SÓ APARECE ao passar o ponteiro: quando não há o
   que rolar ela não ocupa lugar nenhum, e quando há, ela aparece onde a mão
   já está. */
#board.kanban-on, .kb-cards, .kb-modal-bg, .kb-modal-principal, .kb-modal-lateral {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
#board.kanban-on::-webkit-scrollbar,
.kb-cards::-webkit-scrollbar,
.kb-modal-bg::-webkit-scrollbar,
.kb-modal-principal::-webkit-scrollbar,
.kb-modal-lateral::-webkit-scrollbar { width: 9px; height: 9px; }
#board.kanban-on::-webkit-scrollbar-track,
.kb-cards::-webkit-scrollbar-track,
.kb-modal-bg::-webkit-scrollbar-track,
.kb-modal-principal::-webkit-scrollbar-track,
.kb-modal-lateral::-webkit-scrollbar-track { background: transparent; }
#board.kanban-on::-webkit-scrollbar-thumb,
.kb-cards::-webkit-scrollbar-thumb,
.kb-modal-bg::-webkit-scrollbar-thumb,
.kb-modal-principal::-webkit-scrollbar-thumb,
.kb-modal-lateral::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .13);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
#board.kanban-on:hover::-webkit-scrollbar-thumb,
.kb-cards:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .26); background-clip: content-box; }
/* Na lista clara o mesmo véu branco some: ali o contraste é ao contrário. */
.kb-lista.claro .kb-cards { scrollbar-color: rgba(15, 23, 42, .22) transparent; }
.kb-lista.claro .kb-cards::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); background-clip: content-box; }

/* A lista arrastada some do lugar de origem enquanto o ponteiro a leva. */
.kb-lista-arrastando { opacity: .4; }
.kb-lista-cab { cursor: grab; }
.kb-lista-cab:active { cursor: grabbing; }
.kb-lista-tit, .kb-lista-barra, .kb-lista-mais, .kb-lista-collab { cursor: pointer; }
.kb-lista-tit { cursor: text; }
.kb-lista-collab {
  flex-shrink: 0; padding: 0; border: none; background: transparent;
  display: inline-flex; align-items: center; cursor: pointer;
}
.kb-lista-collab[hidden] { display: none !important; }
.kb-lista-collab .note-collab-avatar { width: 22px !important; height: 22px !important; }

/* Excluir dentro da janela do cartão: vermelho só ao passar o ponteiro, para
   a ação destrutiva não gritar o tempo todo ao lado das que se usam sempre. */
.kb-modal-acao-perigo:hover {
  background: rgba(248, 113, 104, .16) !important;
  color: #f87168 !important;
}

/* ── O MENU DA CAPA ──────────────────────────────────────────────────── */
.kb-capa-pop {
  position: fixed; z-index: 4300;
  width: 244px; padding: 12px;
  background: #0f151d;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 9px;
}
.kb-capa-tit {
  margin: 0; text-align: center;
  font: 600 .74rem 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .6);
}
.kb-capa-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.kb-capa-op {
  padding: 0; border: 2px solid transparent; border-radius: 7px;
  background: rgba(255, 255, 255, .05); cursor: pointer; overflow: hidden;
}
.kb-capa-op:hover { border-color: rgba(255, 255, 255, .3); }
/* A escolhida ganha CONTORNO, e não só brilho: entre três miniaturas
   parecidas, um realce de luz não diz qual está valendo. */
.kb-capa-op-on { border-color: #22d3ee; }
.kb-capa-amostra { aspect-ratio: 1; overflow: hidden; }
.kb-capa-amostra img, .kb-capa-amostra video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-btn-perigo { color: #f87168; }
.kb-btn-perigo:hover { background: rgba(248, 113, 104, .16); }

/* A capa dentro da janela do cartão: sangra até a borda, como no cartão. */
.kb-modal-capa {
  flex: 0 0 auto;
  margin: 0 0 4px; height: 210px; overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.kb-modal-capa img, .kb-modal-capa video {
  width: 100%; height: 100%; max-height: 210px; object-fit: cover; display: block;
}
.kb-card-capa video { width: 100%; height: 100%; object-fit: cover; display: block; }

.kb-modal-fechar-perigo { color: rgba(232, 236, 243, .62); }
.kb-modal-fechar-perigo:hover { background: rgba(248, 113, 104, .18); color: #f87168; }

/* ══════════════════════════════════════════════════════════════════════
   O PAINEL DE FILTRO
   ══════════════════════════════════════════════════════════════════════
   Coluna à direita, como no Trello: ela não cobre o quadro, para a pessoa ver
   os cartões sumirem e aparecerem enquanto marca as caixas. Um modal no meio
   da tela esconderia justamente o efeito do que se está fazendo. */
.kbf-painel {
  position: fixed; right: 12px; top: 64px; z-index: 4100;
  width: 320px; max-height: calc(100dvh - 84px);
  display: flex; flex-direction: column;
  background: #0f151d;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 12px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .55);
}
.kbf-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 10px 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kbf-tit { flex: 1; margin: 0; text-align: center;
  font: 600 .88rem 'Inter', system-ui, sans-serif; color: #e8ecf3; }
.kbf-x {
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: none; border-radius: 7px;
  color: rgba(232, 236, 243, .6); font-size: .84rem;
}
.kbf-x:hover { background: rgba(255, 255, 255, .09); color: #e8ecf3; }
.kbf-corpo { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px 4px; }
.kbf-sec {
  margin: 16px 0 7px;
  font: 600 .7rem 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .5);
}
.kbf-corpo > .kbf-sec:first-child { margin-top: 0; }
.kbf-grupo { display: flex; flex-direction: column; gap: 2px; }
.kbf-op {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 6px; border-radius: 7px; cursor: pointer;
  font: 500 .8rem 'Inter', system-ui, sans-serif; color: #e8ecf3;
}
.kbf-op:hover { background: rgba(255, 255, 255, .06); }
/* `appearance:none` porque o desenho nativo da caixa ignora a cor de fundo em
   tema escuro — a armadilha 10 do CHECKLIST, que já custou duas correções. */
.kbf-op input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex-shrink: 0; margin: 0; cursor: pointer;
  border: 1.5px solid rgba(232, 236, 243, .38);
  border-radius: 4px; background: transparent; position: relative;
}
.kbf-op input[type="checkbox"]:checked { background: #22d3ee; border-color: #22d3ee; }
.kbf-op input[type="checkbox"]:checked::after {
  content: '✓'; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #06212a; font-size: .68rem; font-weight: 700;
}
.kbf-op input[type="checkbox"]:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
/* A etiqueta aparece como a FAIXA colorida com o nome dentro, e não como um
   texto ao lado de um quadradinho: é assim que ela aparece no cartão, e o
   filtro precisa parecer com o que filtra. */
.kbf-etq {
  flex: 1; min-width: 0; padding: 3px 10px; border-radius: 5px;
  font: 700 .7rem/1.6 'Inter', system-ui, sans-serif; color: #10151c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kbf-busca {
  width: 100%; box-sizing: border-box; height: 34px;
  padding: 0 10px; border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #e8ecf3; font: 500 .82rem 'Inter', system-ui, sans-serif;
}
.kbf-busca:focus { border-color: #22d3ee; outline: none; }
.kbf-ajuda {
  margin: 6px 2px 0;
  font: 400 .7rem/1.5 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .38);
}
.kbf-pe {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 10px 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.kbf-modo, .kbf-limpar {
  width: 100%; height: 34px; padding: 0 10px; border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #e8ecf3; font: 500 .8rem 'Inter', system-ui, sans-serif; cursor: pointer;
  appearance: none;
}
.kbf-modo:hover, .kbf-limpar:hover { background: rgba(255, 255, 255, .12); }
.kbf-contagem {
  margin: 0; text-align: center;
  font: 500 .74rem 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .48);
}
/* Zero resultados é a única situação em que a contagem precisa gritar: sem
   isso a pessoa vê um quadro vazio e conclui que perdeu as notas. */
.kbf-zero { color: #f87168; }
.kbf-painel .kbf-corpo { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.kbf-painel .kbf-corpo::-webkit-scrollbar { width: 8px; }
.kbf-painel .kbf-corpo::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
@media (max-width: 768px) {
  .kbf-painel { right: 8px; left: 8px; width: auto; }
  .kbf-op { min-height: 40px; }
}

/* ── A SUB-NOTA: resposta de formulário ────────────────────────────────
   Recuo e um traço vertical à esquerda, como uma resposta numa conversa. O
   traço é o que diz "isto pertence ao de cima" mesmo quando o cartão do
   formulário rola para fora da vista. */
.kb-card-sub {
  margin-left: 16px;
  border-left: 2px solid rgba(255, 255, 255, .18);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.kb-card-sub .kb-faixa { border-radius: 0 9px 0 0; }
.kb-lista.claro .kb-card-sub { border-left-color: rgba(15, 23, 42, .2); }
@media (max-width: 768px) { .kb-card-sub { margin-left: 12px; } }

/* O cartão que vai receber o arrastado ganha uma linha no alto: é onde o
   arrastado vai entrar, e não "este cartão está selecionado". */
.kb-card-alvo { box-shadow: 0 -3px 0 0 #22d3ee, 0 1px 0 rgba(0, 0, 0, .28); }

/* ── O MENU "AÇÕES DA LISTA" ──────────────────────────────────────────── */
.kb-acoes-pop {
  position: fixed; z-index: 4300;
  width: 272px; padding: 8px;
  background: #0f151d;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  max-height: calc(100dvh - 120px); overflow-y: auto;
  scrollbar-width: thin;
}
.kb-acoes-cab { display: flex; align-items: center; gap: 6px; padding: 4px 2px 8px; }
.kb-acoes-tit {
  flex: 1; margin: 0; text-align: center;
  font: 600 .8rem 'Inter', system-ui, sans-serif; color: #e8ecf3;
}
.kb-acoes-x {
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: none; border-radius: 6px;
  color: rgba(232, 236, 243, .55); font-size: .78rem;
}
.kb-acoes-x:hover { background: rgba(255, 255, 255, .09); color: #e8ecf3; }
.kb-acoes-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border: none; border-radius: 7px;
  background: transparent; cursor: pointer;
  font: 500 .81rem 'Inter', system-ui, sans-serif; color: #e8ecf3;
}
.kb-acoes-item:hover { background: rgba(255, 255, 255, .08); }
/* Excluir é a última e a única em vermelho, e só ao passar o ponteiro: uma
   ação destrutiva que grita o tempo todo vira paisagem. */
.kb-acoes-perigo { color: rgba(248, 113, 104, .9); }
.kb-acoes-perigo:hover { background: rgba(248, 113, 104, .16); color: #f87168; }
.kb-acoes-sep { height: 1px; margin: 8px 2px; background: rgba(255, 255, 255, .09); }
.kb-acoes-secao {
  margin: 0 2px 4px; padding: 0 8px;
  font: 600 .68rem 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .5);
}
.kb-acoes-ajuda {
  margin: 0 2px 7px; padding: 0 8px;
  font: 400 .72rem/1.5 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .4);
}
.kb-acoes-select {
  width: calc(100% - 4px); margin: 0 2px; height: 34px;
  padding: 0 9px; border-radius: 7px; cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #e8ecf3; font: 500 .8rem 'Inter', system-ui, sans-serif;
  appearance: none;
}
.kb-acoes-select:focus-visible { outline: 2px solid #22d3ee; outline-offset: 1px; }
@media (max-width: 768px) { .kb-acoes-item, .kb-acoes-select { min-height: 40px; } }

/* ── A ETAPA NO CARTÃO ABERTO ─────────────────────────────────────────── */
.kb-modal-etapa { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.kb-modal-etapa-rot {
  font: 600 .68rem 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .5); text-transform: uppercase; letter-spacing: .06em;
}
.kb-modal-etapa-sel {
  height: 34px; padding: 0 10px; min-width: 170px;
  border-radius: 7px; cursor: pointer; appearance: none;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .14);
  color: #e8ecf3; font: 600 .8rem 'Inter', system-ui, sans-serif;
}
.kb-modal-etapa-sel:focus-visible { outline: 2px solid #22d3ee; outline-offset: 1px; }
@media (max-width: 768px) { .kb-modal-etapa-sel { min-height: 40px; } }

/* ── O CONVITE DE DEMONSTRAÇÃO ───────────────────────────────────────── */
.kb-demo-convite {
  flex: 0 0 302px; width: 302px;
  padding: 16px 16px 14px;
  background: rgba(12, 16, 22, .82);
  border: 1px dashed rgba(34, 211, 238, .35);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.kb-demo-convite h3 {
  margin: 0; font: 600 .88rem/1.4 'Inter', system-ui, sans-serif; color: #e8ecf3;
}
.kb-demo-convite p {
  margin: 0; font: 400 .76rem/1.55 'Inter', system-ui, sans-serif;
  color: rgba(232, 236, 243, .5);
}
@media (max-width: 768px) { .kb-demo-convite { flex-basis: 86vw; width: 86vw; } }

/* ── AS SETAS DE ROLAR PARA O LADO ────────────────────────────────────
   Fixas na borda da janela, meio da altura. Ficam POR CIMA das listas de
   propósito: o lugar onde a pessoa procura "tem mais para lá" é a beirada,
   e uma seta empurrada para fora do conteúdo não seria vista. */
.kb-seta {
  position: fixed; top: 50%; z-index: 60;
  width: 34px; height: 60px; padding: 0;
  transform: translateY(-50%);
  display: grid; place-items: center; cursor: pointer;
  background: rgba(12, 16, 22, .82);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #e8ecf3; font-size: 1.5rem; line-height: 1;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.kb-seta:hover { background: rgba(28, 36, 48, .95); }
.kb-seta:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.kb-seta[hidden] { display: none !important; }
.kb-seta-esq { left: 0; border-left: none; border-radius: 0 10px 10px 0; }
.kb-seta-dir { right: 0; border-right: none; border-radius: 10px 0 0 10px; }
@media (max-width: 768px) {
  /* No dedo a rolagem é natural: a seta só ocuparia a beirada onde o polegar
     encosta sem querer. */
  .kb-seta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .kb-seta { transition: none; } }

/* ── REPETIR ───────────────────────────────────────────────────────────
   O botão fica aceso quando a rotina está ligada: é a diferença entre
   "posso repetir isto" e "isto já se repete", e ela precisa ser visível sem
   abrir o menu. */
.kb-btn-ativo {
  background: rgba(34, 211, 238, .16) !important;
  border-color: #22d3ee !important;
  color: #22d3ee !important;
}
.kb-acoes-item.ativo { color: #22d3ee; font-weight: 600; }
.kb-capa-dica {
  margin: 8px 4px 2px; font-size: .72rem; line-height: 1.4;
  color: #97a3b4; max-width: 220px;
}

/* ── REGRAS DA LISTA ───────────────────────────────────────────────────
   Cabem num menu porque o gatilho é implícito ("quando entrar nesta lista").
   A regra existente aparece como frase legível, e não como o par de ids que
   está gravado. */
.kb-regras { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.kb-regra {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .05);
}
.kb-regra-txt { flex: 1 1 auto; min-width: 0; font-size: .78rem; color: #cfd6e0; }
.kb-regra-x {
  flex-shrink: 0; width: 22px; height: 22px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 6px;
  background: transparent; border: none; color: #97a3b4; font-size: .8rem;
}
.kb-regra-x:hover { background: rgba(239, 68, 68, .18); color: #fca5a5; }
.kb-regra-x:focus-visible { outline: 2px solid #22d3ee; outline-offset: 1px; }
.kb-regra-nova { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.kb-regra-nova .kb-acoes-select { flex: 1 1 auto; min-width: 0; }
.kb-regra-alvo { flex: 1 1 auto; min-width: 0; display: flex; }
.kb-regra-alvo > * { width: 100%; min-width: 0; }
.kb-acoes-input {
  padding: 6px 8px; border-radius: 8px; font-size: .78rem;
  background: rgba(255, 255, 255, .07); color: #e8ecf3;
  border: 1px solid rgba(255, 255, 255, .12);
}
.kb-regra-add {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 8px;
  background: rgba(34, 211, 238, .16); border: 1px solid #22d3ee; color: #22d3ee;
  font-size: 1rem; line-height: 1;
}
.kb-regra-add:hover { background: rgba(34, 211, 238, .26); }
.kb-regra-add:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* ── A NOTA DE CLIENTE NO QUADRO EM LISTAS ─────────────────────────────
   A faixa do cartão responde "quanto e se pagou" sem abrir nada — é a
   pergunta que se faz olhando a coluna de longe. Ela fica ABAIXO do título e
   ACIMA da fileira de etapa: juntar as duas faria "A fazer · Pago" parecer
   contradição, quando são coisas diferentes. */
.kb-card-cli {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.kb-card-cli-selo {
  font-size: .68rem; font-weight: 600; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  border: 1px solid currentColor; background: rgba(0, 0, 0, .18);
}
.kb-card-cli-valor { font-size: .74rem; font-weight: 700; color: #e8ecf3; }
.kb-card-cli-nicho {
  font-size: .66rem; color: #97a3b4; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A ficha dentro do modal é SOMENTE LEITURA: editar continua num lugar só. */
.kb-cli-ficha {
  margin: 12px 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.kb-cli-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kb-cli-tit { margin: 0; font-size: .8rem; font-weight: 700; color: #e8ecf3; letter-spacing: .01em; }
.kb-cli-selo {
  font-size: .7rem; font-weight: 600; line-height: 1; flex-shrink: 0;
  padding: 4px 9px; border-radius: 999px; border: 1px solid currentColor;
}
.kb-cli-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-top: 10px;
}
.kb-cli-dado { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 0,64rem em MAIÚSCULAS é o pior caso de leitura da tela: o mínimo aqui é
   4,5:1, e o cinza antigo (#8b97a8) media 4,3:1. */
.kb-cli-rot { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: #9aa6b6; }
.kb-cli-val { font-size: .82rem; color: #e8ecf3; overflow-wrap: anywhere; }
.kb-cli-abrir {
  margin-top: 12px; width: 100%; padding: 8px 10px; cursor: pointer;
  border-radius: 9px; font-size: .78rem; font-weight: 600;
  background: rgba(34, 211, 238, .14); border: 1px solid rgba(34, 211, 238, .5);
  color: #22d3ee;
}
.kb-cli-abrir:hover { background: rgba(34, 211, 238, .24); }
.kb-cli-abrir:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   A FICHA DA CONVERSA DE WHATSAPP
   ═══════════════════════════════════════════════════════════════════════
   Reaproveita a grade da ficha de cliente (`.kb-cli-grade`) porque é o mesmo
   gesto — rótulo em cima, valor embaixo — e duas grades iguais com nomes
   diferentes divergem no primeiro ajuste.

   O verde é o do WhatsApp, mas o do TEXTO é outro: `#25d366` sobre branco dá
   1,8:1 e não se lê. A mesma regra da folha do painel (`whatsapp.css`), pelo
   mesmo motivo. */
.kb-wa-ficha {
  margin: 12px 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(37, 211, 102, .07);
  border: 1px solid rgba(37, 211, 102, .28);
}
.kb-wa-cab { display: flex; align-items: center; gap: 8px; }
.kb-wa-ico { color: #5ee89b; font-size: .7rem; line-height: 1; flex-shrink: 0; }
.kb-wa-tit { margin: 0; font-size: .8rem; font-weight: 700; color: #eef2f7; letter-spacing: .01em; }
.kb-wa-abrir {
  margin-top: 12px; width: 100%; padding: 8px 10px; cursor: pointer;
  border-radius: 9px; font-size: .78rem; font-weight: 600;
  background: rgba(37, 211, 102, .16); border: 1px solid rgba(37, 211, 102, .5);
  color: #5ee89b;
}
.kb-wa-abrir:hover { background: rgba(37, 211, 102, .26); }
.kb-wa-abrir:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; }

/* O cartão automático segue a linguagem visual do WhatsApp: papel branco,
   verde de marca e informação da pessoa antes das ferramentas. A regra vale
   nos dois temas porque a origem do lead precisa ser reconhecível sem depender
   do tema escolhido para o restante do quadro. */
.note.nota-whatsapp {
  color-scheme: light;
  background: linear-gradient(150deg, #ffffff 0%, #f4fff8 100%) !important;
  border: 1px solid #a9dfbd !important;
  box-shadow: 0 12px 34px rgba(9, 99, 51, .17), 0 2px 8px rgba(0, 0, 0, .12) !important;
}
.note.nota-whatsapp > .n-bar {
  height: 4px; background: linear-gradient(90deg, #128c7e, #25d366) !important;
}
.nota-whatsapp .n-chip-row { min-height: 30px; padding: 7px 9px 0; justify-content: flex-end; }
.nota-whatsapp .n-chip-row > :is(.n-chip,.n-status-pill,.n-cl-badge) { display: none !important; }
.nota-whatsapp .n-chip-row :is(.n-mais-btn,.n-pin-btn,.n-del) { color: #577064; }
.nota-whatsapp .n-chip-row :is(.n-mais-btn,.n-pin-btn,.n-del):hover { background: #e2f6e9; color: #08783e; }
.n-wa-lead { display: flex; align-items: center; gap: 10px; padding: 4px 13px 11px; }
.n-wa-avatar,.stack-wa-avatar {
  position: relative; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
  border-radius: 50%; color: #fff; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(145deg, #128c7e, #25d366);
  box-shadow: 0 0 0 3px #dcf8e7;
}
.n-wa-avatar { width: 43px; height: 43px; font-size: .72rem; }
.n-wa-avatar img,.stack-wa-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n-wa-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.n-wa-copy strong { overflow: hidden; color: #102c20; font-size: .91rem; text-overflow: ellipsis; white-space: nowrap; }
.n-wa-copy small { overflow: hidden; color: #60766b; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.n-wa-marca { display: grid; width: 27px; height: 27px; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #25d366; color: #fff; }
.n-wa-marca svg { width: 17px; height: 17px; }
.nota-whatsapp .n-title-row,.nota-whatsapp .n-body-inline { display: none; }
.nota-whatsapp > .n-expand-area { display: none; }
.n-wa-acoes,.stack-wa-actions { display: flex; align-items: center; gap: 4px; }
.n-wa-acoes { padding: 9px 12px 11px; border-top: 1px solid #d8eee0; }
.n-wa-acoes button,.stack-wa-actions button {
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-radius: 7px; background: transparent; color: #62766b;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.n-wa-acoes button { width: 31px; height: 31px; font-size: .92rem; }
.n-wa-acoes button:hover,.stack-wa-actions button:hover { background: #def5e6; color: #08783e; transform: translateY(-1px); }
.n-wa-acoes .n-wa-conversa,.stack-wa-actions .stack-wa-conversa { color: #0b8f4a; }
.n-wa-acoes svg,.stack-wa-actions svg { width: 18px; height: 18px; }

/* A pasta do WhatsApp é uma lista própria, não uma pasta escura com notas
   verdes dentro. O cabeçalho, o fundo e os cartões seguem a referência do
   inbox: verde de marca, superfície menta e cartões brancos separados. */
.stack-wrap.stack-whatsapp {
  color-scheme: light; min-width: 300px; overflow: visible;
  background: #d9f8e7 !important; border: 1px solid #69d69b !important;
  border-radius: 13px !important; box-shadow: 0 14px 34px rgba(11, 116, 66, .22) !important;
}
.stack-whatsapp .stack-header {
  min-height: 62px; padding: 9px 10px !important; gap: 7px !important;
  background: linear-gradient(135deg, #079452, #18b66b) !important;
  border: 0 !important; border-radius: 12px 12px 0 0;
}
.stack-whatsapp .stack-header-color-dot,.stack-whatsapp .shb { display: none !important; }
.stack-wa-titlebox { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.stack-wa-titlebox small { color: rgba(255,255,255,.88); font-size: .64rem; line-height: 1.2; }
.stack-whatsapp .stack-header-title {
  color: #fff !important; font-size: .93rem !important; font-weight: 760 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.stack-whatsapp .stack-header-title::placeholder { color: rgba(255,255,255,.72) !important; }
.stack-whatsapp .stack-header-count {
  min-width: 24px; padding: 3px 7px; background: rgba(255,255,255,.2) !important;
  color: #fff !important; font-size: .68rem !important;
}
.stack-whatsapp .stack-del-btn,.stack-whatsapp .stack-collab-host { display: none !important; }
.stack-whatsapp .stack-toggle-btn {
  background: transparent !important; border: 0 !important; color: #fff !important;
}
.stack-whatsapp .stack-body {
  gap: 7px; padding: 7px; background: #d9f8e7; border-radius: 0 0 12px 12px;
}
.stack-whatsapp .stack-body.collapsed { padding-top: 0; padding-bottom: 0; }

/* Dentro da pasta, cada conversa vira o cartão completo da lista: foto com
   selo do WhatsApp, nome e hora na mesma linha, prévia e cinco ações. */
.stack-card-row.stack-card-row-whatsapp {
  position: relative; display: grid !important;
  grid-template-columns: 46px minmax(0,1fr); grid-template-rows: auto 34px;
  min-height: 104px; padding: 10px !important; gap: 7px 9px !important;
  align-items: center !important; color-scheme: light;
  background: #fff !important; border: 1px solid #c4ead4 !important;
  border-radius: 10px; box-shadow: 0 2px 7px rgba(17, 102, 61, .1);
}
.stack-card-row-whatsapp:hover { background: #fbfffd !important; border-color: #8fdcaf !important; }
.stack-card-row-whatsapp .stack-card-row-bar,
.stack-card-row-whatsapp > .stack-card-row-color,
.stack-card-row-whatsapp > .stack-card-row-status { display: none !important; }
.stack-wa-avatar-wrap { position: relative; width: 46px; height: 46px; align-self: start; }
.stack-wa-avatar { width: 46px; height: 46px; font-size: .72rem; box-shadow: 0 0 0 2px #e1f7ea; }
.stack-wa-avatar-badge {
  position: absolute; right: -2px; bottom: -2px; display: grid; width: 17px; height: 17px;
  place-items: center; border: 2px solid #fff; border-radius: 50%; background: #16b85f; color: #fff;
}
.stack-wa-avatar-badge svg { width: 11px; height: 11px; }
.stack-wa-main { display: flex; min-width: 0; align-self: start; flex-direction: column; gap: 5px; padding-top: 1px; }
.stack-wa-identidade { display: flex; min-width: 0; align-items: center; gap: 7px; }
.stack-card-row-whatsapp .stack-card-row-title {
  display: block; min-width: 0; padding: 0; color: #123629 !important; font-size: .84rem !important;
  font-weight: 760 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
}
.stack-wa-identidade time { margin-left: auto; flex: 0 0 auto; color: #638779; font-size: .63rem; font-weight: 600; }
.stack-wa-preview {
  display: -webkit-box; overflow: hidden; color: #355f50; font-size: .69rem; line-height: 1.3;
  white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.stack-wa-actions {
  grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(5, 1fr);
  align-self: end; gap: 7px; margin: 0;
}
.stack-wa-actions button {
  width: 100%; height: 32px; border: 1px solid #d5f2e1; border-radius: 8px;
  background: #edfff4; color: #174d38;
}
.stack-wa-actions button:hover { background: #d9f8e6; color: #087a41; transform: translateY(-1px); }
.stack-wa-actions .stack-wa-conversa { background: #e3faec; color: #07934c; }
.stack-wa-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stack-wa-actions .stack-wa-conversa svg { fill: currentColor; stroke: none; }
.stack-card-row-whatsapp > .stack-card-row-expand { display: none !important; }
.stack-card-row-whatsapp > :is(.stack-card-row-unstack,.stack-card-row-apagar) {
  position: absolute; top: 6px; z-index: 2; width: 22px !important; height: 22px !important;
  opacity: 0 !important; background: #fff !important;
}
.stack-card-row-whatsapp:hover > :is(.stack-card-row-unstack,.stack-card-row-apagar) { opacity: 1 !important; }
.stack-card-row-whatsapp > .stack-card-row-unstack { right: 31px; color: #8a6b21; }
.stack-card-row-whatsapp > .stack-card-row-apagar { right: 6px; color: #b44d5d; }
.stack-wa-adicionar {
  display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; cursor: pointer; border: 1px dashed #69d69b; border-radius: 9px;
  background: rgba(255,255,255,.22); color: #0a7542; font: 650 .72rem/1 'Inter',sans-serif;
  transition: background .15s ease,border-color .15s ease,transform .15s ease;
}
.stack-wa-adicionar span { font-size: 1rem; line-height: 1; }
.stack-wa-adicionar:hover { background: rgba(255,255,255,.58); border-color: #21b96b; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════════
   A MESMA LISTA NO MODO KANBAN
   O modo "listas" usa `.kb-lista`/`.kb-card`, não a pasta do quadro livre.
   Esta é a superfície que aparece no print do produto. */
.kb-lista.kb-lista-whatsapp {
  color-scheme: light; overflow: hidden; border: 1px solid #62d596 !important;
  border-top: 0 !important; border-radius: 12px !important;
  background: #cef6df !important; box-shadow: 0 12px 30px rgba(8,112,61,.18) !important;
}
.kb-lista-whatsapp .kb-lista-cab {
  min-height: 62px; padding: 9px 10px 8px 12px !important; gap: 7px !important;
  align-items: center; background: linear-gradient(135deg,#079452,#19b66b) !important;
}
.kb-lista-whatsapp .kb-lista-barra { display: none !important; }
.kb-wa-lista-titulo { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.kb-lista-whatsapp .kb-lista-tit {
  width: 100%; padding: 0 !important; border: 0 !important; border-radius: 0;
  background: transparent !important; color: #fff !important;
  font-size: .94rem !important; font-weight: 760 !important; line-height: 1.25 !important;
}
.kb-lista-whatsapp .kb-lista-tit:focus { box-shadow: 0 1px 0 rgba(255,255,255,.8); }
.kb-wa-lista-titulo small { color: rgba(255,255,255,.9); font: 500 .64rem/1.25 'Inter',sans-serif; }
.kb-lista-whatsapp :is(.kb-lista-cont,.md-lista-selos) {
  color: #fff !important; background: rgba(255,255,255,.2) !important;
}
.kb-lista-whatsapp .kb-lista-collab { display: none !important; }
.kb-lista-whatsapp .kb-lista-mais { color: #fff !important; }
.kb-lista-whatsapp .kb-lista-mais:hover { background: rgba(255,255,255,.16) !important; }
.kb-lista-whatsapp .kb-cards {
  gap: 7px !important; padding: 7px 7px 4px !important; background: #cef6df;
}
.kb-lista-whatsapp .kb-add-card {
  margin: 3px 7px 7px !important; min-height: 42px; justify-content: center;
  border: 1px dashed #58cb8c !important; border-radius: 9px !important;
  background: rgba(255,255,255,.24) !important; color: #087541 !important;
  font-size: .72rem !important; font-weight: 650 !important;
}
.kb-lista-whatsapp .kb-add-card:hover { background: rgba(255,255,255,.6) !important; }

.kb-card.kb-card-whatsapp {
  min-height: 104px; padding: 9px !important; border: 1px solid #bce7ce !important;
  border-radius: 10px !important; background: #fff !important;
  box-shadow: 0 2px 7px rgba(13,101,58,.1) !important; filter: none;
}
.kb-card.kb-card-whatsapp:hover { background: #fbfffd !important; border-color: #84d9a8 !important; filter: none; }
.kb-wa-lead-top { display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 9px; align-items: start; }
.kb-wa-lead-avatar-wrap { position: relative; display: block; width: 45px; height: 45px; }
.kb-wa-lead-avatar {
  position: relative; display: grid; width: 45px; height: 45px; overflow: hidden;
  place-items: center; border-radius: 50%; background: linear-gradient(145deg,#128c7e,#25d366);
  color: #fff; font: 800 .71rem/1 'Inter',sans-serif; box-shadow: 0 0 0 2px #e1f7ea;
}
.kb-wa-lead-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kb-wa-lead-selo {
  position: absolute; right: -2px; bottom: -2px; display: grid; width: 17px; height: 17px;
  place-items: center; border: 2px solid #fff; border-radius: 50%; background: #16b85f; color: #fff;
}
.kb-wa-lead-selo svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.kb-wa-lead-texto { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding-top: 1px; }
.kb-wa-lead-identidade { display: flex; min-width: 0; align-items: center; gap: 7px; }
.kb-wa-lead-identidade strong {
  overflow: hidden; min-width: 0; color: #123629; font: 760 .84rem/1.25 'Inter',sans-serif;
  text-overflow: ellipsis; white-space: nowrap;
}
.kb-wa-lead-identidade time { margin-left: auto; flex: 0 0 auto; color: #638779; font: 600 .63rem/1 'Inter',sans-serif; }
.kb-wa-lead-previa {
  display: -webkit-box; overflow: hidden; color: #355f50; font: 500 .69rem/1.3 'Inter',sans-serif;
  white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.kb-wa-lead-acoes { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-top: 8px; }
.kb-wa-lead-acao {
  display: grid; width: 100%; height: 31px; padding: 0; cursor: pointer; place-items: center;
  border: 1px solid #d2f0df; border-radius: 8px; background: #edfff4; color: #174d38;
  transition: background .15s ease,color .15s ease,transform .15s ease;
}
.kb-wa-lead-acao:hover { background: #daf8e7; color: #087a41; transform: translateY(-1px); }
.kb-wa-lead-acao.principal { background: #e1faeb; color: #07934c; }
.kb-wa-lead-acao svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* O bloco jurídico é uma caixa DENTRO da ficha, e afundada: ele é palpite do
   sistema, não fato como o telefone logo acima. */
.kb-wa-jur {
  margin-top: 14px; padding: 12px; border-radius: 10px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .08);
}
.kb-wa-jcab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kb-wa-jtit { margin: 0; font-size: .76rem; font-weight: 700; color: #eef2f7; }
.kb-wa-jtirar {
  flex-shrink: 0; cursor: pointer; padding: 3px 9px; border-radius: 999px;
  font-size: .64rem; font-weight: 600;
  background: transparent; border: 1px solid rgba(255, 255, 255, .16); color: #a3aebd;
}
.kb-wa-jtirar:hover { color: #eef2f7; border-color: rgba(255, 255, 255, .3); }
.kb-wa-jdica { margin: 6px 0 0; font-size: .68rem; line-height: 1.45; color: #a3aebd; }
.kb-wa-jgrade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 12px;
}
.kb-wa-jcampo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* O relato ocupa a linha inteira: três palavras por linha num campo de duas
   colunas é o que faz ninguém escrever nele. */
.kb-wa-jlargo { grid-column: 1 / -1; }
.kb-wa-jrot { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: #a3aebd; }
.kb-wa-jval {
  width: 100%; padding: 7px 9px; border-radius: 8px; font: inherit; font-size: .8rem;
  background: #1e2129; border: 1px solid rgba(255, 255, 255, .14); color: #eef2f7;
  resize: vertical;
}
.kb-wa-jval:focus { outline: none; border-color: #25d366; box-shadow: 0 0 0 2px rgba(37, 211, 102, .22); }

/* Ajuste não destrutivo: a imagem inteira continua no anexo. */
.kb-capa-ajuste-bg{position:fixed;inset:0;z-index:100050;background:#0009;display:grid;place-items:center;padding:20px}
.kb-capa-ajuste{width:min(520px,100%);max-height:90dvh;overflow:auto;background:#151a22;color:#edf2fa;border:1px solid #364459;border-radius:16px;padding:22px;box-shadow:0 20px 80px #0008}
.kb-capa-ajuste h2{font-size:20px;margin:0 0 18px}
.kb-capa-preview{width:100%;aspect-ratio:16/9;overflow:hidden;background:#0b1017;border-radius:10px}
.kb-capa-preview img,.kb-capa-preview video{width:100%;height:100%;display:block}
.kb-capa-ajuste label{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:16px;font-size:14px}
.kb-capa-ajuste label select,.kb-capa-ajuste label input{grid-column:1/-1;width:100%}
.kb-capa-ajuste select{padding:8px;background:transparent;color:inherit;border:1px solid #78859a;border-radius:7px;color-scheme:dark}
.kb-capa-ajuste footer{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.kb-capa-ajuste footer .kb-btn{min-width:92px;border-width:1px;border-style:solid;opacity:1}
.kb-capa-ajuste footer .kb-btn[type="button"]{background:#293342;border-color:#526176;color:#eef3fa}
.kb-capa-ajuste footer .kb-btn[type="button"]:hover{background:#354257;border-color:#718199}
.kb-capa-ajuste footer .kb-btn[type="submit"]{background:#2f7ff2;border-color:#2f7ff2;color:#fff;box-shadow:0 5px 15px #0d62cb55}
.kb-capa-ajuste footer .kb-btn[type="submit"]:hover{background:#1e6edc;border-color:#1e6edc}
.kb-capa-ajuste footer .kb-btn:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}
.kb-capa-ajuste footer .kb-btn:disabled{opacity:.58;cursor:not-allowed;box-shadow:none}
html[data-theme="light"] .kb-capa-ajuste{background:#fff;color:#123052;border-color:#cbd9eb}
html[data-theme="light"] .kb-capa-ajuste select{color-scheme:light}
html[data-theme="light"] .kb-capa-ajuste footer .kb-btn[type="button"]{background:#e5edf6;border-color:#a9bfd5;color:#173b5d}
html[data-theme="light"] .kb-capa-ajuste footer .kb-btn[type="button"]:hover{background:#d6e5f3;border-color:#789bbd;color:#0e3151}
html[data-theme="light"] .kb-capa-ajuste footer .kb-btn[type="submit"]{background:#146fd1;border-color:#146fd1;color:#fff;box-shadow:0 5px 15px #146fd144}
html[data-theme="light"] .kb-capa-ajuste footer .kb-btn[type="submit"]:hover{background:#0b5fba;border-color:#0b5fba}