/* "Não Conformidades" (Relatórios > Qualidade) — .ncf-* — só usado em
   nao-conformidades.html. Carrega perfis-acesso.css também, pra reaproveitar
   .pa-table/.pa-tabs/.pa-table-wrap/.status-pill (mesmo padrão de
   importacao-plano-saude.css/indicador-desempenho.css). */

.ncf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.ncf-header h2,
.ncf-header h3 {
  margin: 0 0 var(--space-1);
}

.ncf-subtitle,
.ncf-section__hint {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

.ncf-section {
  margin-bottom: var(--space-6);
}

.ncf-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.ncf-section__header h3 {
  margin: 0;
}

.ncf-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  min-width: 20px;
  text-align: center;
}

.ncf-section__hint {
  margin-bottom: var(--space-3);
}

.ncf-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-4);
  text-align: center;
}

/* Erro de carga no lugar da mensagem de lista vazia (ver pidNcfEstadoVazio
   em nao-conformidades.js): falha nunca pode parecer "nada encontrado". */
.ncf-empty.ncf-empty--erro {
  color: var(--danger);
  font-style: normal;
}

/* Erro de carga do Dashboard ocupa a grade de cards inteira. */
.ncf-dash-erro {
  grid-column: 1 / -1;
  margin: 0;
}

.pa-table td.ncf-ranking-erro {
  color: var(--danger);
  text-align: left;
}

/* Campos de data nativos (filtro de Vencimento) seguem o tema: o ícone e o
   calendário do Chrome/Edge não ficam escuros sobre o fundo escuro. */
#ncf-col-filtro-vencimento-de,
#ncf-col-filtro-vencimento-ate {
  color-scheme: dark;
}

:root[data-theme="light"] #ncf-col-filtro-vencimento-de,
:root[data-theme="light"] #ncf-col-filtro-vencimento-ate {
  color-scheme: light;
}

/* Modificadores de .status-pill (base já vem de perfis-acesso.css, que
   define .status-pill/.status-pill--ativo/.status-pill--inativo). */
.status-pill--ok {
  color: #2f9e6e;
  background: rgba(47, 158, 110, 0.14);
}

.status-pill--danger {
  color: var(--danger);
  background: rgba(var(--danger-rgb), 0.14);
}

.status-pill--warning {
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.18);
}

.status-pill--neutral {
  color: var(--text-muted);
  background: var(--bg-surface-raised);
}

.ncf-reaberto {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--coral);
  background: rgba(var(--coral-rgb), 0.16);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  cursor: help;
}

.ncf-row-btn {
  margin-left: var(--space-2);
}

/* Chips de filtro (período/prazo/tratativa) — mesmo padrão visual de
   .ind-departamento-chip (indicador-desempenho.css), duplicado aqui porque
   essa folha não é carregada nesta página. */
.ncf-filtro-grupo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.ncf-filtro-grupo__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ncf-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ncf-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.ncf-chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.ncf-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* Ordenação por clique no cabeçalho — mesma linguagem visual de #ua-table
   (perfis-acesso.css, th[data-sort]/.ua-sort-icon), duplicado aqui porque
   essa folha não compartilha código com a de usuários. Escopado pela classe
   compartilhada .ncf-table-sortable (as 3 tabelas da Gestão), não por ID
   individual. */
.ncf-table-sortable th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.ncf-sort-icon {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.ncf-table-sortable th[data-sort].is-sort-asc .ncf-sort-icon,
.ncf-table-sortable th[data-sort].is-sort-desc .ncf-sort-icon {
  color: var(--accent);
}

/* Filtro por coluna (só "Tipo de Ocorrência"/"Vencimento", tabela de Ações) —
   mesmo espírito de .ind-info-wrap/.ind-info-popover (indicador-desempenho.css),
   mas com uma diferença importante: aqui o popover é position:fixed (não
   absolute), com top/left calculados em JS a partir do
   getBoundingClientRect() do botão (ver pidNcfAbrirPopoverColuna() em
   nao-conformidades.js). position:fixed escapa do overflow:hidden de
   .pa-table-wrap (perfis-acesso.css, usado pra arredondar o canto da
   tabela) sem precisar reabrir esse overflow — uma primeira versão fazia
   isso com overflow:visible no wrapper, mas isso quebrava a contenção da
   tabela (12 colunas já é bem larga) e estourava a largura da página. */
.ncf-th-filterable {
  position: relative;
}

.ncf-th-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ncf-col-filtro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: var(--space-2);
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ncf-col-filtro-btn:hover,
.ncf-col-filtro-btn[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

.ncf-col-filtro-popover {
  position: fixed;
  z-index: 30;
  width: 240px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-raised);
  box-shadow: var(--shadow-lg);
  animation: pidFadeSlideUp 140ms ease;
  /* .pa-table th força uppercase/letter-spacing/tamanho pequeno no
     cabeçalho — resetado aqui pra virar texto normal de novo. */
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  color: var(--text-primary);
  white-space: normal;
  text-align: left;
}

.ncf-col-filtro-popover .checklist-box {
  max-height: 160px;
}

.ncf-col-filtro-popover .modal-field {
  margin-bottom: var(--space-2);
}

.ncf-col-filtro-popover__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ncf-col-filtro-popover__actions .btn-outline,
.ncf-col-filtro-popover__actions .btn-solid {
  padding: 4px 12px;
  font-size: 0.78rem;
}

/* Ação já finalizada no Sigsistem — não há nada pra Qualidade tratar, então
   a coluna de ação mostra só um traço em vez do botão "Marcar como tratado". */
.ncf-sem-acao-necessaria {
  color: var(--text-muted);
}

/* Resumo copiável (canto superior direito da Gestão) — mesmo mecanismo de
   popover position:fixed do filtro de coluna acima (ver
   pidNcfFecharPopoversColuna() em nao-conformidades.js, que fecha os dois
   tipos de popover de um jeito só). */
.ncf-resumo-wrap {
  position: relative;
  flex-shrink: 0;
}

.ncf-resumo-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ncf-resumo-popover {
  position: fixed;
  z-index: 30;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-raised);
  box-shadow: var(--shadow-lg);
  animation: pidFadeSlideUp 140ms ease;
}

.ncf-resumo-popover__preview {
  font-size: 0.85rem;
  line-height: 1.5;
}

.ncf-resumo-titulo {
  font-weight: 700;
  margin: var(--space-3) 0 var(--space-1);
}

.ncf-resumo-titulo:first-child {
  margin-top: 0;
}

.ncf-resumo-linha {
  margin: 0;
  color: var(--text-primary);
}

.ncf-resumo-linha--vencida {
  color: var(--danger);
}

.ncf-resumo-linha--vence7 {
  color: var(--gold);
}

.ncf-resumo-vazio {
  color: var(--text-muted);
  margin: 0;
}

.ncf-resumo-popover__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* Dashboard */
.ncf-dashboard-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.ncf-kpis-section {
  margin-bottom: var(--space-6);
}

.ncf-kpis-title {
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}

.ncf-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.ncf-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.ncf-kpi__label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.ncf-kpi__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ncf-kpi__value--vazio {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  font-style: italic;
}

.ncf-kpi__n {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.ncf-execucao-categoria {
  margin-top: var(--space-4);
}

.ncf-execucao-categoria__title {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 var(--space-2);
}

.ncf-execucao-categoria__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.ncf-dash-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.ncf-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ncf-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.ncf-legend-dot--nc {
  background: var(--danger);
}

.ncf-legend-dot--reclamacao {
  background: var(--gold);
}

.ncf-legend-dot--outros {
  background: var(--text-muted);
}

/* Especificidade extra (elemento+classe) pra vencer .pa-table td, que já
   define color/font-weight próprios com a mesma especificidade de uma
   classe sozinha. */
/* Colunas numéricas dos rankings (Qtd./NC/Recl./Outros/Total) alinhadas
   por dígito. */
.ncf-dash-ranking td {
  font-variant-numeric: tabular-nums;
}

.pa-table td.ncf-num--nc {
  color: var(--danger);
  font-weight: 600;
}

.pa-table td.ncf-num--reclamacao {
  color: var(--gold);
  font-weight: 600;
}

.pa-table td.ncf-num--total {
  font-weight: 700;
  color: var(--text-primary);
}

.ncf-clicavel {
  cursor: pointer;
  touch-action: manipulation;
}

.ncf-clicavel:hover td {
  background: var(--card-bg-hover);
}

.ncf-card--clicavel {
  cursor: pointer;
  touch-action: manipulation;
  text-align: left;
  font: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.ncf-card--clicavel:hover {
  border-color: var(--accent);
  background: var(--card-bg-hover);
}

.ncf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.ncf-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ncf-card__label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.ncf-card__value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ncf-card--danger .ncf-card__value {
  color: var(--danger);
}

.ncf-card--warning .ncf-card__value {
  color: var(--gold);
}

.ncf-dash-rankings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.ncf-dash-ranking h3 {
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}

/* Importar */
.ncf-file-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.ncf-file-field__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  white-space: nowrap;
}

.ncf-file-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Nome de arquivo longo termina em reticências em vez de empurrar o layout. */
.ncf-file-field__name {
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ncf-import-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ncf-import-resultado {
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 0.88rem;
  color: var(--text-primary);
}

/* Busca compartilhada da Gestão + Resumo copiável (canto superior direito) */
.ncf-gestao-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.ncf-gestao-toolbar__busca {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 260px;
}

.ncf-gestao-search {
  flex: 1;
  max-width: 420px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.88rem;
}

.ncf-gestao-search:focus {
  outline: none;
  border-color: var(--accent);
}

/* Expandir linha (chevron que gira, corpo revelado abaixo) — mesmo padrão de
   .cc-painel-fiscal__toggle (custo-contratacao.css), adaptado pra dentro de
   uma célula de tabela. */
.ncf-expand-col {
  width: 32px;
}

.ncf-expand-btn {
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ncf-expand-btn:hover {
  background: var(--bg-surface-raised);
  color: var(--text-primary);
}

.ncf-expand-chevron {
  transition: transform var(--transition-fast);
}

.ncf-expand-btn[aria-expanded="true"] .ncf-expand-chevron {
  transform: rotate(90deg);
}

.pa-table td.ncf-detail-cell {
  background: var(--bg-surface-raised);
  padding: var(--space-4) var(--space-5);
  text-align: left;
}

/* A linha principal de uma Ação não fecha com borda embaixo — quem fecha é
   a linha de descrição logo abaixo (ver .ncf-acao-descricao-row), pra as
   duas lerem como um bloco só, não duas linhas de tabela separadas. */
.pa-table tr.ncf-acao-main-row td {
  border-bottom: none;
}

/* Linha full-width com a descrição da Ação, logo abaixo da linha principal
   (não é mais uma coluna própria — não cabia na largura da tabela). Classe
   própria com maior especificidade que .pa-table td:last-child
   (text-align:right) pelo mesmo motivo de .ncf-detail-cell acima: como usa
   colspan, é sempre "a última" célula da linha. */
.pa-table tr.ncf-acao-descricao-row td.ncf-acao-descricao-cell {
  padding-top: 0;
  padding-bottom: var(--space-3);
  text-align: left;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.ncf-acao-descricao-label {
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 4px;
}

.ncf-detail-panel {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ncf-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
}

.ncf-detail-field__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* overflow-wrap: anywhere: texto livre do Sigsistem com e-mail, URL ou
   sequência longa sem espaço não estoura a largura do painel. */
.ncf-detail-field__value {
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ncf-detail-panel__texto {
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ncf-detail-panel__loading {
  color: var(--text-muted);
  font-style: italic;
}

.ncf-detail-panel h4 {
  font-size: 0.82rem;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.ncf-mostrar-mais-btn {
  margin-top: var(--space-2);
}

/* Histórico de acompanhamentos (agora dentro do painel inline, não modal) */
.ncf-acompanhamentos-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.ncf-acompanhamento-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--bg-surface-raised);
}

.ncf-acompanhamento-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.ncf-acompanhamento-item p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}