/* ============================================================================
   CENTRAL DE AJUDA — layout B

   A fila à esquerda, a conversa à direita. É a mesma forma da Pendência, e de
   propósito: um chamado e uma pendência são a mesma coisa vista de dois lados
   — um assunto com número, uma conversa em ordem, anexos e um fim. Quem
   aprendeu a responder uma não reaprende a outra.
   ========================================================================= */

.ajd-grade {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--e4);
  align-items: start;
}
/* CADA UM COM COLUNA E LINHA EXPLÍCITAS.
   A primeira versão dizia só `grid-row: 1 / 3` na conversa e deixava o resto
   para a colocação automática — e o resultado foi a conversa na coluna
   ESTREITA e a fila na larga, ao contrário do que o HTML diz.
   O motivo é uma regra do CSS Grid que não é óbvia: itens com LINHA definida
   são posicionados ANTES dos automáticos, e não na ordem do documento. A
   conversa, por ter `grid-row`, foi colocada primeiro e pegou a coluna 1; a
   fila, automática, sobrou com a 2.
   Dizer as duas coordenadas tira a adivinhação do meio. */
.ajd-fila     { grid-column: 1; grid-row: 1; }
.ajd-base     { grid-column: 1; grid-row: 2; }
.ajd-conversa { grid-column: 2; grid-row: 1 / 3; }

@media (max-width: 1000px) {
  /* Empilhado, a ordem é a do HTML: fila, conversa, convite. */
  .ajd-grade { grid-template-columns: 1fr; }
  .ajd-fila, .ajd-base, .ajd-conversa { grid-column: auto; grid-row: auto; }
}

/* --- A fila --------------------------------------------------------------- */
.ajd-fila { padding: 0; overflow: hidden; }

.ajd-abas { display: flex; border-bottom: 1px solid var(--linha); }
.ajd-aba {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 6px;
  border-bottom: 2px solid transparent;
  color: var(--tinta-fraca);
  font-size: var(--txt-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color var(--mov-rapido) ease, border-color var(--mov-rapido) ease,
              background var(--mov-rapido) ease;
}
.ajd-aba:hover { background: var(--papel-sutil); color: var(--tinta-media); }
.ajd-aba.ativo { color: var(--acento); border-bottom-color: var(--acento); }
.ajd-aba b {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--linha);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.ajd-aba.ativo b { background: var(--acento); color: var(--papel); }

.ajd-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 62vh;
  overflow-y: auto;
}

.ajd-item {
  display: grid;
  gap: 3px;
  padding: 11px var(--e3);
  border-bottom: 1px solid var(--linha);
  /* O filete da esquerda nasce transparente e só aparece no selecionado: sem
     ele, trocar de chamado move o texto 3px para o lado. */
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background var(--mov-rapido) ease, border-color var(--mov-rapido) ease;
}
.ajd-item:hover { background: var(--papel-sutil); }
.ajd-item.ativo { background: var(--acento-fundo); border-left-color: var(--acento); }

.ajd-item-topo { display: flex; align-items: center; gap: 6px; }
.ajd-num {
  font-size: var(--txt-micro);
  font-weight: 800;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.ajd-item.ativo .ajd-num { color: var(--acento); }

.ajd-assunto {
  font-size: var(--txt-mini);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.35;
  /* Duas linhas no máximo: assunto de cinco linhas empurra os outros chamados
     para fora da vista e a fila deixa de ser uma fila. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ajd-meta { font-size: var(--txt-micro); color: var(--tinta-fraca); }

/* O PONTO de "tem resposta nova". Empurrado para a direita porque é o que se
   procura varrendo a coluna com o olho — e o olho varre pela borda. */
.ajd-ponto {
  width: 7px; height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--alerta);
  flex-shrink: 0;
  animation: ajd-pisca 2.4s ease-in-out infinite;
}
@keyframes ajd-pisca {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-alerta), .35); }
  50%      { box-shadow: 0 0 0 4px rgba(var(--rgb-alerta), 0); }
}

/* --- Selos de setor e de status ------------------------------------------- */
.ajd-setor {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--linha);
  color: var(--tinta-media);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.ajd-setor.e-tecnico    { background: var(--acento-fundo); color: var(--acento); }
.ajd-setor.e-financeiro { background: var(--ok-suave, #eef5f0); color: var(--ok, #2f6b46); }
.ajd-setor.e-comercial  { background: var(--atencao-suave); color: var(--atencao); }

.ajd-status { font-weight: 600; }
.ajd-status.e-aberto             { color: var(--acento); }
.ajd-status.e-em_atendimento     { color: var(--ok, #2f6b46); }
.ajd-status.e-analise_interna    { color: var(--atencao); }
.ajd-status.e-aguardando_cliente { color: var(--alerta); }
.ajd-status.e-resolvido          { color: var(--tinta-fraca); }
/* Na cabeça da conversa o status é uma pastilha, não uma palavra solta. */
.ajd-status.e-grande {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--papel-sutil);
  font-size: var(--txt-micro);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.ajd-vazio {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: var(--e5) var(--e3);
  text-align: center;
}
.ajd-vazio > i { font-size: 1.8rem; color: var(--linha-forte); }
.ajd-vazio b { font-size: var(--txt-mini); color: var(--tinta-fraca); font-weight: 500; }

/* --- A conversa ----------------------------------------------------------- */
.ajd-conversa { display: flex; flex-direction: column; padding: 0; min-height: 420px; }

.ajd-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4);
  border-bottom: 1px solid var(--linha);
}
.ajd-cabeca-txt { display: grid; gap: 3px; min-width: 0; }
.ajd-cabeca-num {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--txt-micro);
  font-weight: 800;
  color: var(--tinta-fraca);
}
.ajd-cabeca h2 { font-size: var(--txt-medio); font-weight: 700; color: var(--tinta); line-height: 1.3; }
.ajd-cabeca-meta { font-size: var(--txt-micro); color: var(--tinta-fraca); }

.ajd-mensagens {
  flex: 1;
  display: grid;
  gap: var(--e3);
  align-content: start;
  padding: var(--e4);
  max-height: 48vh;
  overflow-y: auto;
}

.ajd-msg {
  max-width: 82%;
  padding: 10px var(--e3);
  border-radius: var(--raio);
  animation: ajd-entra .3s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ajd-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* QUEM FALOU SE LÊ PELO LADO, antes de ler o nome. É o que faz uma conversa
   de dez mensagens ser percorrida sem parar para conferir cada autor. */
.ajd-msg.e-cliente { justify-self: end; background: var(--acento-fundo); }
.ajd-msg.e-staff   { justify-self: start; background: var(--papel-sutil); }

.ajd-msg-quem { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.ajd-msg-quem b { font-size: var(--txt-micro); font-weight: 700; color: var(--tinta); }
.ajd-msg-quem > span:last-child { font-size: 10px; color: var(--tinta-fraca); }
.ajd-rosto {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--papel);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.ajd-msg.e-staff .ajd-rosto { background: var(--tinta-media); }
.ajd-msg-txt { font-size: var(--txt-mini); color: var(--tinta-media); line-height: 1.6; }

.ajd-anexos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
/* Anexo removido pela retenção: <span>, não <a>. Precisa parecer inerte —
   clicar e não acontecer nada é pior que ver logo que não dá para clicar.
   Ver a nota equivalente em tarefas/static/tarefas/css/style.css. */
.ajd-anexo--expirado { opacity: .62; cursor: default; font-style: italic; }

.ajd-anexo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta-media);
  font-size: var(--txt-micro);
  text-decoration: none;
  transition: border-color var(--mov-rapido) ease, color var(--mov-rapido) ease;
}
.ajd-anexo:hover { border-color: var(--acento); color: var(--acento); }

/* --- Responder ------------------------------------------------------------ */
.ajd-responder { padding: var(--e3) var(--e4) var(--e4); border-top: 1px solid var(--linha); }
.ajd-caixa {
  width: 100%;
  padding: 10px var(--e3);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-mini);
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--txt-mini);
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color var(--mov-rapido) ease, box-shadow var(--mov-rapido) ease;
}
.ajd-caixa:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}

.ajd-responder-pe { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ajd-espaco { flex: 1; }
.ajd-anexar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--raio-mini);
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: color var(--mov-rapido) ease, background var(--mov-rapido) ease;
}
.ajd-anexar:hover { color: var(--acento); background: var(--acento-fundo); }
.ajd-anexos-nomes { font-size: var(--txt-micro); color: var(--tinta-fraca); }

/* --- Resolvido e avaliação ------------------------------------------------ */
.ajd-fechado {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--linha);
  background: var(--ok-suave, #eef5f0);
}
.ajd-fechado > div { flex: 1; display: grid; gap: 2px; min-width: 200px; }
.ajd-fechado b { font-size: var(--txt-mini); color: var(--ok, #2f6b46); }
.ajd-fechado span { font-size: var(--txt-micro); color: var(--tinta-media); }

.ajd-avaliar {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: var(--e4);
  border-top: 1px solid var(--linha);
}
.ajd-avaliar > b { font-size: var(--txt-mini); color: var(--tinta); }
.ajd-avaliar .frm-entrada { width: min(340px, 100%); }

.ajd-estrelas { display: flex; gap: 4px; }
.ajd-estrelas button {
  border: 0;
  background: none;
  color: var(--linha-forte);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
  transition: color var(--mov-rapido) ease;
}
.ajd-estrelas button.aceso { color: var(--atencao-marca, #d1830f); }

.ajd-avaliado {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--linha);
  font-size: var(--txt-micro);
  color: var(--tinta-fraca);
}
.ajd-avaliado i { color: var(--atencao-marca, #d1830f); }

/* --- Sem nenhum chamado --------------------------------------------------- */
.ajd-nada {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: var(--e7) var(--e5);
  text-align: center;
  margin: auto;
  max-width: 420px;
}
.ajd-nada > i { font-size: 2.6rem; color: var(--acento); }
.ajd-nada b { font-size: var(--txt-medio); color: var(--tinta); }
.ajd-nada p { font-size: var(--txt-mini); color: var(--tinta-fraca); line-height: 1.6; }

/* --- O convite para os artigos -------------------------------------------- */
/* ANTES do formulário de abrir chamado, e não dentro dele como na tela antiga
   — ali o convite chega depois que a pessoa já decidiu abrir, e ninguém volta
   atrás. */
.ajd-base {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--acento-linha, #e0d8f0);
  border-radius: var(--raio);
  background: var(--acento-fundo);
  color: var(--tinta);
  text-decoration: none;
  transition: transform var(--mov-rapido) ease, box-shadow var(--mov-rapido) ease;
}
.ajd-base:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--rgb-sombra), .07); }
.ajd-base > i:first-child { font-size: 1.3rem; color: var(--acento); }
.ajd-base span { flex: 1; display: grid; gap: 1px; font-size: var(--txt-micro); color: var(--tinta-fraca); }
.ajd-base span b { font-size: var(--txt-mini); color: var(--acento); }
.ajd-base > i:last-child { color: var(--acento); font-size: 12px; }

/* --- O diálogo de abrir chamado ------------------------------------------- */
.ajd-dlg { width: min(560px, calc(100vw - 32px)); }
.ajd-dlg-corpo { display: grid; gap: var(--e3); padding: var(--e4); }
.ajd-textarea { resize: vertical; line-height: 1.55; }

.ajd-setores { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.ajd-setor-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-medio, 10px);
  background: var(--papel);
  color: var(--tinta-media);
  font-family: inherit;
  font-size: var(--txt-micro);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--mov-rapido) ease, background var(--mov-rapido) ease,
              color var(--mov-rapido) ease;
}
.ajd-setor-btn:hover { border-color: var(--acento); }
.ajd-setor-btn.ativo { border-color: var(--acento); background: var(--acento-fundo); color: var(--acento); }

/* O ASSUNTO TRAVADO. O cadeado não é enfeite: sem ele, um campo que não aceita
   digitação parece defeito. */
.ajd-travado {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--acento-linha, #e0d8f0);
  border-radius: var(--raio-medio, 10px);
  background: var(--acento-fundo);
}
.ajd-travado > i { color: var(--acento); font-size: 1.05rem; margin-top: 1px; }
.ajd-travado > div { display: grid; gap: 3px; }
.ajd-travado b { font-size: var(--txt-mini); color: var(--tinta); }
.ajd-travado span { font-size: var(--txt-micro); color: var(--tinta-media); line-height: 1.5; }

.ajd-dlg-anexo { display: grid; gap: 5px; }
.ajd-anexar-largo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px var(--e3);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-medio, 10px);
  color: var(--tinta-fraca);
  font-size: var(--txt-mini);
  cursor: pointer;
  transition: border-color var(--mov-rapido) ease, background var(--mov-rapido) ease,
              color var(--mov-rapido) ease;
}
.ajd-anexar-largo:hover { border-color: var(--acento); background: var(--acento-fundo); color: var(--acento); }

.ajd-prazo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: var(--raio-mini);
  background: var(--papel-sutil);
  font-size: var(--txt-micro);
  color: var(--tinta-fraca);
}

@media (prefers-reduced-motion: reduce) {
  .ajd-ponto, .ajd-msg { animation: none; }
  .ajd-item, .ajd-aba, .ajd-base, .ajd-anexo, .ajd-setor-btn { transition: none; }
}

/* --- Movimento que mora no CSS -------------------------------------------
   O que responde a HOVER e FOCO fica aqui, e nao no modulo de motion: sao
   estados do elemento, e o navegador ja sabe interpola-los sozinho. Reservar o
   JavaScript para o que tem coreografia (entrada escalonada, troca de tela)
   evita um ouvinte por linha da lista. */

/* A linha da fila desliza um pouco e ganha profundidade. */
.ajd-item { will-change: transform; }
.ajd-item:hover { transform: translateX(3px); }
.ajd-item.ativo:hover { transform: none; }

/* A ABA MUDA POR BAIXO. O filete cresce do centro para as pontas em vez de
   aparecer inteiro: e o que liga visualmente a aba antiga a nova. */
.ajd-aba { position: relative; }
.ajd-aba::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: -1px;
  height: 2px;
  background: var(--acento);
  transition: left var(--mov-base) var(--mov-curva), right var(--mov-base) var(--mov-curva);
}
.ajd-aba.ativo::after { left: 0; right: 0; }
/* O filete do `border-bottom` sai: eram dois riscos no mesmo lugar. */
.ajd-aba.ativo { border-bottom-color: transparent; }

/* O balao cresce um triz ao passar o mouse -- o suficiente para dizer "isto e
   uma unidade", que e o que separa duas mensagens seguidas da mesma pessoa. */
.ajd-msg { transition: transform var(--mov-rapido) ease, box-shadow var(--mov-rapido) ease; }
.ajd-msg:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(var(--rgb-sombra), .06); }

/* O clipe do anexo gira ao receber o cursor. Enfeite? Nao: e o unico botao do
   rodape sem rotulo, e o movimento e o que diz que ele responde. */
.ajd-anexar > i { transition: transform var(--mov-base) var(--mov-curva); }
.ajd-anexar:hover > i { transform: rotate(-18deg) scale(1.1); }

/* A estrela cresce sob o cursor, antes de ser escolhida. */
.ajd-estrelas button { transition: color var(--mov-rapido) ease, transform var(--mov-rapido) var(--mov-curva); }
.ajd-estrelas button:hover { transform: scale(1.18); }

/* O botao de setor no dialogo. */
.ajd-setor-btn:hover { transform: translateY(-1px); }
.ajd-setor-btn { will-change: transform; }

/* O bloco de resolvido entra deslizando: ele NASCE quando o chamado fecha, e
   sem movimento parece que sempre esteve ali. */
.ajd-fechado { animation: ajd-desce .38s cubic-bezier(.22, 1, .36, 1); }
.ajd-avaliar { animation: ajd-desce .42s cubic-bezier(.22, 1, .36, 1) .1s both; }
@keyframes ajd-desce {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ajd-item:hover, .ajd-msg:hover, .ajd-setor-btn:hover,
  .ajd-estrelas button:hover, .ajd-anexar:hover > i { transform: none; }
  .ajd-aba::after { transition: none; }
  .ajd-fechado, .ajd-avaliar { animation: none; }
}

/* ============================================================================
   BASE DE CONHECIMENTO E ARTIGO — layout B  (`.kb-*`)

   Duas telas de LEITURA, e por isso separadas das `.ajd-*` acima, que são de
   conversa. O que as une é o assunto; o que as separa é o gesto: lá se
   escreve e se espera resposta, aqui se procura e se lê.

   A coluna do texto tem largura em `ch`, não em pixels. O que cansa a vista é
   a quantidade de CARACTERES por linha (~70), e ela não muda quando o monitor
   muda — medir em pixels faz a linha crescer junto com a tela e o olho se
   perder na volta.
   ========================================================================= */

.kb-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--e4);
  align-items: start;
}
/* A LARGURA DA LEITURA É MEDIDA, NÃO CHUTADA — mas medida junto com a LETRA,
   que é a parte que eu tinha errado antes.
   `ch` não serve aqui: numa grade ele resolve contra a letra da GRADE (16px),
   não contra a do texto, e a primeira versão saiu com 112 caracteres por
   linha por causa disso. Trocado por pixel medido.
   720px de cartão, menos 2×32 de respiro, com a letra de 15px dão ~88
   caracteres por linha. É mais largo do que o ideal de livro (65–75), e de
   propósito: documentação de produto se VARRE atrás de um trecho antes de ser
   lida em sequência, e coluna estreita demais faz uma seção de três frases
   virar seis linhas curtas — o que parecia post de blog, não manual.
   A grade continua centralizada: em monitor largo sobra branco dos dois
   lados, e esticar até a borda desfaria a conta. */
.kb-grade--leitura {
  grid-template-columns: minmax(0, 720px) 300px;
  justify-content: center;
}

@media (max-width: 1000px) {
  /* Empilhado, a ordem é a do HTML: o texto primeiro, o socorro depois. */
  .kb-grade { grid-template-columns: 1fr; }
  /* A leitura CONTINUA com teto ao empilhar. Soltar para `1fr` devolveria a
     linha de ~115 caracteres numa janela de 1000px, que é justamente o que o
     teto existe para evitar — a coluna lateral sair não é motivo para o texto
     esticar. */
  .kb-grade--leitura { grid-template-columns: minmax(0, 720px); }
}

.kb-principal { display: grid; gap: var(--e4); align-content: start; }
.kb-lado { display: grid; gap: var(--e4); align-content: start; }

/* --- A busca -------------------------------------------------------------- */
/* PRIMEIRO ELEMENTO DA TELA, e largo. Ninguém chega na base de conhecimento
   para navegar por categorias: chega com uma pergunta pronta. */
.kb-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--papel);
  transition: border-color var(--mov-rapido) ease, box-shadow var(--mov-rapido) ease;
}
.kb-busca:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}
.kb-busca > i:first-child { color: var(--tinta-fraca); font-size: 1rem; }
.kb-busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: var(--txt-mini);
  color: var(--tinta);
  padding: 6px 0;
}
/* O X nativo do `type=search` fica ao lado do nosso e faz dois botões de
   limpar na mesma caixa — some o nativo, porque o nosso também zera o
   endereço, e o nativo só apaga o texto. */
.kb-busca input::-webkit-search-cancel-button { display: none; }
.kb-limpar {
  display: inline-flex;
  align-items: center;
  padding: 5px;
  color: var(--tinta-fraca);
  font-size: 12px;
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--mov-rapido) ease, background var(--mov-rapido) ease;
}
.kb-limpar:hover { color: var(--alerta); background: var(--papel-sutil); }

/* --- A caixa da lista ----------------------------------------------------- */
.kb-caixa { padding: 0; overflow: hidden; }
.kb-caixa .b-card-topo { padding: var(--e3) var(--e4); }

.kb-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px var(--e3);
  border-bottom: 1px solid var(--linha);
}
.kb-aba {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--tinta-fraca);
  font-size: var(--txt-micro);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--mov-rapido) ease, background var(--mov-rapido) ease;
}
.kb-aba:hover { background: var(--papel-sutil); color: var(--tinta-media); }
.kb-aba.ativo { background: var(--acento-fundo); color: var(--acento); }
.kb-aba b {
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--papel-sutil);
  color: var(--tinta-fraca);
}
.kb-aba.ativo b { background: var(--acento); color: var(--papel); }

.kb-resultado {
  padding: var(--e3) var(--e4) 0;
  font-size: var(--txt-micro);
  color: var(--tinta-fraca);
}
.kb-resultado b { color: var(--tinta); }

/* --- Um artigo na lista --------------------------------------------------- */
.kb-lista { display: grid; }
.kb-item {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--linha);
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background var(--mov-rapido) ease, border-color var(--mov-rapido) ease;
}
.kb-lista > .kb-item:first-child { border-top: 0; }
.kb-item:hover { background: var(--papel-sutil); border-left-color: var(--acento); }

.kb-item-icone {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--acento-fundo);
  color: var(--acento);
  font-size: 14px;
}
.kb-item-icone.e-popular { background: var(--atencao-suave); color: var(--atencao); }

.kb-item-corpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kb-item-corpo > b { font-size: var(--txt-mini); font-weight: 600; color: var(--tinta); }
.kb-item-resumo {
  font-size: var(--txt-micro);
  color: var(--tinta-media);
  line-height: 1.5;
  /* Duas linhas e corta: o resumo é isca, não conteúdo. Um resumo de cinco
     linhas empurra o terceiro artigo para fora da tela. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-item-meta {
  font-size: 10px;
  color: var(--tinta-fraca);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kb-item-seta { align-self: center; color: var(--linha-forte); font-size: 12px; }
.kb-item:hover .kb-item-seta { color: var(--acento); }

.kb-vazio {
  display: grid; justify-items: center; gap: 7px;
  padding: 32px var(--e4);
  text-align: center;
}
.kb-vazio > i { font-size: 2rem; color: var(--linha-forte); }
.kb-vazio b { font-size: var(--txt-mini); color: var(--tinta); }
.kb-vazio p { font-size: var(--txt-micro); color: var(--tinta-fraca); margin-bottom: 4px; }

/* --- "Não achou?" / "Não resolveu?" --------------------------------------- */
/* O respiro é DAQUI, não do `.b-card`: no laboratório o cartão vem sem
   padding e cada tela dá o seu, porque metade deles é lista de ponta a ponta
   (ali o respiro tem de ser da linha, senão o hover fica com uma faixa morta
   nas laterais). O preço é este: cartão de texto que esquece o padding sai
   com a letra encostada na borda. */
.kb-socorro {
  display: grid; justify-items: start; gap: 7px;
  padding: var(--e4);
  border-color: var(--acento-linha, #e0d8f0);
  background: var(--acento-fundo);
}
.kb-socorro > i { font-size: 1.4rem; color: var(--acento); }
.kb-socorro b { font-size: var(--txt-mini); color: var(--tinta); }
.kb-socorro p { font-size: var(--txt-micro); color: var(--tinta-media); line-height: 1.6; }
.kb-socorro p b { font-size: inherit; }

/* --- O artigo ------------------------------------------------------------- */
/* O `.b-card` do laboratório não tem respiro próprio — cada tela dá o seu, e
   sem isto o texto encostava na borda do cartão. */
.kb-artigo { padding: 32px; }

/* O RESUMO é a linha que responde antes da leitura, então ele é maior que o
   corpo e mais claro — a única inversão de peso da página, e proposital:
   quem chegou pela busca decide aqui se é este o artigo. */
.kb-artigo-resumo {
  font-size: 13px;
  color: var(--tinta-media);
  line-height: 1.65;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--linha);
}

/* O corpo mantém o NOME de classe da produção (`.ajuda-artigo-corpo`) porque
   é o mesmo HTML, escrito pelo mesmo editor do BackOffice. Só os valores
   mudam, para os tokens do laboratório — o `style.css` não é carregado aqui,
   então as duas definições nunca se encontram. */
/* A TIPOGRAFIA DO ARTIGO, e o porquê de ela não sair dos tokens.
 *
 * Os tokens do laboratório são calibrados para rótulo, botão e linha de lista
 * — texto de uma linha, que se VARRE. Aqui a pessoa lê parágrafos, e as três
 * medidas abaixo foram corrigidas depois de a tela ficar pronta e parecer,
 * nas suas palavras, "não enterprise". Medindo, eram três causas somadas:
 *
 * 1. O ESPAÇO ENTRE PARÁGRAFOS ERA MENOR QUE O ESPAÇO ENTRE LINHAS.
 *    Entrelinha 24,3px com margem de parágrafo de 13px: o buraco DENTRO do
 *    parágrafo era maior que o buraco ENTRE dois. O olho perde onde um
 *    assunto acaba, e o texto vira uma mancha só. É o defeito mais grave dos
 *    três e o menos visível de nomear — dá a sensação de "algo errado" sem
 *    que se saiba dizer o quê.
 *
 * 2. A HIERARQUIA VINHA DA COR, NÃO DO TAMANHO. O h2 era 15px contra 13,5px
 *    do corpo — 11% maior — e se distinguia por ser roxo. Título que só é
 *    título porque é colorido parece enfeite; título maior parece estrutura.
 *    Agora ele é 33% maior e escuro, e o roxo sai: cor demais em texto longo
 *    cansa, e a marca já está na página inteira.
 *
 * 3. LETRA PEQUENA COM ENTRELINHA GRANDE (13,5px a 1,8) faz o texto boiar.
 *    A correção NÃO é engordar a letra — foi o que tentei primeiro, e a
 *    página passou de rascunho a cartaz: o corpo do artigo ficou com 15px,
 *    maior que o próprio `h1` da barra do topo, num laboratório que roda
 *    inteiro em 11 e 12px. A letra volta aos 13,5px e quem muda é a
 *    ENTRELINHA, que desce de 1,8 para 1,75.
 *
 * E o corpo passa a ser `--tinta` (quase preto) em vez de `--tinta-media`
 * (cinza). É esta a troca que faz o texto parecer firme sem precisar crescer:
 * cinza sobre branco é a cor de texto SECUNDÁRIO, e usada no texto principal
 * faz a página inteira parecer legenda.
 *
 * A RÉGUA DA PÁGINA INTEIRA, de cima para baixo, e nenhum degrau pode passar
 * o de cima:
 *
 *     19px  título da página, na barra    (`.b-topo h1`, dashboard-b.css)
 *     14px  seção do artigo               (h2)
 *     13px  subseção                      (h3, distinguida também pelo peso)
 *     12px  texto                         (corpo — `--txt-mini`)
 *
 * O CORPO VOLTOU A SAIR DO TOKEN, e é isso que fecha a questão: 12px é a
 * medida do texto normal do laboratório inteiro, a mesma da linha da lista de
 * artigos que fica um clique antes desta tela. Enquanto o artigo tinha número
 * próprio, abrir um artigo era mudar de régua no meio do caminho.
 *
 * Foi assim que os dois defeitos apareceram juntos: com o topo em 15px, um h2
 * de 17 o ULTRAPASSAVA, e a tela dava a impressão de fonte grande quando o
 * que estava errado era a ordem. Mexer só no artigo não resolvia — o teto da
 * escala é do cabeçalho, e é lá que ele subiu.
 *
 * O salto do h2 para o corpo ficou em 1,19, menor do que eu gostaria. O que
 * completa a separação é o RESPIRO: 32px acima de cada seção, contra 16 entre
 * parágrafos. Distância também é hierarquia.
 */
/* Entrelinha 1,6 — apertada de propósito. Com a letra de volta aos 13,5px,
   1,75 ainda deixava o texto boiando; e aqui apertar não cola nada, porque
   quem separa os assuntos é a margem do parágrafo, que NÃO encolheu. O
   resultado é 8px de respiro entre linhas contra 24px entre parágrafos: três
   para um, e o bloco de texto passa a ter contorno. */
.ajuda-artigo-corpo { font-size: var(--txt-mini); color: var(--tinta); line-height: 1.65; }
.ajuda-artigo-corpo h1,
.ajuda-artigo-corpo h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.01em;
  margin: 32px 0 10px;
}
.ajuda-artigo-corpo h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  margin: 24px 0 7px;
}
/* Maior que o espaço entre linhas — ver a causa 1 acima. É o único número
   desta lista que NÃO encolheu junto com a letra, e é o que segura a
   correção: sem ele os parágrafos voltam a se colar. */
.ajuda-artigo-corpo p { margin: 0 0 16px; }
/* O marcador precisa ser declarado: o reset da moldura zera o list-style, e
   sem bolinha um passo a passo vira um bloco de linhas soltas — que é
   justamente o que a pessoa está tentando seguir. */
.ajuda-artigo-corpo ul,
.ajuda-artigo-corpo ol { margin: 0 0 18px; padding-left: 24px; }
.ajuda-artigo-corpo ul, .ajuda-artigo-corpo ul li { list-style: disc outside; }
.ajuda-artigo-corpo ol, .ajuda-artigo-corpo ol li { list-style: decimal outside; }
.ajuda-artigo-corpo li { margin-bottom: 8px; }
.ajuda-artigo-corpo li::marker { color: var(--acento); }
.ajuda-artigo-corpo strong { color: var(--tinta); font-weight: 700; }
.ajuda-artigo-corpo a { color: var(--acento); text-decoration: underline; }

/* --- AS TRÊS MARCAS DE INTERFACE --------------------------------------
   Quando o texto cita algo da tela, ele diz QUE TIPO de coisa é aquilo, e
   diz pela forma, não pela palavra. "Clique em Salvar" e "abra Clientes"
   pedem gestos diferentes: um é botão, o outro é um lugar para onde se vai.
   Antes disto tudo saía em negrito, e o negrito não distingue nada — só
   destaca.

   .ui-b  botão que se aperta      pílula, como o botão de verdade
   .ui-l  link ou item de menu     roxo com filete embaixo
   .ui-c  campo de formulário      caixa cinza, como o campo vazio

   Caminho escreve-se com › entre as marcas, não com seta desenhada:
   Painel de Controle › Obrigações.

   ESTAS CLASSES SÓ EXISTEM PORQUE O EDITOR AS CONHECE. O Quill normaliza o
   HTML para o modelo interno dele e DESCARTA todo `<span class=…>` que não
   corresponda a um formato registrado — medido nesta base: as três marcas
   sumiram só de abrir o artigo no BackOffice, sem erro e sem aviso, e um
   salvamento gravaria o texto já sem elas. Os blots que as sustentam estão
   em `tenancy/templates/tenancy/staff_editar_artigo.html`. Mexer numa ponta
   sem a outra faz a marca voltar a evaporar em silêncio.

   `white-space: nowrap` porque nome de botão quebrado em duas linhas deixa
   de parecer um botão. */
.ajuda-artigo-corpo .ui-b,
.ajuda-artigo-corpo .ui-l,
.ajuda-artigo-corpo .ui-c { white-space: nowrap; font-size: .95em; }
.ajuda-artigo-corpo .ui-b {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--acento-linha);
  border-radius: 5px;
  background: var(--acento-fundo);
  color: var(--acento);
  font-weight: 600;
}
.ajuda-artigo-corpo .ui-l {
  color: var(--acento);
  font-weight: 600;
  border-bottom: 1px solid var(--acento-linha);
}
.ajuda-artigo-corpo .ui-c {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--linha-forte);
  border-radius: 4px;
  background: var(--papel-sutil);
  color: var(--tinta-media);
}

/* O SELO NUMERADO, que liga o texto ao print.
 *
 * O print marcado numera os alvos; sem um número correspondente no texto, a
 * correspondência fica por conta do leitor — ele olha a imagem, conta os
 * anéis e adivinha qual é qual. Com o selo, o parágrafo diz "① Concluir
 * encerra a demanda" e a pessoa acha na hora.
 *
 * MESMO ÂMBAR E MESMA FORMA DO SELO DA IMAGEM (`capturar.py`), de propósito:
 * são a mesma coisa, e parecer a mesma coisa é o que faz a ligação funcionar
 * sem explicação.
 *
 * O NÚMERO VIRA CONTRATO entre o texto e o print. Reordenar as marcas no
 * `capturar.py` sem mexer no artigo faz o texto apontar para o campo errado,
 * e a imagem continua bonita — o defeito não dá erro em lugar nenhum. Ao
 * mexer num, conferir o outro. */
.ajuda-artigo-corpo .ui-n {
  display: inline-block;
  width: 17px; height: 17px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--papel);
  font: 700 11px/17px system-ui, sans-serif;
  text-align: center;
  vertical-align: 1px;
  white-space: nowrap;
}

/* PRINT DE TELA: PEQUENO NO TEXTO, CHEIO NO CLIQUE.
   A borda leve separa a imagem do fundo branco; sem ela, print de tela clara
   "vaza" e perde o contorno.

   O teto de 380px é a mudança que importa. Antes a imagem ocupava a largura
   toda e ainda assim ficava ilegível: print de tela inteira reduzido não tem
   como mostrar rótulo de botão. Aumentar não resolveria, porque aí a figura
   empurra o texto e a leitura vira rolagem. Menor no corpo e cheia na lupa
   (ver `_artigo_js.html`) resolve os dois usos com uma imagem só. */
.ajuda-artigo-corpo img {
  max-width: min(100%, 520px); height: auto; display: block;
  max-height: 380px;
  object-fit: contain;
  object-position: left top;
  border: 1px solid var(--linha);
  border-radius: 10px;
  margin: 14px 0;
  box-shadow: 0 2px 10px rgba(var(--rgb-sombra), .06);
  cursor: zoom-in;
  transition: border-color var(--mov-rapido) ease, box-shadow var(--mov-rapido) ease;
}
.ajuda-artigo-corpo img:hover {
  border-color: var(--acento-linha, #e0d8f0);
  box-shadow: 0 6px 20px rgba(var(--rgb-sombra), .14);
}
.ajuda-artigo-corpo img:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* --- A LUPA -----------------------------------------------------------
   Montada por script quando alguém clica num print. Fica no fim do `<body>`,
   fora do fluxo do artigo, então nada aqui depende de onde a imagem estava. */
.kb-lupa {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(var(--rgb-sombra), .82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  padding: var(--e5);
  /* A imagem entra crescendo um pouco: sem isso ela aparece pronta e o olho
     não liga o clique ao resultado. */
  animation: kb-lupa-entra .16s ease both;
}
@keyframes kb-lupa-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kb-lupa img {
  max-width: 96vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  background: var(--papel);
  box-shadow: 0 20px 60px rgba(var(--rgb-preto), .5);
  cursor: default;
}
.kb-lupa-legenda {
  margin: 0;
  max-width: 70ch;
  text-align: center;
  color: var(--papel);
  font-size: var(--txt-mini);
  opacity: .92;
}
.kb-lupa-fechar {
  position: absolute;
  top: var(--e4);
  right: var(--e4);
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--rgb-papel), .14);
  color: var(--papel);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mov-rapido) ease;
}
.kb-lupa-fechar:hover { background: rgba(var(--rgb-papel), .28); }
.kb-lupa-fechar:focus-visible { outline: 2px solid var(--papel); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .kb-lupa { animation: none; }
}

/* A lupa não vai para o papel: o `js-artigo-imprimir` chama `window.print()`,
   e uma imagem em tela cheia sobre fundo escuro gastaria uma folha inteira
   de tinta. */
@media print {
  .kb-lupa { display: none !important; }
  .ajuda-artigo-corpo img { max-height: none; }
}
.ajuda-artigo-corpo blockquote {
  border-left: 3px solid var(--atencao, #d1830f);
  background: var(--atencao-suave, #fffaf3);
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  color: var(--tinta-media);
}
.ajuda-artigo-corpo table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.ajuda-artigo-corpo th, .ajuda-artigo-corpo td {
  border: 1px solid var(--linha);
  padding: 7px 10px;
  font-size: var(--txt-micro);
  text-align: left;
}
.ajuda-artigo-corpo th { background: var(--papel-sutil); color: var(--tinta); font-weight: 700; }

/* Só no papel — na tela o endereço já está na barra do navegador. */
.kb-print-fonte { display: none; }

.kb-artigo-pe {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--linha);
}
.ajuda-artigo-util { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kb-util-pergunta { font-size: var(--txt-micro); color: var(--tinta-fraca); font-weight: 600; }
.ajuda-util-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta-media);
  font-family: inherit;
  font-size: var(--txt-micro);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--mov-rapido) ease, color var(--mov-rapido) ease,
              background var(--mov-rapido) ease;
}
.ajuda-util-btn:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-fundo); }
.ajuda-artigo-util-obrigado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--txt-micro); font-weight: 600; color: var(--ok, #2f6b46);
}

/* O aviso de "link copiado" pinta o próprio botão por 2,2s — ver o
   `_artigo_js.html`, que troca o rótulo e o ícone junto. */
.b-btn.artigo-acao--feito { border-color: var(--ok, #2f6b46); color: var(--ok, #2f6b46); }

/* --- No papel ------------------------------------------------------------- */
@media print {
  /* Some tudo o que não é o artigo: trilha, barra, coluna lateral e as ações.
     Imprimir um artigo é imprimir o texto, não a tela. */
  .b-trilha, .b-topo, .kb-lado, .kb-artigo-pe { display: none !important; }
  .kb-grade, .kb-grade--leitura { grid-template-columns: 1fr; }
  .kb-artigo { border: 0; box-shadow: none; padding: 0; }
  .kb-print-fonte { display: block; margin-top: 18px; font-size: 10px; color: #666; }
  .ajuda-artigo-corpo img,
  .ajuda-artigo-corpo blockquote { break-inside: avoid; page-break-inside: avoid; }
  .ajuda-artigo-corpo h2,
  .ajuda-artigo-corpo h3 { break-after: avoid; page-break-after: avoid; color: #1f2937; }
  /* Papel não tem link clicável: o endereço vai impresso ao lado do texto,
     senão "veja aqui" no papel não leva a lugar nenhum. */
  .ajuda-artigo-corpo a::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}