/* O que o documento da Olliver pede, na tela: Kanban de producao (secao 9),
   central de atendimento com SLA (5 e 16), onboarding (6) e a ficha completa
   do cliente (2). Usa os mesmos tokens do estilo.css. */

/* ---------------- Kanban ---------------- */
/* As nove colunas cabem todas na largura: grid de colunas iguais, sem rolagem
   lateral. Abaixo de 900px nao cabe mesmo — ai volta a rolar dentro do quadro. */
.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 6px; align-items: start; padding-bottom: 10px;
}
.kanban-coluna {
  min-width: 0; background: rgba(17, 24, 39, .035);
  border-radius: var(--raio-m); padding: 8px 7px; transition: background .12s;
}
@media (max-width: 900px) {
  .kanban { display: flex; overflow-x: auto; gap: 10px; }
  .kanban-coluna { min-width: 200px; max-width: 200px; padding: 10px; }
}
.kanban-coluna.alvo { background: rgba(255, 90, 31, .12); outline: 2px dashed var(--destaque); }
.kanban-topo {
  margin: 0 0 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--apagado); display: flex; justify-content: space-between; gap: 6px;
}
.kanban-topo small { font-weight: 600; opacity: .7; }
.kanban-card {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 8px 9px; margin-bottom: 7px; cursor: pointer; display: grid; gap: 3px;
  overflow-wrap: anywhere;
}
.kanban-card:hover { border-color: var(--linha-forte); }
.kanban-card.arrastando { opacity: .45; }
.kanban-card strong { font-size: .84rem; line-height: 1.28; }
.kanban-card small { color: var(--apagado); font-size: .73rem; line-height: 1.25; }
.kanban-card .falta { color: var(--alerta, #c2410c); }
.kanban-card .selo { justify-self: start; }

/* ---------------- prioridade e SLA ---------------- */
/* Cor por prioridade e por estado de prazo: numa central com dezenas de
   pedidos, ler texto um a um nao escala — a cor e que faz a triagem. */
.selo.prio-urgente { background: rgba(220, 38, 38, .14); color: #b91c1c; }
.selo.prio-alta { background: rgba(255, 122, 26, .16); color: #b45309; }
.selo.prio-normal { background: rgba(17, 24, 39, .07); color: #4b5563; }
.selo.prio-baixa { background: rgba(17, 24, 39, .05); color: #8a8a94; }

.selo.sla-estourou { background: rgba(220, 38, 38, .14); color: #b91c1c; font-weight: 700; }
.selo.sla-perto { background: rgba(234, 179, 8, .2); color: #92700a; }
.selo.sla-ok { background: rgba(22, 163, 74, .12); color: #15803d; }
.selo.sla-no_prazo { background: rgba(22, 163, 74, .12); color: #15803d; }
.selo.sla-sem_sla { background: rgba(17, 24, 39, .05); color: #8a8a94; }

/* ---------------- onboarding ---------------- */
.onb-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-bottom: 1px solid var(--linha); font-size: .93rem;
}
.onb-item:last-child { border-bottom: 0; }
.onb-item input { flex-shrink: 0; }
.onb-item > span:first-of-type { flex: 1; }

/* ---------------- ficha do cliente ---------------- */
/* Duas colunas em tela larga, uma no celular: a ficha tem 25 campos e uma
   coluna so viraria um formulario interminavel. */
.ficha-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ficha-grade label { display: grid; gap: 5px; font-size: .84rem; color: var(--apagado); }
.ficha-grade input { font-size: .93rem; }

/* ---------------- sino de avisos ---------------- */
.icone .contador {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--destaque); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 16px; text-align: center;
}
#sino-avisos { position: relative; }
#sino-avisos.urgente svg { color: var(--alerta, #dc2626); }

/* ---------------- busca global na barra do topo ---------------- */
/* Os resultados vem agrupados por fonte (Clientes, Conteudos, Contratos...).
   Sem o titulo do grupo, uma lista de vinte nomes soltos nao diz de onde
   cada um veio. */
.achados-titulo {
  margin: 8px 6px 2px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--apagado);
  font-weight: 700;
}
.achados-titulo:first-child { margin-top: 2px; }
.achados button small {
  display: block;
  color: var(--apagado);
  font-weight: 400;
  font-size: .78rem;
}
.achados .vazio { padding: 6px 8px; margin: 0; font-size: .85rem; }

/* ---------------- barra de sub-abas dos modulos ---------------- */
/* Fica FORA do #conteudo: a tela troca o miolo e a barra continua no lugar.
   Foi o que permitiu reunir 23 secoes em 12 modulos sem tocar em nenhuma
   das telas que ja existiam. */
/* A lateral e fixa e o conteudo anda por margem — a barra segue o mesmo
   esquema para ficar alinhada com o miolo da pagina. */
.sub-modulo {
  display: flex;
  gap: 4px;
  padding: 14px 40px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--linha);
}
body.com-lateral .sub-modulo {
  margin-left: var(--lateral);
  max-width: calc(1500px + var(--lateral));
}
/* Com a barra no ar, o miolo nao precisa do respiro de cima inteiro. */
body:has(.sub-modulo:not([hidden])) main { padding-top: 18px; }
@media (max-width: 980px) {
  body.com-lateral .sub-modulo { margin-left: 0; }
  .sub-modulo { padding: 12px 20px 0; }
}
.sub-modulo[hidden] { display: none; }
.sub-modulo button {
  background: transparent;
  box-shadow: none;
  color: var(--apagado);
  font-weight: 500;
  font-size: .9rem;
  white-space: nowrap;
  border-radius: var(--raio-p);
  padding: 7px 12px;
}
.sub-modulo button:hover { background: rgba(17, 24, 39, .05); color: var(--texto); box-shadow: none; filter: none; }
.sub-modulo button.ativa { color: var(--destaque); background: rgba(255, 90, 31, .1); }
@media (max-width: 640px) { .sub-modulo { padding: 10px 14px 0; } }

/* ---------------- editor de etapas do funil (secao 3) ---------------- */
.funil-lista { display: grid; gap: 8px; }
.funil-etapa {
  display: grid;
  grid-template-columns: 28px 1fr 170px auto auto auto;
  gap: 8px;
  align-items: center;
}
.funil-ordem {
  width: 24px; height: 24px; border-radius: 50%; background: rgba(17, 24, 39, .07);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--apagado);
}
.funil-etapa button { padding: 6px 9px; }
.funil-etapa button:disabled { opacity: .3; cursor: default; }
@media (max-width: 720px) {
  .funil-etapa { grid-template-columns: 24px 1fr; }
  .funil-etapa select, .funil-etapa button { grid-column: 2; }
}

/* ---------------- checklist de publicacao (secao 44) ---------------- */
/* Fica dentro do cartao de publicar, ao lado dos botoes: e ali que a decisao
   acontece, e um checklist numa aba separada ninguem abre antes de publicar.
   Onze itens em coluna unica viram uma parede — por isso a grade de duas
   colunas quando ha largura. */
.checklist-pub {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--raio-p);
  background: rgba(17, 24, 39, .035); border: 1px solid var(--linha);
}
.checklist-pub.liberado { background: rgba(22, 163, 74, .07); border-color: rgba(22, 163, 74, .3); }
.checklist-topo { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .9rem; }
.checklist-barra {
  flex: 1 1 auto; height: 5px; min-width: 40px; border-radius: 999px;
  background: rgba(17, 24, 39, .1); overflow: hidden;
}
/* Progresso nao e acao. O laranja da marca significa "clique aqui" no resto
   do sistema inteiro; gastar ele numa barrinha de progresso ensina a pessoa a
   ignorar laranja. Trilho neutro, preenchimento em verde de sucesso. */
.checklist-barra > span { display: block; height: 100%; background: var(--apagado); opacity: .55; transition: width .2s; }
.checklist-pub.liberado .checklist-barra > span { background: var(--ok); opacity: 1; }
.checklist-conta { color: var(--apagado); font-size: .8rem; font-variant-numeric: tabular-nums; }

.checklist-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px 14px; }
.checklist-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: .88rem; min-width: 0;
}
.checklist-item .titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sem risco no texto: o item manual marcado continua sendo algo que a pessoa
   precisa poder reler e desmarcar. Riscado, ele parece descartado. */
.checklist-item.feito .titulo { color: var(--apagado); }
.checklist-item small {
  color: var(--apagado); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .04em; border: 1px solid var(--linha); border-radius: 999px;
  padding: 1px 6px; margin-left: auto; flex: 0 0 auto;
}
.checklist-item.automatico { cursor: default; }
.checklist-falta {
  margin: 10px 0 0; font-size: .84rem; color: var(--alerta, #b91c1c); line-height: 1.5;
}

/* -------- engrenagem do funil: abre o editor de etapas na propria tela -------- */
.barra button.engrenagem {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1;
}
.barra button.engrenagem.ativa {
  color: var(--destaque); background: rgba(255, 90, 31, .1);
}
.config-funil { margin-bottom: 16px; }

/* -------- ficha do lead: os dados dele em duas colunas, como um perfil -------- */
dl.ficha {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  margin: 0;
  align-items: baseline;
}
dl.ficha dt { color: var(--apagado); font-size: .84rem; }
dl.ficha dd { margin: 0; font-size: .93rem; }
dl.ficha dd a { color: var(--destaque); text-decoration: none; }
dl.ficha dd a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  dl.ficha { grid-template-columns: 1fr; gap: 2px; }
  dl.ficha dd { margin-bottom: 8px; }
}

/* -------- linha do tempo do lead -------- */
.tempo { display: grid; gap: 2px; }
.tempo-dia {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--apagado); margin: 16px 0 6px;
}
.tempo-dia:first-child { margin-top: 0; }
.tempo-item {
  display: grid; grid-template-columns: 26px 1fr max-content;
  gap: 10px; align-items: start;
  padding: 8px 0; border-bottom: 1px solid var(--linha);
}
.tempo-item:last-child { border-bottom: 0; }
.tempo-icone {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(17, 24, 39, .05); color: var(--apagado);
  display: grid; place-items: center; font-size: .8rem;
}
.tempo-texto { font-size: .93rem; }
.tempo-extra {
  margin-top: 3px; font-size: .87rem; color: var(--apagado);
  border-left: 2px solid var(--linha); padding-left: 8px;
}
.tempo-quando { font-size: .8rem; color: var(--apagado); white-space: nowrap; }
@media (max-width: 560px) {
  .tempo-item { grid-template-columns: 26px 1fr; }
  .tempo-quando { grid-column: 2; }
}

/* ---------------- blocos do painel de Projetos ---------------- */
/* Cada bloco e um painel inteiro empilhado. A faixa do topo existe para
   separar um do outro sem virar aba de novo. */
.bloco { margin-bottom: 16px; }
.bloco-topo {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 0 8px;
  border-bottom: 1px solid var(--linha); margin-bottom: 12px;
}
.bloco-topo { cursor: pointer; }
.bloco-topo h2 { margin: 0; font-size: 1.02rem; }
.bloco-topo .selo { font-variant-numeric: tabular-nums; }
.bloco.fechado .bloco-topo { border-bottom-color: transparent; margin-bottom: 0; opacity: .75; }
.bloco.fechado { margin-bottom: 2px; }
.bloco-topo small { color: var(--apagado); font-size: .82rem; }
.bloco-seta {
  background: none; border: 0; color: var(--apagado); cursor: pointer;
  font-size: .9rem; padding: 0 2px; line-height: 1;
}
.bloco-seta:hover { color: var(--texto, inherit); }
.bloco-corpo > .barra:first-child { margin-top: 0; }

/* ---------------- resumo de Projetos ---------------- */
/* Seis numeros no lugar de seis tabelas: o que a tela tem para dizer antes de
   alguem abrir qualquer bloco. Clicar leva ao bloco correspondente. */
.resumo-projetos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px; margin-bottom: 22px;
}
.resumo-cartao {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-m);
  padding: 10px 12px; font: inherit; color: inherit;
}
.resumo-cartao:hover { border-color: var(--linha-forte); }
.resumo-cartao .numero { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.resumo-cartao .rotulo { font-size: .82rem; font-weight: 600; }
.resumo-cartao .detalhe { font-size: .75rem; color: var(--apagado); }
.resumo-cartao.vazio .numero { color: var(--apagado); font-weight: 600; }
.resumo-cartao.alerta { border-color: var(--alerta, #c2410c); }
.resumo-cartao.alerta .numero { color: var(--alerta, #c2410c); }

/* ---- o grupo do automatico ----
   Colapsado quando esta tudo certo (uma linha, e sai da frente) e aberto
   quando falta algo, porque ai vira informacao de verdade. */
.checklist-auto { margin: 0 0 10px; font-size: .85rem; }
.checklist-auto > summary {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  color: var(--apagado); list-style: none; padding: 4px 0;
}
.checklist-auto > summary::-webkit-details-marker { display: none; }
.checklist-auto .marca {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem;
  background: rgba(18, 160, 110, .14); color: var(--ok);
}
.checklist-auto[open] > summary { color: var(--texto); }
.checklist-auto-lista { margin: 6px 0 0; padding: 0 0 0 26px; list-style: none; }
.checklist-auto-lista li { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--apagado); }
.checklist-auto-lista li.falta { color: var(--alerta); }
.checklist-auto-lista .marca { background: none; width: auto; flex: 0 0 auto; }
.checklist-auto-lista li.ok .marca { color: var(--ok); }
.checklist-item .opcional { margin-left: 4px; }