384 lines
8.5 KiB
CSS
384 lines
8.5 KiB
CSS
/* .dc-* — só usado em dashboard-contabil.html. Reaproveita perfis-acesso.css
|
|
(.pa-table/.pa-tabs/.pa-table-wrap) e components.css (.modal-* / .btn-*),
|
|
mesmo padrão de importacao-plano-saude.css/indicador-desempenho.css. */
|
|
|
|
.dc-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-5);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dc-header h2 {
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* flex-basis:auto (o padrão) mede o bloco de título+subtítulo pela largura
|
|
que o parágrafo teria numa única linha só, bem maior que o espaço
|
|
realmente disponível — o flex-wrap decide quebrar linha com base nessa
|
|
largura "hipotética" de conteúdo, não na largura já quebrada em várias
|
|
linhas, então o botão era empurrado pra uma linha própria mesmo sobrando
|
|
espaço na tela. flex-basis:0% (via "flex: 1 1 0%") tira o conteúdo dessa
|
|
conta: o bloco passa a ocupar só o espaço que sobra depois do botão. */
|
|
.dc-header > *:first-child {
|
|
min-width: 0;
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
/* flex-shrink:0 mantém o botão/ações no tamanho natural (nunca é ele que
|
|
cede espaço); margin-left:auto é só uma rede de segurança pro caso raro
|
|
de a tela ser estreita demais mesmo assim e a linha quebrar de verdade —
|
|
sem isso, um item sozinho numa linha própria fica alinhado à esquerda
|
|
mesmo com justify-content:space-between (não sobra outro item pra
|
|
"espaçar" contra). */
|
|
.dc-header > *:last-child {
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.dc-header-actions {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dc-subtitle {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
max-width: 70ch;
|
|
}
|
|
|
|
.dc-review-empresa {
|
|
font-weight: 400;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dc-empty {
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
padding: var(--space-6);
|
|
border: 1px dashed var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.dc-concluida-aviso {
|
|
font-size: 0.85rem;
|
|
color: var(--gold);
|
|
background: rgba(var(--gold-rgb), 0.12);
|
|
border: 1px solid rgba(var(--gold-rgb), 0.3);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3) var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.dc-form {
|
|
max-width: 560px;
|
|
}
|
|
|
|
/* .modal-actions (components.css) nasce alinhado à direita, pensado pro
|
|
rodapé de um modal estreito — aqui "Nova Análise" é a própria página, não
|
|
um modal, e os botões devem ficar junto do campo de arquivo acima deles,
|
|
à esquerda, não soltos do outro lado da página. */
|
|
.dc-form .modal-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.dc-file-field {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dc-file-field__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dc-file-field__input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.dc-file-field__input:focus-visible + .dc-file-field__name {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.dc-file-field__name {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.dc-file-field__remove {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Achados */
|
|
|
|
.dc-achados-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.dc-chip-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.dc-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);
|
|
}
|
|
|
|
.dc-chip:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.dc-chip.is-active {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--accent-contrast);
|
|
}
|
|
|
|
.dc-achados-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.dc-achado-card {
|
|
border: 1px solid var(--border-subtle);
|
|
border-left-width: 4px;
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-4);
|
|
background: var(--bg-surface);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dc-achado-card--alta {
|
|
border-left-color: var(--danger);
|
|
}
|
|
|
|
.dc-achado-card--media {
|
|
border-left-color: var(--gold);
|
|
}
|
|
|
|
.dc-achado-card--baixa {
|
|
border-left-color: var(--text-muted);
|
|
}
|
|
|
|
.dc-achado-card__main {
|
|
flex: 1 1 320px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dc-achado-card__titulo {
|
|
font-weight: 600;
|
|
font-size: 0.92rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dc-achado-card__mensagem {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.dc-achado-card__observacao {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin-top: var(--space-2);
|
|
font-style: italic;
|
|
}
|
|
|
|
.dc-achado-card__actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Tabelas de Balancete/DRE — reaproveitam .pa-table, só ajustes de alinhamento
|
|
numérico e da célula de observação (que embute um botão). */
|
|
|
|
.dc-contas-table td:nth-child(n + 3):nth-child(-n + 6),
|
|
.dc-dre-table td:nth-child(2) {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.dc-contas-table td:nth-child(1) {
|
|
white-space: nowrap;
|
|
color: var(--text-muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
/* Linha sintética (grupo do plano de contas, ex. "1.01 CIRCULANTE") — em
|
|
negrito pra se destacar das analíticas que ela agrupa, mesmo padrão visual
|
|
do PDF original (coluna "S/A"). */
|
|
.dc-conta-row--sintetica {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dc-conta-row--sintetica td {
|
|
background: var(--bg-surface-raised);
|
|
}
|
|
|
|
.dc-conta-desc-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* Recolhe/expande os filhos de uma conta sintética (árvore construída a
|
|
partir do nível de indentação, ver dcContaNivel em dashboard-contabil.js)
|
|
— mesmo espírito de uma matriz do Power BI, pedido explícito do usuário
|
|
pra facilitar a conferência de um balancete com muitas contas. */
|
|
.dc-conta-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-muted);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
|
|
.dc-conta-toggle:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-surface-raised);
|
|
}
|
|
|
|
.dc-conta-toggle.is-expanded svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.dc-conta-toggle svg {
|
|
transition: transform var(--transition-fast);
|
|
}
|
|
|
|
.dc-conta-toggle-spacer {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dc-conta-observacao-btn {
|
|
font-size: 0.78rem;
|
|
color: var(--accent);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
padding: 0;
|
|
max-width: 220px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: block;
|
|
}
|
|
|
|
.dc-conta-observacao-btn:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.dc-dre-row--totalizador td {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dc-dre-row td:first-child {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Selos de severidade/status do achado — pequenos o bastante pra ficar ao
|
|
lado do título do card, sem depender de .status-pill (definida em
|
|
nao-conformidades.css, não carregado nesta página). */
|
|
|
|
.dc-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px var(--space-3);
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.dc-badge--alta {
|
|
color: var(--danger);
|
|
background: rgba(var(--danger-rgb), 0.14);
|
|
}
|
|
|
|
.dc-badge--media {
|
|
color: var(--gold);
|
|
background: rgba(var(--gold-rgb), 0.18);
|
|
}
|
|
|
|
.dc-badge--baixa {
|
|
color: var(--text-muted);
|
|
background: var(--bg-surface-raised);
|
|
}
|
|
|
|
.dc-badge--tratado {
|
|
color: #2f9e6e;
|
|
background: rgba(47, 158, 110, 0.14);
|
|
}
|
|
|
|
.dc-badge--ignorado {
|
|
color: var(--text-muted);
|
|
background: var(--bg-surface-raised);
|
|
}
|
|
|
|
.dc-badge--pendente {
|
|
color: var(--accent);
|
|
background: rgba(var(--accent-rgb), 0.14);
|
|
}
|