/* O quadro de pendências.
   Sobre os tokens do ONE: --indigo é estrutura (cabeçalho de coluna, chip de
   cliente), --acao é ação. Cartão não usa cor de destaque -- num quadro cheio,
   tudo colorido é o mesmo que nada colorido. */

/* #area vive num flex column (.conteudo) e recebe a altura de flex:1 -- a
   classe .painel-sessao dava isso, e o quadro troca a classe. Sem o flex aqui,
   height:100% nao resolve e as colunas nao teriam por onde rolar por dentro. */
.quadro-area{display:flex;flex-direction:column;gap:var(--sp-4);
  flex:1 1 auto;min-height:0;overflow:hidden;padding:var(--sp-4) 28px var(--sp-4)}

.quadro-barra{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;flex:0 0 auto}
.quadro-filtros{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;
  width:100%}
.quadro-filtros select{padding:var(--sp-2) var(--sp-3);border:1px solid var(--borda-forte);
  border-radius:var(--r-md);background:var(--painel);color:var(--texto);font-size:var(--fs-13)}
.quadro-filtros .btn{margin-left:auto}
.quadro-filtros .btn + .btn{margin-left:0}

/* Quatro colunas que rolam por dentro, não a página. */
.quadro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-3);flex:1 1 auto;min-height:0}
@media (max-width:1100px){.quadro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.quadro{grid-template-columns:1fr}}

.quadro-coluna{display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--surface-3);border:1px solid var(--borda);border-radius:var(--r-lg);
  overflow:hidden}
/* As quatro colunas sao uma PROGRESSAO, e a cor diz isso: a fila e neutra,
   'fazendo' e a unica com a cor de acao (e onde o trabalho esta), esperando e
   ambar e concluido e verde. Antes 'Fazendo' tinha a mesma cor de 'A fazer' e
   as duas primeiras liam como a mesma coisa. */
.quadro-cab{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);flex:0 0 auto;
  border-bottom:1px solid var(--borda);
  font-size:var(--fs-12);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.quadro-cab em{font-style:normal;font-variant-numeric:tabular-nums;
  font-size:var(--fs-13);letter-spacing:0;opacity:.75}
.quadro-cab.fila  {background:var(--surface-3);color:var(--texto2)}
.quadro-cab.ativo {background:var(--acao-dim);  color:var(--acao-fg)}
.quadro-cab.espera{background:var(--alerta-dim);color:var(--alerta-cor)}
.quadro-cab.feito {background:var(--ok-dim);    color:var(--ok-cor)}

.quadro-pilha{display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-2);overflow-y:auto;flex:1 1 auto;min-height:60px}
.quadro-pilha.alvo{background:var(--acao-dim);outline:2px dashed var(--acao-borda);
  outline-offset:-4px}
/* Ocupa a coluna inteira e mostra a area de soltar. Um travessao no topo
   deixava metade do quadro parecendo quebrada. */
.quadro-vazia{margin:0;flex:1;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--fraco);font-size:var(--fs-12);line-height:1.5;
  padding:var(--sp-4);border:1px dashed currentColor;border-radius:var(--r-md);
  min-height:80px;opacity:.75}

.cartao{background:var(--painel);border:1px solid var(--borda);border-radius:var(--r-md);
  padding:var(--sp-3);cursor:grab;box-shadow:var(--sombra);
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.cartao:hover{border-color:var(--borda-forte);box-shadow:var(--sombra2)}
.cartao:active{cursor:grabbing}
.cartao.arrastando{opacity:.4}
/* Prioridade 1 e 2 se veem sem legenda: um traço na borda de cima. */
.cartao.urgente{border-top:2px solid var(--erro-cor)}

.cartao-titulo{margin:0 0 var(--sp-2);font-size:var(--fs-13);line-height:1.45;
  color:var(--texto);font-weight:500}
.cartao-pe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
/* NAO renomear de volta para .cartao-cliente: esse nome ja e do cartao inteiro
   da tela de abrir cliente, em estilo.css. Como sao a mesma especificidade, o
   chip herdava min-height:104px, padding:16px e a borda daquele cartao -- e
   virava um quadrado vazio embaixo de cada pendencia. */
/* Sem caixa preenchida: o cliente e etiqueta, nao mensagem. Cheio, ele
   gritava mais que o titulo -- que e o que a pessoa esta lendo. */
.cartao-escopo{font-size:var(--fs-11);letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;color:var(--indigo);opacity:.85}
.cartao-prazo{font-size:var(--fs-11);color:var(--texto2);font-variant-numeric:tabular-nums}
.cartao-prazo.alerta{color:var(--alerta-cor);font-weight:600}
.cartao-prazo.erro{color:var(--erro-cor);font-weight:600}
/* Disco de iniciais: dois consultores cabem na memória, nome inteiro não cabe
   no cartão. O nome completo fica no title. */
.cartao-quem{margin-left:auto;width:22px;height:22px;border-radius:var(--r-full);
  background:var(--indigo);color:#fff;font-size:var(--fs-11);font-weight:600;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}

.quadro-carregando{color:var(--fraco);font-size:var(--fs-13);padding:var(--sp-4)}

/* No modo quadro a lateral segue de consultoria, mas o botão fica marcado. */
#btnQuadro.ativo{background:var(--acao-dim);border-color:var(--acao-borda)}
body[data-modo="erp"] #btnQuadro{display:none}

/* Cartão que se moveu sozinho na sua frente -- alguém do outro lado mexeu.
   Um realce curto que se apaga: chamar atenção uma vez, e não virar enfeite. */
@keyframes cartao-mudou{
  0%{border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-dim)}
  100%{border-color:var(--borda);box-shadow:var(--sombra)}
}
.cartao.mudou{animation:cartao-mudou 2s ease-out}
@media (prefers-reduced-motion:reduce){
  .cartao.mudou{animation:none;border-color:var(--acao)}
}

/* ─── Ficha do cartão, com a thread ────────────────────────────────────── */
.ficha-cartao{display:flex;flex-direction:column;gap:var(--sp-4);max-height:84vh}
.ficha-campos{display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.ficha-campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.ficha-campo > span{font-size:var(--fs-11);letter-spacing:.06em;text-transform:uppercase;
  color:var(--fraco);font-weight:600}
.ficha-campo select,.ficha-campo input{padding:6px 8px;border:1px solid var(--borda-forte);
  border-radius:var(--r-md);background:var(--painel);color:var(--texto);
  font-size:var(--fs-13);font-family:inherit;width:100%}
.ficha-cliente{font-size:var(--fs-12);letter-spacing:.07em;text-transform:uppercase;
  color:var(--indigo);padding-top:7px}
.ficha-conteudo{background:var(--surface-3);border-radius:var(--r-md);padding:var(--sp-3);
  font-size:var(--fs-13);line-height:1.5;color:var(--texto2)}
.ficha-conteudo p{margin:0;white-space:pre-wrap}

.ficha-thread{display:flex;flex-direction:column;gap:var(--sp-2);min-height:0;flex:1}
.ficha-thread h4{margin:0;font-size:var(--fs-12);letter-spacing:.06em;text-transform:uppercase;
  color:var(--fraco);font-weight:600}
.thread-lista{display:flex;flex-direction:column;gap:var(--sp-2);overflow-y:auto;
  min-height:80px;max-height:34vh;padding-right:2px}
.thread-vazia{margin:0;padding:var(--sp-4);text-align:center;color:var(--fraco);
  font-size:var(--fs-12);line-height:1.5}

.thread-item{border-left:2px solid var(--borda-forte);padding:2px 0 2px var(--sp-3)}
/* O que o Claude escreveu se distingue à distância: quando ele move um cartão,
   a pessoa precisa ver de relance que foi ele e não alguém da equipe. */
.thread-item.claude{border-left-color:var(--acao)}
.thread-quem{display:flex;gap:var(--sp-2);align-items:baseline;font-size:var(--fs-11)}
.thread-quem b{color:var(--texto)}
.thread-item.claude .thread-quem b{color:var(--acao-fg)}
.thread-quem span{color:var(--fraco)}
.thread-item p{margin:2px 0 0;font-size:var(--fs-13);line-height:1.45;white-space:pre-wrap}
.thread-moveu{margin-top:4px;font-size:var(--fs-11);color:var(--fraco);
  display:flex;align-items:center;gap:var(--sp-2)}
.thread-desfazer{border:none;background:none;color:var(--acao-fg);cursor:pointer;
  font-size:var(--fs-11);font-family:inherit;padding:0;text-decoration:underline}

.thread-escrever{display:flex;gap:var(--sp-2);align-items:flex-end}
.thread-escrever textarea{flex:1;padding:8px;border:1px solid var(--borda-forte);
  border-radius:var(--r-md);background:var(--painel);color:var(--texto);
  font-family:inherit;font-size:var(--fs-13);resize:vertical;min-height:40px}

/* Contador de interações no cartão do quadro. */
.cartao-notas{font-size:var(--fs-11);color:var(--fraco);font-variant-numeric:tabular-nums;
  border:1px solid var(--borda);border-radius:var(--r-full);padding:0 6px;line-height:1.5}

/* Ficha com descrição comprida.
   .modal é coluna flex de altura limitada e sem overflow: o que passa do teto
   some pela borda em vez de rolar. A descrição crescia sem limite e empurrava a
   thread e a caixa de escrever para fora, sem como chegar até elas.
   Numa coluna flex, o que NÃO deve encolher precisa dizer isso, e o que pode
   crescer sem limite precisa de teto. */
.ficha-cartao{overflow:hidden}
.ficha-cartao > h3,
.ficha-cartao > .ficha-campos,
.ficha-cartao > .ficha-conteudo,
.ficha-cartao .thread-escrever,
.ficha-cartao > .modal-rodape{flex-shrink:0}
.ficha-conteudo{max-height:22vh;overflow-y:auto}
.ficha-thread{flex:1 1 auto;min-height:8rem}
.thread-lista{flex:1 1 auto;max-height:none;min-height:4rem}