/* ENAPOR Konekta — o Conhecimento (Gestão → Conhecimento): o resumo, os quatro separadores, os documentos e a fila de envio, os cartões
   do catálogo e das fichas com o detalhe ao lado, o «Testar consulta», o relatório da importação, o texto de um documento e a pesquisa.
   Quem os monta é js/conhecimento.js. A ficha do indicador, o SQL e o diálogo são dos blocos (graficos.css). */

.cn { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cn-ecra { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.cn-intro { margin: 0; color: var(--dim); max-width: 62rem; }
.cn-erro { margin: 0.4rem 0 0; font-size: var(--t-peq); }

/* ---------------------------------------------------------------- o resumo e os separadores */

.cn-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.75rem; margin: 0; }
.cn-resumo-item { padding: 0.65rem 0.9rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cn-resumo-item dt { color: var(--dim); font-size: var(--t-peq); }
.cn-resumo-item dd { margin: 0; font-size: var(--t-g); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }

.cn-abas { align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; background: var(--superficie-2); border-radius: 999px; }
.cn-aba {
  padding: 0.4rem 1.05rem; border: 0; border-radius: 999px; background: transparent; color: var(--dim); font: inherit; font-weight: 600;
  cursor: pointer; transition: background var(--dur-rapida), color var(--dur-rapida);
}
.cn-aba:hover { color: var(--texto); }
.cn-aba[aria-selected="true"] { background: var(--superficie); color: var(--azul-texto); box-shadow: var(--sombra); }
.cn-aba-painel { min-width: 0; }

/* ---------------------------------------------------------------- Documentos */

.cn-largar {
  display: flex; flex-direction: column; gap: 0.7rem; padding: 0.9rem 1.1rem; background: var(--superficie);
  border: 2px dashed var(--borda-forte); border-radius: var(--raio); transition: border-color var(--dur-rapida), background var(--dur-rapida);
}
.cn-largar.a-largar { border-color: var(--azul); background: var(--correr-fundo); }
.cn-largar-texto { margin: 0; }
.cn-largar-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cn-largar-linha select { min-height: 2rem; padding-block: 0.25rem; font-size: var(--t-peq); }
.cn-largar-aviso { margin: 0; font-size: var(--t-peq); }
.cn-largar-aviso:empty { display: none; }

.cn-fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cn-fila-item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.7rem; background: var(--superficie-2); border-radius: var(--raio-peq);
}
.cn-fila-nome { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cn-fila-nome strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cn-fila-nome small { color: var(--dim); }
.cn-fila-estado { min-width: 0; display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-peq); }
.cn-fila-texto { min-width: 0; overflow-wrap: anywhere; }
.cn-progresso { flex: 1; min-width: 6rem; height: 0.6rem; accent-color: var(--botao); }

/* a tabela não se esmaga em janelas estreitas: ganha o seu próprio deslize (o .tabela-wrap), e a página não se mexe */
.cn-docs { min-width: 46rem; }
.cn-docs td { vertical-align: top; }
.cn-doc-titulo { display: block; overflow-wrap: break-word; font-weight: 650; }
.cn-docs td small { display: block; margin-top: 0.1rem; color: var(--dim); font-size: 0.8rem; overflow-wrap: anywhere; }
.cn-docs .cn-col-sw { width: 7.5rem; text-align: center; }
.cn-acoes { min-width: 11rem; }
.cn-acoes .linha { flex-wrap: nowrap; }
.cn-confirmar p { margin: 0 0 0.5rem; }
.cn-confirmar { max-width: 30rem; }

/* o interruptor: uma caixa de seleção com o desenho de um interruptor (role="switch") */
.cn-sw {
  appearance: none; -webkit-appearance: none; position: relative; display: inline-block; width: 2.4rem; height: 1.35rem; margin: 0;
  border-radius: 999px; background: var(--borda-campo); cursor: pointer; vertical-align: middle; transition: background var(--dur-rapida);
}
.cn-sw::before {
  content: ""; position: absolute; top: 0.175rem; left: 0.175rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff;
  transition: transform var(--dur-rapida) var(--curva);
}
.cn-sw:checked { background: var(--botao); }
.cn-sw:checked::before { transform: translateX(1.05rem); }
.cn-sw:disabled { opacity: 0.55; cursor: not-allowed; }
.cn-sw:focus-visible { border-radius: 999px; }

/* ---------------------------------------------------------------- o texto de um documento (no diálogo) */

.cn-navegar { align-items: center; margin-bottom: 0.8rem; }
.cn-onde { flex: 1; min-width: 6rem; }
.cn-partes { display: flex; flex-direction: column; gap: 0.8rem; }
.cn-parte { padding: 0.8rem 0.95rem; border: 1px solid var(--borda); border-radius: var(--raio-peq); background: var(--superficie); }
.cn-parte.cn-realce { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.cn-parte-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; margin: 0 0 0.45rem; font-size: var(--t-peq); }
.cn-parte-rotulo { font-weight: 700; color: var(--ativo); }
.cn-parte-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }

/* ---------------------------------------------------------------- o catálogo e as fichas: cartões e detalhe */

.cn-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cn-split.com-painel { grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); }
.cn-split-lista { min-width: 0; }
.cn-grupos { display: flex; flex-direction: column; gap: 1.4rem; }
.cn-grupo-titulo { margin: 0 0 0.6rem; font-size: var(--t-base); }
.cn-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.8rem; }
.cn-cartao {
  display: flex; flex-direction: column; gap: 0.45rem; width: 100%; height: 100%; min-width: 0; padding: 0.85rem 0.95rem; text-align: left;
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); cursor: pointer;
  transition: border-color var(--dur-rapida), background var(--dur-rapida), transform var(--dur-rapida) var(--curva);
}
.cn-cartao:hover { border-color: var(--azul-claro); background: var(--superficie-2); transform: translateY(-1px); }
.cn-cartao.ativa { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.cn-cartao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.5rem; }
.cn-cartao-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.cn-cartao-nome { min-width: 0; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.cn-cartao-desc {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--dim); font-size: var(--t-peq); line-height: 1.4;
}
.cn-cartao-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: auto; font-size: 0.78rem; }
.cn-pol { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--superficie-2); color: var(--ativo); font-weight: 700; }

.cn-painel {
  position: sticky; top: calc(var(--faixa) + 1rem); max-height: calc(100dvh - var(--faixa) - 2rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 0.6rem 1.1rem 1.2rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.cn-painel:focus { outline: none; }
.cn-painel-topo { display: flex; justify-content: flex-end; margin-bottom: 0.2rem; }
.cn-det-nome { margin: 0 0 0.4rem; font-size: var(--t-m); overflow-wrap: anywhere; }
.cn-det-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; }
.cn-det-id { margin: 0.6rem 0 0; font-size: var(--t-peq); }
.cn-secao { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--borda); }
.cn-secao h4 { margin: 0 0 0.5rem; color: var(--dim); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.cn-secao ul, .cn-secao ol { margin: 0; padding-left: 1.1rem; }
.cn-secao li + li { margin-top: 0.35rem; }
.cn-secao .cv-sql pre { max-height: 22rem; overflow: auto; }
.cn-params td, .cn-params th { padding: 0.45rem 0.6rem; font-size: var(--t-peq); }

/* ---------------------------------------------------------------- o «Testar consulta» */

.cn-teste { display: flex; flex-direction: column; gap: 0.8rem; }
.cn-campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.cn-campo legend { padding: 0; margin-bottom: 0.3rem; }
.cn-campo-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; font-weight: 600; font-size: 0.93rem; }
.cn-campo-nome small { font-weight: 400; font-size: 0.78rem; }
.cn-campo input:where([type="number"], [type="text"], [type="date"]), .cn-campo select { width: 100%; min-height: 2.3rem; }
.cn-opcoes { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; max-height: 10rem; overflow-y: auto; padding: 0.4rem 0.6rem; border: 1px solid var(--borda); border-radius: var(--raio-peq); }
.cn-opcao { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-peq); }
.cn-teste-nota { margin: 0; font-size: 0.78rem; }
.cn-resultado:empty { display: none; }
.cn-res { display: flex; flex-direction: column; gap: 0.6rem; }
.cn-res p { margin: 0; }
.cn-res-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; font-weight: 600; }
.cn-res-tabela td, .cn-res-tabela th { padding: 0.4rem 0.6rem; font-size: var(--t-peq); }
.cn-res-sql summary { cursor: pointer; color: var(--dim); font-size: var(--t-peq); }
.cn-res-sql .cv-sql { margin-top: 0.4rem; }
.cn-res-sql pre { max-height: 14rem; overflow: auto; }

/* ---------------------------------------------------------------- a importação do catálogo */

.cn-importar { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.cn-importar > summary { padding: 0.7rem 1rem; font-weight: 650; cursor: pointer; }
.cn-importar-corpo { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 1rem 1rem; }
.cn-importar-corpo p { margin: 0; }
.cn-importar-nomes { font-size: var(--t-peq); overflow-wrap: anywhere; }
.cn-relatorio:empty { display: none; }
.cn-relatorio .alerta { margin: 0; }
.cn-relatorio .alerta p { margin: 0.2rem 0 0; }

/* ---------------------------------------------------------------- Testar pesquisa */

.cn-pesquisa { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 46rem; }
.cn-pesquisa input { flex: 1 1 16rem; min-height: 2.5rem; }
.cn-resultados { display: flex; flex-direction: column; gap: 1.2rem; }
.cn-achados-grupo h3 { margin: 0 0 0.6rem; font-size: var(--t-base); }
.cn-achados { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.cn-achado { padding: 0.75rem 0.9rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-peq); }
.cn-achado-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; }
.cn-chave { margin-left: auto; color: var(--dim); }
.cn-excerto { margin: 0.4rem 0 0.6rem; overflow-wrap: anywhere; line-height: 1.5; }
.cn-excerto mark, .cn-parte mark { padding: 0 0.12em; border-radius: 3px; background: #FFE8A3; color: inherit; }
.cn-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ---------------------------------------------------------------- ecrãs mais estreitos */

@media (max-width: 1100px) {
  /* o detalhe passa para baixo da lista */
  .cn-split.com-painel { grid-template-columns: minmax(0, 1fr); }
  .cn-painel { position: static; max-height: none; }
}

@media (max-width: 760px) {
  .cn-fila-item { grid-template-columns: minmax(0, 1fr); }
  .cn-docs .cn-col-sw { width: 5.5rem; }
  .cn-aba { padding-inline: 0.8rem; }
}
