506 lines
9.9 KiB
CSS
506 lines
9.9 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;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
.ncf-kpi__value--vazio {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.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. */
|
|
.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;
|
|
}
|
|
|
|
.ncf-clicavel:hover td {
|
|
background: var(--card-bg-hover);
|
|
}
|
|
|
|
.ncf-card--clicavel {
|
|
cursor: pointer;
|
|
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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.ncf-file-field__name {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.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 */
|
|
.ncf-gestao-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
.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 {
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.ncf-detail-field__value {
|
|
color: var(--text-primary);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.ncf-detail-panel__texto {
|
|
margin: 0 0 var(--space-4);
|
|
color: var(--text-primary);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.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;
|
|
}
|