/* kipus-qualidade.css — componentes kp-* da área (demandas de 12/10/2026). Modo noturno em [data-bs-theme=dark]. */

/* ---- Filtro segmentado «Mostrar: Todas | Comigo | Com a Controladoria» (kipus/filtro_segmentado) ---- */
.kp-filtro-segmentado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.kp-filtro-segmentado-rotulo {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
}

/* ---- Selo «com você» / «com a Controladoria» (kipus/selo_vez) ---- */
.kp-selo-vez {
  display: inline-flex;
  align-items: center;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.kp-selo-vez-comigo {
  color: var(--kp-red);
  background: var(--kp-red-alpha);
  border-color: var(--kp-red-ring);
}
.kp-selo-vez-controladoria {
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .kp-selo-vez-comigo {
  color: var(--kp-red-lt);
  background: rgba(248, 113, 113, .12);
  border-color: rgba(248, 113, 113, .3);
}

/* ---- Clipes de anexos (kipus/clipes_anexos) ---- */
.kp-clipes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.kp-clipes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5rem;
  font-size: .8rem;
}
.kp-clipes a {
  overflow-wrap: anywhere;
}
.kp-clipes-detalhe,
.kp-clipes-vazio {
  font-size: .72rem;
  color: var(--bs-secondary-color);
}

/* ---- O que foi feito + evidências por atividade (rnc_planos_acao_anexos/da_atividade) ---- */
.kp-atividade-evidencias {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .4rem;
}
.kp-atividade-feito,
.kp-atividade-anexos {
  padding: .35rem .5rem;
  border-left: 3px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  border-radius: 0 .375rem .375rem 0;
  font-size: .8rem;
}
.kp-atividade-rotulo {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  margin-bottom: .15rem;
}
.kp-atividade-anexar {
  margin-top: .3rem;
  font-size: .75rem;
  padding: .1rem .5rem;
}
[data-bs-theme=dark] .kp-atividade-feito,
[data-bs-theme=dark] .kp-atividade-anexos {
  border-left-color: var(--bs-border-color-translucent);
}

/* ---- Etapas das atividades do plano de ação (dono, 12/10/2026) ----
   Formulário: kipus/acoes_5w2h_etapas (dentro de cada ação 5W2H).
   Exibição: rnc_planos_acao/etapas (ficha do plano, etapa 5 da RNC, modal de concluir). */
.kp-etapas-form {
  margin-top: .6rem;
  padding: .5rem .6rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: .375rem;
  background: var(--bs-tertiary-bg);
}
.kp-etapas-form-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem .75rem;
}
.kp-etapas-form-linha {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 12rem) 9.5rem 1.25rem;
  align-items: center;
  gap: .4rem;
  margin-top: .4rem;
}
.kp-etapas-rotulo {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
}
.kp-etapas-numero {
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
  color: var(--bs-secondary-color);
}
@media (max-width: 767.98px) {
  .kp-etapas-form-linha {
    grid-template-columns: 1.5rem minmax(0, 1fr) 1.25rem;
  }
  .kp-etapas-form-linha select,
  .kp-etapas-form-linha input[type=date] {
    grid-column: 2 / 3;
  }
}

.kp-etapas {
  margin-top: .5rem;
  padding: .4rem .5rem;
  border-left: 3px solid var(--bs-primary);
  background: var(--bs-tertiary-bg);
  border-radius: 0 .375rem .375rem 0;
}
.kp-etapas-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  margin-bottom: .25rem;
}
.kp-etapas-progresso {
  font-size: .72rem;
  color: var(--bs-secondary-color);
}
.kp-etapas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
/* Escopadas na lista: `.kp-etapa` e `.kp-etapa-corpo` soltas vazavam para as seções da ficha da RNC (que usa os
   mesmos nomes em kipus.css) e punham o corpo de cada etapa ao lado do título (dono, 29/10/2026). */
.kp-etapas-lista .kp-etapa {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .82rem;
}
.kp-etapas-lista .kp-etapa-marca {
  color: var(--bs-secondary-color);
  line-height: 1.4;
}
.kp-etapas-lista .kp-etapa.is-concluida .kp-etapa-marca {
  color: var(--bs-success);
}
.kp-etapas-lista .kp-etapa.is-concluida .kp-etapa-texto {
  color: var(--bs-secondary-color);
}
.kp-etapas-lista .kp-etapa-corpo {
  flex: 1 1 auto;
  min-width: 0;
}
.kp-etapas-lista .kp-etapa-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .75rem;
  font-size: .74rem;
  color: var(--bs-secondary-color);
}
.kp-etapas-lista .kp-etapa-meta a {
  overflow-wrap: anywhere;
}
.kp-etapas-lista .kp-etapa-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  flex: 0 0 auto;
}
.kp-etapas-lista .kp-etapa-acoes .btn {
  font-size: .72rem;
  padding: .1rem .45rem;
}
[data-bs-theme=dark] .kp-etapas-form {
  border-color: var(--bs-border-color-translucent);
}
[data-bs-theme=dark] .kp-etapas {
  border-left-color: var(--bs-primary-border-subtle);
}

/* ---- Cadastro de Metas dos Objetivos da Qualidade em grade mensal (/qualidade-objetivos) ---- */
.kp-oq-grade {
  --kp-oqg-ok: #146c43;
  --kp-oqg-ok-bg: rgba(25, 135, 84, .12);
  --kp-oqg-bad: #b02a37;
  --kp-oqg-bad-bg: rgba(214, 49, 63, .12);
  --kp-oqg-warn: #8a6100;
  --kp-oqg-warn-bg: rgba(255, 193, 7, .2);
  --kp-oqg-nil: var(--bs-secondary-color);
  --kp-oqg-linha: var(--bs-border-color);
}
[data-bs-theme=dark] .kp-oq-grade,
body.dark-mode .kp-oq-grade {
  --kp-oqg-ok: #3fbf86;
  --kp-oqg-ok-bg: rgba(63, 191, 134, .16);
  --kp-oqg-bad: #f06a78;
  --kp-oqg-bad-bg: rgba(240, 106, 120, .16);
  --kp-oqg-warn: #e3b33b;
  --kp-oqg-warn-bg: rgba(227, 179, 59, .16);
}
.kp-oq-grade .kipus-table .table td.kp-oq-grade-objetivo {
  min-width: 15rem;
  max-width: 22rem;
  white-space: normal;
}
.kp-oq-grade .kipus-table .table td.kp-oq-grade-meta {
  min-width: 7rem;
  max-width: 11rem;
  font-size: .8125rem;
  white-space: normal;
}
.kp-oq-grade td.kp-oq-grade-celula {
  padding-left: .2rem;
  padding-right: .2rem;
  text-align: center;
}
.kp-oq-grade .kp-oq-grade-mes {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  min-height: 2rem;
  padding: .15rem .3rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.kp-oq-grade .kp-oq-grade-editavel {
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.kp-oq-grade .kp-oq-grade-editavel:hover {
  border-color: var(--kp-red, #991b1b);
}
.kp-oq-grade .kp-oq-grade-editavel:focus-visible {
  outline: 2px solid var(--kp-red, #991b1b);
  outline-offset: 1px;
}
.kp-oq-grade .kp-oq-grade-valor {
  font-weight: 600;
  font-size: .8125rem;
}
.kp-oq-grade .kp-oq-grade-meta-mes {
  font-size: .75rem;
  font-weight: 600;
}
.kp-oq-grade .kp-oq-grade-mes.nova {
  box-shadow: inset 3px 0 0 var(--kp-red, #991b1b);
}
.kp-oq-grade .kp-oq-grade-sub {
  font-size: .6875rem;
  opacity: .85;
}
.kp-oq-grade .kp-oq-grade-mes.ok {
  color: var(--kp-oqg-ok);
  background: var(--kp-oqg-ok-bg);
}
.kp-oq-grade .kp-oq-grade-mes.bad {
  color: var(--kp-oqg-bad);
  background: var(--kp-oqg-bad-bg);
}
.kp-oq-grade .kp-oq-grade-mes.warn {
  color: var(--kp-oqg-warn);
  background: var(--kp-oqg-warn-bg);
}
.kp-oq-grade .kp-oq-grade-mes.nil {
  color: var(--kp-oqg-nil);
}
.kp-oq-grade .kp-oq-grade-mes.parcial {
  border-style: dashed;
  border-color: var(--kp-oqg-linha);
}
.kp-oq-grade .kp-oq-grade-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .9rem;
  padding-bottom: .75rem;
}
.kp-oq-grade .kp-oq-grade-legenda .kp-oq-grade-mes {
  min-width: 0;
  min-height: 0;
}
.kp-oq-grade th.kp-oq-grade-fora,
.kp-oq-grade td.kp-oq-grade-fora {
  opacity: .45;
}
.kp-oq-grade tr.kp-oq-grade-grupo td {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  letter-spacing: .04em;
}