/* Estilos do módulo CRM — herdam os tokens de styles.css */

/* trilha de fases dentro do card aberto */
.trilha-fases {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 4px 0 22px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.trilha-fases .etapa {
  flex: 1;
  min-width: 84px;
  text-align: center;
  position: relative;
}
.trilha-fases .etapa::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}
.trilha-fases .etapa:last-child::after { display: none; }
.trilha-fases .etapa .bola {
  position: relative;
  z-index: 1;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: var(--surface-2);
  border: 2px solid var(--border);
}
.trilha-fases .etapa .rot {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.35;
  display: block;
  padding: 0 4px;
}
.trilha-fases .etapa.passou .bola { background: var(--green); border-color: var(--green); }
.trilha-fases .etapa.passou::after { background: var(--green); }
.trilha-fases .etapa.passou .rot { color: var(--text-muted); }
.trilha-fases .etapa.atual .bola { background: var(--brand); border-color: var(--brand); }
.trilha-fases .etapa.atual .rot { color: var(--brand); font-weight: 600; }

/* fila de tarefas */
.tarefa-linha {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}
.tarefa-linha:last-child { border-bottom: none; }
.tarefa-linha .tit { font-size: 13.8px; font-weight: 500; line-height: 1.45; }
.tarefa-linha .desc { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.tarefa-linha .prazo { margin-top: 7px; }

/* documentos para assinatura */
.doc-linha {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 15px 17px;
  margin-bottom: 11px;
  background: var(--surface-2);
}
.doc-linha .cabeca {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 11px;
  flex-wrap: wrap;
}
.doc-linha .tit { font-size: 14px; font-weight: 600; }
.doc-linha .signatarios {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.doc-linha .sig {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 11px;
}
.doc-linha .sig.ok { color: var(--green); border-color: var(--green); }
.doc-linha .acoes-doc { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }

/* link estilizado como botão (certificado abre em nova aba) */
.botao-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
}
.botao-link:hover { background: var(--surface); color: var(--text); border-color: var(--text-faint); }

/* ---- Painel do card: negociação, conversa e assistente ---------------- */
.card-abas { display: flex; gap: 4px; margin: 16px 0 14px; border-bottom: 1px solid var(--border); }
.aba {
  background: none; border: none; cursor: pointer; padding: 9px 14px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.aba:hover { color: var(--text); }
.aba.ativa { color: var(--brand); border-bottom-color: var(--brand); }
.aba-corpo.escondida, .escondida { display: none !important; }

.linha-score { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.farol-inline { width: 30px; height: 30px; font-size: 12px; }
#cd-score-txt { font-size: 12px; line-height: 1.5; }

/* conversa */
.aviso-canal {
  background: var(--orange-bg); border: 1px solid var(--orange);
  border-radius: var(--r); padding: 9px 12px; font-size: 12px;
  color: var(--text); margin-bottom: 10px; line-height: 1.6;
}
.conversa-lista {
  max-height: 300px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 9px; padding: 4px 2px 10px;
}
.msg { max-width: 82%; padding: 8px 11px; border-radius: var(--r); font-size: 12.5px; }
.msg.entrada { align-self: flex-start; background: var(--surface-3); }
.msg.saida { align-self: flex-end; background: var(--brand-soft); border: 1px solid var(--brand); }
.msg.falhou { border-color: var(--red); background: var(--red-bg); }
.msg-topo {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 10.5px; color: var(--text-faint); margin-bottom: 4px;
}
.msg-assunto { font-weight: 700; margin-bottom: 3px; }
.msg-corpo { white-space: pre-wrap; line-height: 1.5; word-break: break-word; }
.msg-erro { font-size: 11px; color: var(--red); margin-top: 5px; }

.canal-botoes { display: flex; gap: 5px; margin-bottom: 8px; }
.canal {
  background: var(--surface-3); border: 1px solid transparent; cursor: pointer;
  padding: 5px 11px; border-radius: var(--r); font-size: 12px; color: var(--text-muted);
}
.canal.ativo { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* assistente */
.sugestoes-ia { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sugestao-ia {
  background: var(--surface-3); border: 1px solid var(--border); cursor: pointer;
  padding: 6px 11px; border-radius: 14px; font-size: 12px; color: var(--text-muted);
  text-align: left;
}
.sugestao-ia:hover { border-color: var(--brand); color: var(--text); }
.ia-resposta {
  background: var(--surface-2); border-left: 3px solid var(--brand);
  border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px;
}
.ia-texto { font-size: 13px; line-height: 1.65; }
.ia-origem { font-size: 10.5px; color: var(--text-faint); margin-top: 8px; }

/* ---- Proposta comercial dentro do card -------------------------------- */
.prop-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}
.prop-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border-soft);
}
.prop-item:last-child { border-bottom: none; }
.prop-info { min-width: 0; flex: 1; }
.prop-nome { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prop-versao {
  font-size: 10px; background: var(--surface-3); color: var(--text-muted);
  padding: 2px 6px; border-radius: 4px; font-weight: 700;
}
.prop-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.prop-acoes { display: flex; gap: 6px; flex-shrink: 0; }

.prop-link {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--brand-soft); border: 1px solid var(--brand);
  border-radius: var(--r); padding: 10px 13px; margin-bottom: 16px; font-size: 12px;
}
.prop-link code {
  flex: 1; min-width: 200px; background: var(--surface-3);
  padding: 4px 8px; border-radius: 5px; font-size: 11.5px; word-break: break-all;
}

.prop-secoes { display: flex; flex-direction: column; gap: 16px; max-height: 440px; overflow-y: auto; padding-right: 4px; }
.prop-secao-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 5px; font-size: 13px;
}
.prop-secao textarea {
  width: 100%; resize: vertical; line-height: 1.65; font-size: 13px;
  font-family: inherit;
}

/* ---- Programa dentro do editor de proposta ---------------------------- */
.prop-bloco {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r); padding: 14px 16px; margin: 4px 0 14px;
}
.prop-bloco-tit {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--brand); margin-bottom: 8px;
}

.prop-programa {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 16px;
}
.prog-numeros { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: var(--text-muted); }
.prog-numeros b { color: var(--brand); font-size: 15px; }
.prog-bloco { margin-top: 14px; }
.prog-bloco > b { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 7px; }
.prog-comps { display: flex; flex-wrap: wrap; gap: 6px; }
.prog-comps span {
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand);
  padding: 3px 10px; border-radius: var(--r); font-size: 11.5px; font-weight: 600;
}
.prog-mods { display: flex; flex-direction: column; gap: 9px; }
.prog-mod { display: flex; gap: 10px; align-items: flex-start; }
.prog-mod-n {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px; background: var(--brand);
  color: var(--brand-contraste); font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.prog-mod-t { font-size: 13px; font-weight: 600; }
.prog-mod-h { font-size: 11px; color: var(--text-faint); font-weight: 500; }
.prog-mod-tops { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.6; }

/* ======================================================================
   FUNIL — quadro e card
   Classes próprias (funil-*) de propósito: as antigas eram compartilhadas
   com o módulo Marketing, que força 2 colunas abaixo de 1200px e desenha
   uma barra lateral própria. Era daí que vinha o quadro cortado.
   ====================================================================== */

/* O quadro rola na horizontal em vez de espremer as fases. É como todo
   CRM sério resolve: coluna com largura fixa e legível, o resto rola. */
.funil-quadro {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 14px;
  cursor: grab;
}
.funil-quadro::-webkit-scrollbar { height: 9px; }
.funil-quadro::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 5px; }
.funil-quadro::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 5px; }
.funil-quadro::-webkit-scrollbar-thumb:hover { background: var(--border); }

.funil-col {
  flex: 0 0 262px;
  width: 262px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 250px);
}

.funil-col-topo {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.funil-col-nome { font-size: 13px; font-weight: 700; letter-spacing: -.2px; }
.funil-col-meta {
  display: flex; align-items: baseline; gap: 8px; margin-top: 3px;
  font-size: 11.5px; color: var(--text-faint);
}
/* O total da fase em dinheiro: é o número que a gestão procura ao abrir. */
.funil-col-valor { color: var(--text); font-weight: 700; }

.funil-col-corpo {
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  min-height: 70px;
}
.funil-vazio { color: var(--text-faint); font-size: 12px; text-align: center; padding: 16px 0; }

/* ---- o card ---------------------------------------------------------
   Três linhas que não se sobrepõem:
   1) farol + empresa + pontinho da tarefa
   2) contato
   3) valor + idade                                                     */
.funil-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r);
  padding: 10px 11px;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.funil-card:hover { border-color: var(--brand); transform: translateY(-1px); }

.card-linha1 { display: flex; align-items: center; gap: 8px; }

/* Farol da qualificação: a cor dá o estado de longe, o número dá a
   precisão de perto. */
.farol {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: -.3px;
}
.farol-verde .farol { background: var(--green); color: var(--bg); }
.farol-amarelo .farol { background: var(--orange); color: var(--bg); }
.farol-vermelho .farol { background: var(--red); color: var(--bg); }
.farol-sem .farol { background: var(--surface-3); color: var(--text-faint); }

.funil-card.farol-verde { border-left-color: var(--green); }
.funil-card.farol-amarelo { border-left-color: var(--orange); }
.funil-card.farol-vermelho { border-left-color: var(--red); }
.funil-card.farol-sem { border-left-color: var(--border); }

.funil-card .titulo {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Pontinho da tarefa: vermelho atrasada, laranja vence hoje, verde programada */
.ponto-tarefa {
  flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.ponto-tarefa.sem { background: transparent; border: 1.5px dashed var(--text-faint); box-shadow: none; }

.card-contato {
  font-size: 11.5px; color: var(--text-muted); margin: 5px 0 0 34px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O produto fica discreto: serve para bater o olho e conferir o filtro,
   não para competir com o nome da empresa. */
.card-produto {
  display: inline-block; margin: 5px 0 0 34px;
  font-size: 10.5px; letter-spacing: .3px;
  color: var(--text-muted); background: var(--surface-3);
  padding: 2px 7px; border-radius: 999px;
  max-width: calc(100% - 34px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-linha2 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin: 6px 0 0 34px;
}
.card-valor { font-size: 13px; font-weight: 700; color: var(--text); }
.card-sem-valor { font-size: 11.5px; color: var(--text-faint); font-style: italic; }
.card-idade { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }

/* Telas estreitas: coluna um pouco menor, mas ainda legível e rolável. */
@media (max-width: 760px) {
  .funil-col { flex-basis: 232px; width: 232px; max-height: none; }
}

/* Cadeia proposta -> contrato -> projeto */
.prop-cadeia { margin: 0 0 14px; padding-left: 20px; font-size: 13px; line-height: 1.9; color: var(--text-muted); }
.prop-cadeia b { color: var(--text); }
.prop-fechada {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--green); background: var(--green-bg);
  padding: 3px 9px; border-radius: 5px; font-weight: 700; white-space: nowrap;
}


/* ---- correções de 26/08: dono do card, arrastar e período ---- */

/* Sigla de quem é o card. Duas letras cabem no quadro; o nome não. */
.card-dono {
  margin-left: auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: var(--brand-contraste);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  flex-shrink: 0;
}
.card-dono.sem { background: var(--surface-3); color: var(--text-faint); }

.funil-card { cursor: pointer; }
.funil-card.arrastando { opacity: .35; }

.funil-col-corpo.sobre {
  background: var(--brand-soft);
  outline: 1px dashed var(--brand);
  outline-offset: -4px;
}

/* Arrastar o fundo do quadro rola na horizontal. */
.funil-quadro.puxando { cursor: grabbing; user-select: none; }
.funil-quadro.puxando .funil-card { pointer-events: none; }

.filtro-sep {
  width: 1px; height: 20px; background: var(--border);
  margin: 0 4px; display: inline-block; flex-shrink: 0;
}


/* ---- passagem de bastao: card que chegou e espera ciencia ---- */
.funil-card.chegou-agora {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 2px 10px var(--brand-soft);
  order: -1;  /* sobe para o topo da coluna */
}
.card-chegou {
  background: var(--brand); color: var(--brand-contraste);
  font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r); margin-bottom: 8px; display: inline-block;
}
.funil-col-corpo { display: flex; flex-direction: column; }
.aviso-canal.aviso-chegou { border-color: var(--brand); background: var(--brand-soft); }


/* ---- qualificacao: as duas notas com a conta aberta ---- */
.qz-leitura { border-radius: var(--r); padding: 13px 15px; margin: 2px 0 16px; border: 1px solid var(--border); }
.qz-leitura.verde { background: var(--green-bg); border-color: var(--green); }
.qz-leitura.amarelo { background: var(--orange-bg); border-color: var(--orange); }
.qz-leitura.vermelho { background: var(--red-bg); border-color: var(--red); }
.qz-leitura.cinza { background: var(--surface-2); }
.qz-leitura .t { font-size: 14px; font-weight: 700; }
.qz-leitura .d { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.6; }

.qz-notas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.qz-nota { background: var(--surface-2); border-radius: var(--r); padding: 12px 14px; }
.qz-nota-topo { display: flex; justify-content: space-between; align-items: baseline;
                font-size: 12.5px; color: var(--text-muted); }
.qz-nota-topo b { font-size: 22px; letter-spacing: -.5px; }
.qz-barra { height: 5px; background: var(--surface-3); border-radius: 3px; margin: 8px 0 6px; overflow: hidden; }
.qz-barra i { display: block; height: 100%; border-radius: 3px; }
.qz-nota-sub { font-size: 11.5px; color: var(--text-faint); }

.qz-item { display: flex; align-items: center; gap: 14px; padding: 9px 2px;
           border-bottom: 1px solid var(--border-soft); }
.qz-item:last-child { border-bottom: none; }
.qz-item-txt { flex: 1; min-width: 0; }
.qz-rotulo { font-size: 13.5px; }
.qz-ajuda { font-size: 12px; color: var(--text-faint); margin-top: 2px; line-height: 1.5; }
.qz-item-resp { flex-shrink: 0; width: 230px; }
.qz-item-resp select { width: 100%; }
.qz-item.qz-vazio .qz-rotulo { color: var(--text-muted); }
.qz-item.qz-vazio { border-left: 2px solid var(--orange); padding-left: 8px; }

@media (max-width: 700px) {
  .qz-notas { grid-template-columns: 1fr; }
  .qz-item { flex-direction: column; align-items: stretch; }
  .qz-item-resp { width: 100%; }
}


/* ---- importacao de lista: conferir antes de gravar ---- */
.im-resumo { display: flex; gap: 10px; margin: 14px 0 4px; }
.im-bloco {
  flex: 1; background: var(--surface-2); border-radius: var(--r);
  padding: 11px 12px; text-align: center;
}
.im-bloco b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.im-bloco span { font-size: 11.5px; color: var(--text-muted); }
.im-bloco.ok b { color: var(--green); }
.im-bloco.ruim b { color: var(--red); }

.im-lista {
  max-height: 190px; overflow-y: auto; font-size: 12.5px;
  background: var(--surface-2); border-radius: var(--r); padding: 10px 12px;
  line-height: 1.9;
}
.im-lista.im-recusadas { background: var(--red-bg); margin-bottom: 10px; }


/* ---- a tarefa vigente, dentro do card ----
   A regra dura do sistema e que nenhum card existe sem tarefa. Se a tarefa
   nao aparece onde a pessoa trabalha, a regra vira burocracia invisivel. */
.cd-tarefa {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border-left: 3px solid var(--green);
  border-radius: var(--r); padding: 12px 15px; margin-bottom: 16px;
}
.cd-tarefa.atrasada { border-left-color: var(--red); background: var(--red-bg); }
.cd-tarefa.hoje { border-left-color: var(--brand); background: var(--brand-soft); }
.cd-tarefa.sem { border-left-color: var(--text-faint); }
.cd-tarefa-txt { flex: 1; min-width: 0; }
.cd-tarefa-tit { font-size: 14px; font-weight: 600; }
.cd-tarefa-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }


/* ---- briefing ditado ---- */
.au-caixa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface-2); border-radius: var(--r); padding: 11px 13px; margin-bottom: 10px;
}
.au-btn {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r); padding: 9px 15px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
}
.au-btn:hover { border-color: var(--brand); }
.au-btn:disabled { opacity: .6; cursor: default; }
.au-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.au-btn.gravando { border-color: var(--red); background: var(--red-bg); }
.au-btn.gravando .au-ponto { animation: au-pulsa 1s infinite; }
@keyframes au-pulsa { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.au-tempo {
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
/* Passou de um minuto: o tempo fica verde e a pessoa sabe que ja pode parar. */
.au-tempo.ok { color: var(--green); }
.au-dica { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 200px; line-height: 1.5; }
.au-dica.erro { color: var(--red); }
.au-dica.ok { color: var(--green); }

/* ================================================================
   O card em tela quase cheia
   ================================================================
   Trabalhar uma negociação numa faixa de 560px obriga a rolar para ver o
   que já foi combinado — e o que não se vê não se usa. O card passa a
   ocupar quase tudo, deixando de fora só a borda que dá a sensação de
   estar sobre o funil, e não no lugar dele. */
.overlay-card { padding: 2vh 2vw; align-items: stretch; }

.modal-card {
  width: 96vw;
  max-width: 1500px;
  height: 96vh;
  max-height: none;
  margin: auto;
  display: flex;
  flex-direction: column;
}
/* O cabeçalho, a trilha de fases e as abas ficam parados; só o corpo
   rola. Perder de vista em que fase o card está enquanto se rola a
   qualificação é o tipo de coisa que faz a pessoa fechar e reabrir. */
.modal-card .modal-head,
.modal-card .trilha-fases,
.modal-card .card-abas { flex: 0 0 auto; }
.modal-card .aba-corpo { overflow-y: auto; flex: 1 1 auto; padding-right: 4px; }
.modal-card > .actions:last-child { flex: 0 0 auto; padding-top: 12px; border-top: 1px solid var(--border); }

/* Com espaço sobrando, perfil e prontidão cabem lado a lado. */
.qz-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .qz-colunas { grid-template-columns: 1fr; gap: 0; } }

/* ================================================================
   Atividades
   ================================================================ */
.at-nova {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 6px;
}
.at-nova-linha { display: flex; gap: 12px; align-items: flex-end; }
.at-nova-linha .field { margin-bottom: 10px; }
/* Data e hora não é sugestão: sem hora a atividade não entra em agenda
   nenhuma e não pode ser cobrada de ninguém. */
.obrig {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.at-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border-soft, var(--border));
}
.at-item:last-child { border-bottom: 0; }
.at-icone {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 14px;
}
.at-txt { flex: 1; min-width: 0; }
.at-tit { font-size: 13.5px; }
.at-sub { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.at-acoes { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }

.at-item.atrasada .at-icone { background: var(--red-bg); color: var(--red); }
.at-item.atrasada .at-sub b { color: var(--red); }
.at-item.feita { opacity: 0.62; }
.at-item.feita .at-icone { background: var(--green-bg); color: var(--green); }
.at-item.feita .at-tit { text-decoration: line-through; }
/* Empurrar uma vez é rotina; empurrar cinco vezes é o cliente dizendo não.
   Por isso a contagem aparece, e aparece em cor de alerta. */
.at-remarcada { color: var(--brand); font-weight: 600; }

/* Interruptor de "exigir WhatsApp desta pessoa", na tela de Integrações. */
.exigir-zap { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.exigir-zap input[disabled] { cursor: not-allowed; opacity: .45; }

/* ================================================================
   Busca, lista e ações em lote (rodada de 22/09/2026)
   ================================================================ */

/* A busca precisa caber na barra de filtros sem empurrar o resto para
   baixo — por isso cresce, mas com teto. */
.busca-funil {
  flex: 1 1 260px;
  max-width: 420px;
  min-width: 180px;
}

/* Barra de seleção. Fica colada no topo da lista porque a pessoa marca
   cinquenta linhas rolando a tela e precisa da ação à mão no fim. */
.lote-barra {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--brand-linha);
  border-radius: var(--r);
  background: var(--brand-soft);
  color: var(--brand-texto);
  font-size: 13px;
}
.lote-botoes { display: flex; gap: 8px; flex-wrap: wrap; }

.tabela-funil td { vertical-align: middle; }
.tabela-funil .ponto-tarefa {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.tabela-funil input[type="checkbox"] { cursor: pointer; }

/* Rodapé de ações do card: o que fecha o negócio de um lado, o que o faz
   andar do outro. Antes tudo dividia a mesma linha e "Excluir" ficava
   escondido entre dois botões de mesmo peso. */
.acoes-card { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.acoes-esq, .acoes-dir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* "Voltar a procurar no futuro", dentro da tela de perda. */
.volta-futuro {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-2);
}
.linha-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.volta-futuro input[type="date"] { width: 100%; }

/* ================================================================
   Indicadores comerciais
   ================================================================ */

/* Uma linha por fase: rótulo, barra proporcional ao que passou por ali,
   taxa de passagem e a foto de agora. A barra é comparativa, não absoluta:
   o que interessa é onde ela encolhe. */
.passagem { display: flex; flex-direction: column; gap: 10px; }
.passagem-linha {
  display: grid;
  grid-template-columns: 180px 1fr 150px 190px;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.passagem-rot { font-weight: 600; }
.passagem-barra {
  position: relative;
  height: 26px;
  border-radius: var(--r);
  background: var(--surface-3);
  overflow: hidden;
}
.passagem-preenche {
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-vivo) 100%);
  border-radius: var(--r);
}
.passagem-num {
  position: absolute;
  top: 0; left: 10px;
  height: 26px;
  display: flex; align-items: center;
  font-size: 12px; font-weight: 700;
  color: var(--sobre-vivo);
}
.passagem-taxa { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Perder mais de 60% numa passagem é onde a venda trava — e isso tem que
   saltar aos olhos sem precisar de legenda. */
.passagem-taxa.baixa { color: var(--red); }
.passagem-agora { font-size: 12px; text-align: right; }

@media (max-width: 900px) {
  .passagem-linha { grid-template-columns: 1fr; gap: 4px; }
  .passagem-agora { text-align: left; }
}

/* Card fechado no quadro — aparece só quando o filtro de situação pede.
   Sem a faixa, ganhas e perdidas viravam cards iguais aos vivos. */
.funil-card.fechado { opacity: .82; }
.card-desfecho {
  margin: -2px -2px 8px;
  padding: 4px 8px;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
}
.card-desfecho.ganho { background: var(--green-bg); color: var(--green); }
.card-desfecho.perdido { background: var(--red-bg); color: var(--red); }

/* ================================================================
   Tags e conversas esperando resposta
   ================================================================ */

/* Tag agrupa card por assunto sem mexer em fase nem em funil. No quadro ela
   aparece pequena: é informação de apoio, não o título do card. */
.tag-bolha {
  display: inline-block;
  margin: 0 4px 3px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.card-tags { margin-top: 6px; }
.linha-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.cd-tags { flex: 1; min-width: 0; }
.tags-escolha { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.tag-op { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 2px; }

/* O aviso de quem está esperando resposta. Cor diferente do aviso de
   ciência: um é "leia antes da reunião", o outro é "o cliente falou e
   ninguém voltou". */
.aviso-canal.aviso-esperando { border-color: var(--red); background: var(--red-bg); }
.aviso-canal.aviso-esperando .ic { color: var(--red); }
td.num.atrasado { color: var(--red); font-weight: 700; }

/* Etapa da Rara: conversa em andamento, ainda não é oportunidade */
.funil-col-rara .funil-col-topo { border-bottom: 2px solid var(--brand); }
.funil-col-dica { font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.card-rara { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-radius: 999px; padding: 1px 8px; margin: 2px 0; }

/* Proposta completa (30/09): blocos da página do cliente no editor. */
.prop-pagina { margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.prop-pagina-tit { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.prop-pagina textarea { width: 100%; }
.prop-ret-resumo { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; margin-top: 4px; padding: 10px 12px; border-radius: 8px; background: var(--brand-soft); }
.pe-etapa { gap: 8px; }
.pe-etapa .field { margin-bottom: 6px; }
.pe-faci { border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px 10px; margin-bottom: 8px; }
.pe-faci .field-row { align-items: center; gap: 6px; }
.pe-faci .field { margin-bottom: 6px; }

/* Modelos e apresentação (30/09): escolha do modelo, leitura do cliente,
   manchete e pontos de cada seção, foto da capa. */
.np-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.np-modelo { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 10px; border-radius: var(--r);
             border: 1.5px solid var(--border-soft); background: var(--surface-2); cursor: pointer; transition: border-color .2s; }
.np-modelo input { position: absolute; opacity: 0; pointer-events: none; }
.np-modelo:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.np-modelo b { font-size: 13px; line-height: 1.3; }
.npm-cores { display: flex; gap: 3px; margin-bottom: 6px; }
.npm-cores i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); }
.npm-cores i:nth-child(1) { background: var(--m1); }
.npm-cores i:nth-child(2) { background: var(--m2); }
.npm-cores i:nth-child(3) { background: var(--m3); }
.npm-marca { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); }
.npm-cat { font-size: 11.5px; color: var(--text-muted); }
.prop-leitura { font-size: 12px; color: var(--brand); font-weight: 600; margin-top: 3px; }
.ps-rot { font-size: 11px; font-weight: 700; color: var(--text-muted); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .6px; }
.ps-manchete { width: 100%; font-weight: 700; }
.pe-capas { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-capa { position: relative; width: 92px; height: 64px; border-radius: 8px; overflow: hidden; border: 2px solid var(--border-soft);
           cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.pe-capa input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.pe-capa:has(input:checked) { border-color: var(--brand); }
.pe-capa img { width: 100%; height: 100%; object-fit: cover; }
.pe-capa-sem, .pe-capa-nova span { font-size: 11px; text-align: center; color: var(--text-muted); padding: 4px; line-height: 1.25; }
.pe-capa-nova { border-style: dashed; }
/* dentro de .field, o label do sistema vira bloco de texto: estes são cartões */
.np-modelos .np-modelo { display: flex; flex-direction: column; gap: 3px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; margin: 0; color: var(--text); }
.np-modelos .np-modelo > span, .np-modelos .np-modelo > b { display: block; }
.np-modelos .npm-cores { display: flex; }
.pe-capas .pe-capa { display: flex; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
.prop-secao .ps-manchete { width: 100%; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px;
                           background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; box-sizing: border-box; }
.np-modelos .np-modelo > .npm-cores { display: flex; }
.np-modelos .npm-cores i { display: block; }
.np-form .field { margin-bottom: 10px; }

/* Chamado 14 (08/10/2026): facilitador com foto na proposta, alteração de
   proposta publicada, duplicar, lixeira e atalho para editar o modelo. */
.fc-opc { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.fc-dica { font-size: 12px; color: var(--text-muted); margin: -2px 0 10px; line-height: 1.5; }
.fc-cadastro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
           border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-weight: 400; text-align: left; }
.fc-chip:hover:not(:disabled) { border-color: var(--brand); }
.fc-chip.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.fc-chip:disabled { opacity: .45; cursor: not-allowed; }
.fc-chip-tx { display: flex; flex-direction: column; line-height: 1.2; }
.fc-chip-tx b { font-size: 12.5px; font-weight: 700; }
.fc-chip-tx small { font-size: 11px; color: var(--text-muted); }
.fc-av, .fc-foto-img { display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
                       border-radius: 50%; background: var(--surface-3); color: var(--brand); font-weight: 800; flex-shrink: 0; }
.fc-av { width: 32px; height: 32px; font-size: 13px; }
.fc-av img, .fc-foto-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-linha { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border-soft); background: var(--surface);
            border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.fc-foto { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; margin: 0; flex-shrink: 0;
           text-transform: none; letter-spacing: 0; font-weight: 400; }
.fc-foto-img { width: 64px; height: 76px; font-size: 24px; border-radius: 10px; }
.fc-foto-tr { font-size: 11px; color: var(--brand); font-weight: 700; }
.fc-campos { flex: 1; min-width: 0; }
.fc-campos .field-row { gap: 6px; }
.fc-campos .field { margin-bottom: 6px; }
.fc-campos textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r);
                      font: inherit; font-size: 13px; background: var(--surface-2); color: var(--text); box-sizing: border-box; }
.fc-bloco button.btn-sec, .prop-lixeira button.btn-sec, .pe-modelo-linha button.btn-sec {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.fc-bloco button.btn-sec:hover, .prop-lixeira button.btn-sec:hover, .pe-modelo-linha button.btn-sec:hover {
  background: var(--surface-2); color: var(--text); border-color: var(--brand); }
.fc-bloco.travado { pointer-events: none; opacity: .75; }
.prop-acoes .danger-ghost, .prop-rodape .danger-ghost, .fc-linha .danger-ghost {
  background: transparent; color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.prop-acoes .danger-ghost:hover, .prop-rodape .danger-ghost:hover, .fc-linha .danger-ghost:hover { background: var(--red-bg); }
.modal button.danger { background: var(--red); border-color: var(--red); color: #fff; }
.np-editar-modelo, .prop-lixeira-bt { background: none; border: 0; padding: 4px 0; margin-top: 6px; color: var(--brand);
  font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pe-modelo-linha { display: flex; gap: 6px; align-items: center; }
.pe-modelo-linha select { flex: 1; min-width: 0; }
.prop-aviso { border: 1px solid var(--brand); background: var(--brand-soft); border-radius: var(--r); padding: 11px 14px;
              margin-bottom: 14px; font-size: 12.5px; line-height: 1.6; }
.prop-aviso.trava { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
                    border-color: var(--border); background: var(--surface-2); }
.prop-alterando { font-size: 11.5px; color: var(--brand); font-weight: 600; margin-top: 3px; }
.prop-acoes { flex-wrap: wrap; justify-content: flex-end; }
.modal .actions.prop-rodape { justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.prop-rodape-lado { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prop-rodape-lado:last-child { justify-content: flex-end; margin-left: auto; }
.prop-lixeira { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 4px; }
.prop-lixeira-bt { color: var(--text-muted); }
@media (max-width: 640px) {
  .prop-item { flex-direction: column; align-items: stretch; }
  .prop-acoes { justify-content: flex-start; }
  .fc-linha { flex-wrap: wrap; }
  .fc-campos { order: 3; flex: 1 1 100%; }
  .fc-tirar { margin-left: auto; }
  .fc-campos .field-row { flex-direction: column; gap: 0; }
  .fc-foto-img { width: 54px; height: 64px; }
}
/* Entrega › Parceiros: foto e mini bio do facilitador (chamado 14). */
.pc-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin-right: 12px; background: var(--surface-3);
         color: var(--brand); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-bio { margin-top: 3px; max-width: 70ch; }
.pc-foto-linha { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.pc-foto { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; margin: 0; flex-shrink: 0; }
.pc-foto-img { width: 78px; height: 92px; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px dashed var(--border);
               display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-muted); }
.pc-foto-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-foto-tr { font-size: 11px; color: var(--brand); font-weight: 700; }
.pc-foto-linha textarea { width: 100%; }

/* ================================================================
   Expansão no modelo do VP (15/10/2026)
   ================================================================ */
/* Separador antes da Automação, como no VP: configuração fica à parte. */
.nav-sep { height: 1px; margin: 10px 12px; background: var(--sidebar-border, var(--border)); }

/* Abas com ícone (Tarefas, Rarus Sign, Rara) */
.casa-abas .hub-aba { display: inline-flex; align-items: center; gap: 7px; }
.casa-abas .hub-aba .ic { opacity: .75; }
.casa-abas .hub-aba.ativa .ic { opacity: 1; }
/* A aba já diz o nome: a tela de dentro não repete o título, mas mantém
   a explicação e os botões dela. */
.casa-interno > .page-head h1,
.casa-interno > div > .page-head h1 { display: none; }
.casa-interno > .page-head h2 { display: none; }
.casa-interno > .page-head { margin-top: 0; }

/* Painel: os números do dia. Neutros; cor só onde pede ação. */
.pn-faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 22px; }
.pn-num {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius, 12px);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.pn-num:hover { border-color: var(--brand); transform: translateY(-1px); }
.pn-num b { font-size: 28px; line-height: 1; font-weight: 700; }
.pn-num span { font-size: 12.5px; color: var(--text-muted); }
.pn-num.verm { border-color: var(--red); background: var(--red-bg); }
.pn-num.verm b { color: var(--red); }
.pn-num.lar { border-color: var(--orange); background: var(--orange-bg); }
.pn-num.lar b { color: var(--orange); }
.pn-indicadores > .page-head h1 { font-size: 19px; }

/* Automação: as três etapas numeradas, como no VP */
.ax-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ax-etapa {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  padding: 18px; border: 1px solid var(--border); border-radius: var(--radius, 12px);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.ax-etapa:hover { border-color: var(--brand); transform: translateY(-1px); }
.ax-topo { display: flex; align-items: center; gap: 10px; width: 100%; }
.ax-n {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 13px;
}
.ax-ic { color: var(--brand); display: inline-flex; }
.ax-tag { margin-left: auto; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.ax-etapa b { font-size: 16px; }
.ax-quando { font-size: 12px; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: .03em; }
.ax-txt { font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* Ligações 3C: campanhas e conexão na mesma tela */
.l3-bloco + .l3-bloco { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.l3-bloco > .page-head h1, .l3-bloco > div > .page-head h1 { font-size: 18px; }

@media (max-width: 640px) {
  .page-acoes { flex-wrap: wrap; }
  .pn-faixa { grid-template-columns: 1fr 1fr; }
  .pn-num b { font-size: 22px; }
}

/* Funil: placar e linha de ação do card, no padrão do VP (funil clean).
   Informação fica neutra; cor cheia só no que pede ação agora:
   vermelho = atrasada, laranja = sem tarefa. */
.fx-placar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 16px; }
.fx-met {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: 13px; line-height: 1.2;
}
button.fx-met { cursor: pointer; }
.fx-met b { color: var(--text); font-weight: 700; }
.fx-met.urgente { background: var(--red); border-color: transparent; color: #fff; animation: fxPulso 2s ease-out infinite; }
.fx-met.urgente.lar { background: var(--orange); animation-name: fxPulsoL; }
.fx-met.urgente b { color: #fff; }
.fx-met.on { box-shadow: 0 0 0 2px var(--text); animation: none; }
.fx-limpar { border: 0; background: transparent; color: var(--text-muted); text-decoration: underline; font: inherit; font-size: 12.5px; cursor: pointer; }
@keyframes fxPulso { 0% { box-shadow: 0 0 0 0 rgba(197,34,31,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(197,34,31,0); } }
@keyframes fxPulsoL { 0% { box-shadow: 0 0 0 0 rgba(232,116,12,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(232,116,12,0); } }
@media (prefers-reduced-motion: reduce) { .fx-met.urgente { animation: none; } }

.card-acao { margin: 6px 0 2px; font-size: 11.5px; }
.chip-acao.sem { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--orange); color: #fff; font-weight: 700; }
.txt-acao { color: var(--text-muted); }
.txt-acao.atrasada { color: var(--red); font-weight: 600; }