798 lines
18 KiB
CSS
798 lines
18 KiB
CSS
/* "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;
|
|
}
|