1683 lines
44 KiB
CSS
1683 lines
44 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 */
|
|
|
|
/* Resumo do topo da aba Observações — donut por severidade (SVG puro, sem
|
|
Chart.js/dependência nova nesta tela interativa, diferente do relatório
|
|
estático "Gerar Dashboard" que já usa Chart.js via CDN) + um card por
|
|
categoria/regra de auditoria com a lista de contas/linhas apontadas, ou
|
|
"Nenhum apontamento encontrado" quando a regra não gerou achado nesta
|
|
apuração. Donut e cards são clicáveis e filtram a lista detalhada logo
|
|
abaixo (ver renderAchadosResumo/pidDcSelecionarSeveridade em
|
|
dashboard-contabil.js). Inspirado numa tela de auditoria de outro sistema
|
|
que o usuário trouxe como referência visual. */
|
|
.dc-achados-resumo {
|
|
display: flex;
|
|
gap: var(--space-5);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--space-5);
|
|
padding-bottom: var(--space-5);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.dc-achados-resumo__chart {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dc-donut {
|
|
position: relative;
|
|
width: 150px;
|
|
height: 150px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Técnica de donut com pathLength="100" — cada segmento é um <circle> com
|
|
stroke-dasharray "pct (100-pct)" e stroke-dashoffset acumulado, contado a
|
|
partir de 25 (um quarto de volta) pra começar às 12h em vez de às 3h.
|
|
pointer-events do SVG só considera pixel realmente pintado (stroke), então
|
|
cada segmento é clicável só na própria fatia, sem precisar de hit-test
|
|
manual por ângulo. */
|
|
.dc-donut-svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.dc-donut-svg__bg {
|
|
fill: none;
|
|
stroke: var(--bg-surface-raised);
|
|
stroke-width: 4;
|
|
}
|
|
|
|
.dc-donut-svg__seg {
|
|
fill: none;
|
|
stroke-width: 4;
|
|
cursor: pointer;
|
|
transition: stroke-width var(--transition-fast);
|
|
}
|
|
|
|
.dc-donut-svg__seg:hover,
|
|
.dc-donut-svg__seg.is-active {
|
|
stroke-width: 5.5;
|
|
}
|
|
|
|
.dc-donut__hole {
|
|
position: absolute;
|
|
inset: 20%;
|
|
border-radius: 50%;
|
|
background: var(--bg-surface);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dc-donut__total {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dc-donut__label {
|
|
font-size: 0.68rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.dc-donut-legend {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
font-size: 0.78rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dc-donut-legend__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
cursor: pointer;
|
|
padding: 2px var(--space-2);
|
|
margin: 0 calc(-1 * var(--space-2));
|
|
border-radius: var(--radius-sm);
|
|
transition: background var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
|
|
.dc-donut-legend__item:hover {
|
|
background: var(--bg-surface-raised);
|
|
}
|
|
|
|
.dc-donut-legend__item.is-active {
|
|
color: var(--text-primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dc-donut-legend__dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dc-achados-categorias {
|
|
flex: 1 1 640px;
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: var(--space-3);
|
|
align-content: start;
|
|
}
|
|
|
|
.dc-categoria-card {
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--bg-surface);
|
|
}
|
|
|
|
.dc-categoria-card__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.dc-categoria-card__dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
background: var(--dc-categoria-cor);
|
|
}
|
|
|
|
.dc-categoria-card__titulo {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dc-categoria-card__contagem {
|
|
flex-shrink: 0;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
padding: 1px var(--space-2);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--bg-surface-raised);
|
|
color: var(--text-secondary);
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Uma linha por regra dentro do card do grupo — substitui a antiga tabela
|
|
por conta (uma linha por achado com badge de status), que era a maior
|
|
fonte de poluição visual com 10 cards soltos. Detalhe por conta/status
|
|
continua disponível na lista abaixo, ao clicar numa regra. */
|
|
.dc-categoria-card__regras {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.dc-categoria-card__regra {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-1) 0;
|
|
border-top: 1px solid var(--border-subtle);
|
|
font-size: 0.78rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dc-categoria-card__regra:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
.dc-categoria-card__regra--vazia {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dc-categoria-card__regra--clicavel {
|
|
cursor: pointer;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.dc-categoria-card__regra--clicavel:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dc-categoria-card__regra--clicavel.is-active {
|
|
color: var(--text-primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dc-categoria-card__regra-label {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dc-categoria-card__regra-contagem {
|
|
flex-shrink: 0;
|
|
min-width: 16px;
|
|
text-align: right;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dc-categoria-card__regra--vazia .dc-categoria-card__regra-contagem {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.dc-achados-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
/* Aparece só quando um card de categoria está ativo (filtroRegra != null,
|
|
ver renderAchados) — os chips de severidade/status já têm seu próprio
|
|
estado visual (.is-active), mas o filtro por categoria não tem um chip
|
|
equivalente, então esta faixa avisa qual categoria está isolada e oferece
|
|
uma forma explícita de limpar (além de clicar de novo no mesmo card). */
|
|
.dc-regra-filtro-ativo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
font-size: 0.82rem;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-surface-raised);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-2) var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.dc-regra-filtro-limpar {
|
|
margin-left: auto;
|
|
background: none;
|
|
border: none;
|
|
color: var(--accent);
|
|
font-size: 0.82rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.dc-regra-filtro-limpar:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Expande/recolhe a conta usada no apontamento (achado.conta) — só
|
|
presente em achados vinculados a uma conta específica; regras gerais
|
|
(ex. balanceamento Ativo x Passivo) não têm esse toggle. */
|
|
.dc-achado-card__toggle-conta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
margin-top: var(--space-2);
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
color: var(--accent);
|
|
font-size: 0.78rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dc-achado-card__toggle-conta:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.dc-achado-card__toggle-conta svg {
|
|
transition: transform var(--transition-fast);
|
|
}
|
|
|
|
.dc-achado-card__toggle-conta.is-expanded svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.dc-achado-card__conta {
|
|
margin: var(--space-2) 0 0;
|
|
padding: var(--space-3);
|
|
background: var(--bg-surface-raised);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: var(--space-2) var(--space-4);
|
|
}
|
|
|
|
.dc-achado-card__conta dt {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.dc-achado-card__conta dd {
|
|
margin: 2px 0 0;
|
|
font-size: 0.85rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Análise Vertical tem um número variável de colunas de Valor/Variação (uma
|
|
dupla por mês, ver ContabilApuracao.analise_vertical_meses) — diferente
|
|
da DRE (sempre uma única coluna de valor, `td:nth-child(2)` acima), então
|
|
alinha à direita toda coluna que não seja a 1ª (descrição) nem a última
|
|
(observação), em vez de fixar um índice. */
|
|
.dc-av-table td:not(:first-child):not(:last-child) {
|
|
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") — só
|
|
negrito pra se destacar das analíticas que ela agrupa, mesmo padrão visual
|
|
do PDF original (coluna "S/A"); sem fundo elevado, pra manter a tabela com
|
|
uma cor de fundo única (mesmo visual já usado na DRE, que só usa negrito
|
|
pra linha totalizadora — pedido explícito do usuário pra unificar). */
|
|
.dc-conta-row--sintetica {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Destaque temporário nas contas recém-reveladas ao expandir um grupo —
|
|
pedido explícito do usuário: ao expandir uma conta, as contas que aparecem
|
|
embaixo dela ganham esse realce; ao expandir uma delas em seguida, o
|
|
realce se move pros filhos dela e as linhas destacadas antes voltam à cor
|
|
padrão (dcContasDestaque/dcDreDestaque em dashboard-contabil.js sempre
|
|
representam só a última leva revelada, nunca acumulam). `.pa-table td` já
|
|
tem `transition: background`, então a troca de destaque anima sozinha.
|
|
|
|
Cor por tema via as duas variáveis abaixo, não hardcoded na regra, pra dar
|
|
pra inverter o efeito no tema claro sem duplicar a regra em si. No escuro,
|
|
o destaque usa `--bg-canvas` (o tom mais escuro do tema — pedido explícito
|
|
do usuário depois de ver `--card-bg-hover`, mais claro, nas linhas
|
|
destacadas: queria o oposto, destaque mais escuro e o resto mais claro) e
|
|
as linhas fora do destaque usam `--bg-surface-raised` (mais claro que
|
|
`--bg-canvas`/`--bg-surface`, mas ainda distinto de `--card-bg-hover` —
|
|
senão o hover das linhas não-destacadas ficaria idêntico ao repouso, sem
|
|
nenhum feedback visual). No claro, o efeito já nasceu invertido por pedido
|
|
anterior do usuário — as linhas fora do destaque é que ganham a cor
|
|
(`--accent-rgb` bem sutil), e a leva recém-revelada fica em branco
|
|
(`--bg-surface`), lida como "limpa" em vez de tingida; não mexido nesta
|
|
rodada, só o tema escuro pediu a troca. */
|
|
:root {
|
|
--dc-destaque-bg: var(--bg-canvas);
|
|
--dc-row-tint-bg: var(--bg-surface-raised);
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--dc-destaque-bg: var(--bg-surface);
|
|
--dc-row-tint-bg: rgba(var(--accent-rgb), 0.08);
|
|
}
|
|
|
|
.dc-contas-table tbody tr td,
|
|
.dc-dre-table tbody tr td {
|
|
background-color: var(--dc-row-tint-bg);
|
|
}
|
|
|
|
/* Especificidade proposital mais alta que a regra acima (duas classes, não
|
|
uma) — senão a regra de tingimento genérico, com mais seletores de tipo
|
|
(tbody+tr+td), venceria por especificidade e o destaque nunca apareceria. */
|
|
.dc-contas-table .dc-conta-row--destaque td,
|
|
.dc-dre-table .dc-conta-row--destaque td {
|
|
background-color: var(--dc-destaque-bg);
|
|
}
|
|
|
|
.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. Reaproveitado
|
|
também pela árvore da DRE (renderDre), sobre ContabilLinhaDre.nivel. */
|
|
.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;
|
|
}
|
|
|
|
/* Botão de observação — sempre o mesmo ícone (pedido explícito do usuário:
|
|
nem "+ Observação" nem o texto da observação em si devem aparecer na
|
|
tabela, poluía a coluna visualmente); só a cor muda pra indicar de
|
|
relance quais linhas já têm observação preenchida (`title`/tooltip
|
|
mostra o texto quando houver). Mesmo padrão dos outros ícones de tabela
|
|
(`.icon-btn`, `perfis-acesso.css`), mas menor, pra caber numa célula sem
|
|
aumentar a altura da linha. */
|
|
.dc-conta-observacao-btn {
|
|
position: relative; /* âncora do `.dc-obs-contador` (badge de quantidade) */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
color: var(--text-muted);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.dc-conta-observacao-btn:hover {
|
|
background: var(--card-bg-hover);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.dc-conta-observacao-btn--preenchida {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Coluna "Observação" agora tem 2 botões lado a lado (validado + observação)
|
|
— pedido explícito do usuário. Este `display:flex` fica num `<div>` *dentro*
|
|
do `<td>`, nunca no próprio `<td>` — um `<td>` com `display:flex` deixa de
|
|
se comportar como célula de tabela (altura/fundo/borda não acompanham mais
|
|
a linha direito), o que já causou um bug visual real (linha "quebrando"
|
|
antes de chegar nos botões, ver `renderContas()`/`renderDre()`). */
|
|
.dc-obs-cell-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
/* Botão de "validado" (check) — cor fixa `--teal`, deliberadamente diferente
|
|
de `--accent` (usado em `.dc-conta-observacao-btn--preenchida` e também a
|
|
cor de tema que o usuário escolhe em "Tema de cores", ver tokens.css), pra
|
|
não confundir "tem observação preenchida" com "conta já conferida". */
|
|
.dc-conta-validado-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 50%;
|
|
color: var(--text-muted);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.dc-conta-validado-btn:hover {
|
|
background: var(--card-bg-hover);
|
|
color: var(--teal);
|
|
}
|
|
|
|
.dc-conta-validado-btn--validado {
|
|
color: var(--teal);
|
|
}
|
|
|
|
/* Estado "parcial" do tri-state de uma conta/linha sintética (com filhos) —
|
|
pedido explícito do usuário: amarelo enquanto nem todo descendente estiver
|
|
validado, mesmo depois de marcar a própria sintética. Vira
|
|
`--validado` (verde/teal) assim que 100% dos descendentes estiverem
|
|
validados — ver dcEstadoValidacaoGrupo()/dcValidadoInfo() em
|
|
dashboard-contabil.js. */
|
|
.dc-conta-validado-btn--parcial {
|
|
color: var(--gold);
|
|
}
|
|
|
|
.dc-conta-validado-btn:disabled {
|
|
cursor: default;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Tooltip customizado no visual do Portal — os badges abaixo (alterada no
|
|
reprocessamento, fonte de PDF atípica) precisavam de um texto mais longo,
|
|
às vezes com quebra de linha própria (ex. "valor antes do
|
|
reprocessamento" numa segunda linha), do que `.info-tooltip__text`
|
|
(components.css) suporta — aquele é `white-space:nowrap`, pensado só pro
|
|
rótulo curto "Mais informações". `tabindex="0"` no gatilho + `:hover`/
|
|
`:focus-visible` mostram o tooltip também via teclado, não só no hover do
|
|
mouse. `white-space: pre-line` preserva um `\n` deliberado no texto
|
|
(quebra de linha própria) e ainda assim quebra/envolve o resto
|
|
normalmente pela largura máxima.
|
|
|
|
`position: fixed` (não `absolute` como `.info-tooltip__text`) — os badges
|
|
deste pacote vivem dentro de `.pa-table-wrap`, que tem `overflow:hidden`
|
|
pra arredondar o canto da tabela (perfis-acesso.css); um tooltip
|
|
`absolute` cortava (confirmado pelo usuário: balão cortado em cima da
|
|
primeira linha, cortado na lateral perto da borda da tabela). `fixed`
|
|
posiciona relativo à viewport, escapando desse corte — `top`/`left` são
|
|
calculados em JS (`pidDcPosicionaTooltip()`, dashboard-contabil.js, no
|
|
`mouseenter`/`focus` do gatilho) e clampados pra nunca sair da tela nem
|
|
pra cima nem pros lados; sem JS nenhum, ficaria sempre num canto fixo da
|
|
tela, errado pra qualquer badge que não esteja bem naquele ponto. */
|
|
.dc-hover-tooltip {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.dc-hover-tooltip__gatilho {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.dc-hover-tooltip__texto {
|
|
position: fixed;
|
|
width: max-content;
|
|
max-width: 280px;
|
|
white-space: pre-line;
|
|
text-align: left;
|
|
background: var(--bg-surface-raised);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: 0.75rem;
|
|
line-height: 1.4;
|
|
box-shadow: var(--shadow-sm);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity var(--transition-fast);
|
|
z-index: 20;
|
|
}
|
|
|
|
.dc-hover-tooltip__gatilho:hover + .dc-hover-tooltip__texto,
|
|
.dc-hover-tooltip__gatilho:focus-visible + .dc-hover-tooltip__texto {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Badge de alerta — conta/linha que mudou no último reprocessamento
|
|
(`alterada_reprocessamento`, ver "Reprocessar" no CLAUDE.md do pacote).
|
|
Puramente informativo (não é um botão, só o gatilho de um
|
|
`.dc-hover-tooltip` acima) — continua visível mesmo depois do contador
|
|
marcar a conta/linha como validada de novo (pedido explícito do usuário:
|
|
precisa dar pra identificar quais itens já foram reprocessados E
|
|
revalidados), só troca de cor via `--validada` abaixo; só some de vez num
|
|
próximo reprocessamento sem essa mudança específica. Cor `--danger`
|
|
(pendente), igual à severidade "alta" dos achados — chama mais atenção
|
|
que o dourado já usado pelo estado "parcial" do validado. */
|
|
.dc-conta-alterada-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
color: var(--danger);
|
|
}
|
|
|
|
/* Mesmo verde de .status-pill--ativo (perfis-acesso.css) — "já revisado e
|
|
confirmado", não é um token de tema, é o hex fixo já reaproveitado em
|
|
outras telas pro mesmo significado. */
|
|
.dc-conta-alterada-badge--validada {
|
|
color: #2f9e6e;
|
|
}
|
|
|
|
/* Aviso de "fonte de PDF atípica" (ContabilApuracao.fonte_pdf_atipica) ao
|
|
lado do nome da empresa — mesmo espírito de .dc-conta-alterada-badge
|
|
(gatilho de um `.dc-hover-tooltip`, não é um botão), cor `--gold` porque
|
|
é um aviso de atenção, não um alerta de severidade alta como o badge de
|
|
alteração acima. */
|
|
.dc-fonte-atipica-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
vertical-align: middle;
|
|
color: var(--gold);
|
|
}
|
|
|
|
/* Editor inline de observação — substitui o antigo modal `#dc-observacao-modal`
|
|
(pedido explícito do usuário, pra não perder o texto por causa de um
|
|
clique acidental fora de um popup): uma linha extra logo abaixo da conta/
|
|
linha, dentro da própria tabela. Fundo distinto do tingimento padrão das
|
|
linhas (ver `--dc-row-tint-bg`/`--dc-destaque-bg` acima) — 2 classes,
|
|
maior especificidade que a regra genérica de 1 classe + 3 seletores de
|
|
tipo, então não precisa se preocupar com a ordem de declaração. */
|
|
.dc-contas-table .dc-obs-edit-row td,
|
|
.dc-dre-table .dc-obs-edit-row td {
|
|
background-color: var(--bg-surface);
|
|
}
|
|
|
|
.dc-obs-edit-row td {
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
/* Este `<td>` é sempre o único da linha (colspan cobre todas as colunas),
|
|
então ele é ao mesmo tempo "primeiro" e "último" filho pro seletor CSS —
|
|
herdaria `text-align:right` de `.pa-table td:last-child` (bug de
|
|
alinhamento já visto no painel de detalhe de outras telas) E a cor
|
|
apagada de `.dc-contas-table td:nth-child(1)` (pensada pra coluna do
|
|
código da conta, `--text-muted`), deixando o texto da thread de
|
|
observações "apagado" mesmo já sem cor própria nele. Precisa do seletor
|
|
com 2 classes (não só `.dc-obs-edit-row td`) pra empatar/ganhar em
|
|
especificidade das duas regras acima (a versão de 1 classe perdia); força
|
|
a esquerda (é texto corrido, não valor numérico) e `--text-primary`
|
|
(texto principal do tema, não um branco fixo — continua legível nos dois
|
|
temas) como cor herdada por padrão pra tudo que não define a própria. */
|
|
.pa-table .dc-obs-edit-row td {
|
|
text-align: left;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dc-obs-edit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.dc-obs-edit .modal-field {
|
|
margin: 0;
|
|
}
|
|
|
|
.dc-obs-edit .modal-actions {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ---- Thread de observações (histórico por empresa+conta) ----
|
|
O painel inline deixou de ser "um textarea com o texto da linha" e virou
|
|
uma thread: as observações vigentes daquela conta (as desta competência e
|
|
as herdadas de competências anteriores, ver `ContabilObservacao` no
|
|
backend) em cima, o campo de observação nova embaixo. Observação herdada
|
|
fica visualmente mais apagada e sem os botões de editar/excluir — é
|
|
registro histórico, só dá pra encerrar ou responder com uma nova. */
|
|
.dc-obs-thread {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.dc-obs-thread__vazio {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dc-obs-item {
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3);
|
|
background: var(--bg-surface-raised);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.dc-obs-item--historica {
|
|
border-left: 3px solid var(--accent);
|
|
}
|
|
|
|
.dc-obs-item--encerrada {
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.dc-obs-item__head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.dc-obs-item__assinatura {
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dc-obs-item__selos {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.dc-obs-item__acoes {
|
|
margin-left: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.dc-obs-item__texto {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dc-obs-selo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px var(--space-2);
|
|
border-radius: 999px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
background: var(--card-bg-hover);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dc-obs-selo--historica {
|
|
background: rgba(var(--accent-rgb), 0.16);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.dc-obs-selo--encerrada {
|
|
background: rgba(var(--gold-rgb), 0.18);
|
|
color: var(--gold);
|
|
}
|
|
|
|
.dc-obs-selo--cliente {
|
|
background: rgba(var(--teal-rgb), 0.18);
|
|
color: var(--teal);
|
|
}
|
|
|
|
.dc-obs-nova {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
padding-top: var(--space-2);
|
|
border-top: 1px dashed var(--border-subtle);
|
|
}
|
|
|
|
/* Contagem de observações vigentes ao lado do ícone da coluna "Observação" —
|
|
o texto em si nunca aparece na tabela (ver `.dc-conta-observacao-btn`),
|
|
então o número é o único sinal de "quantas coisas já foram anotadas aqui". */
|
|
.dc-obs-contador {
|
|
position: absolute;
|
|
top: -2px;
|
|
right: -4px;
|
|
min-width: 15px;
|
|
height: 15px;
|
|
padding: 0 3px;
|
|
border-radius: 999px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-size: 0.62rem;
|
|
font-weight: 700;
|
|
line-height: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.dc-obs-filtros {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
/* Resumo de observações no final do Balancete/DRE (pedido explícito do
|
|
usuário) — reaproveita `.dc-dash-obs-list`/`.dc-dash-obs*` (já definidas
|
|
mais abaixo) pros itens da lista, só a moldura da seção é nova. */
|
|
.dc-obs-resumo {
|
|
margin-top: var(--space-5);
|
|
padding-top: var(--space-5);
|
|
border-top: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.dc-obs-resumo__titulo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: 0.95rem;
|
|
margin: 0 0 var(--space-3);
|
|
}
|
|
|
|
.dc-obs-resumo__count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 22px;
|
|
height: 22px;
|
|
padding: 0 var(--space-2);
|
|
border-radius: var(--radius-pill);
|
|
background: rgba(var(--accent-rgb), 0.14);
|
|
color: var(--accent);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* ---- Aba "Dashboard" (pré-visualização do relatório "Gerar Dashboard") ---- */
|
|
|
|
.dc-dash-intro {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
max-width: 80ch;
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
.dc-dash-section {
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.dc-dash-section__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.dc-dash-section__titulo {
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.dc-dash-section__header .dc-dash-section__titulo {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dc-dash-section__dica {
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
/* Resumo do Fechamento — editor de texto rico (mesmo padrão de
|
|
.ag-richtext em acessos-gerais.css/.ajuda-modal__editor em
|
|
components.css: contenteditable + colar/arrastar imagem, ver
|
|
pidDcInicializaResumoFechamentoEditor() em dashboard-contabil.js).
|
|
Duplicado por tela de propósito, mesmo espírito dos outros dois — não é
|
|
um componente compartilhado no projeto. */
|
|
.dc-dash-resumo-fechamento {
|
|
margin-bottom: var(--space-5);
|
|
padding-bottom: var(--space-4);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.dc-dash-resumo-fechamento__titulo {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
margin: 0 0 var(--space-1);
|
|
}
|
|
|
|
.dc-dash-resumo-fechamento__dica {
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
margin: 0 0 var(--space-2);
|
|
}
|
|
|
|
.dc-dash-richtext {
|
|
min-height: 120px;
|
|
max-height: 340px;
|
|
overflow-y: auto;
|
|
padding: var(--space-3);
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border-subtle);
|
|
background: var(--bg-canvas);
|
|
color: var(--text-primary);
|
|
font-size: 0.88rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.dc-dash-richtext:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.dc-dash-richtext:empty::before {
|
|
content: attr(data-placeholder);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dc-dash-richtext img {
|
|
max-width: 100%;
|
|
border-radius: var(--radius-sm);
|
|
margin: var(--space-2) 0;
|
|
}
|
|
|
|
.dc-dash-richtext[contenteditable="false"] {
|
|
cursor: default;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.dc-dash-resumo-fechamento__acoes {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.dc-dash-resumo-fechamento__status {
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dc-dash-grupo {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.dc-dash-grupo__titulo {
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.dc-dash-cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.dc-dash-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3);
|
|
background: var(--bg-surface);
|
|
cursor: pointer;
|
|
transition: opacity var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.dc-dash-card:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.dc-dash-card.is-oculto {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.dc-dash-card__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dc-dash-card__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dc-dash-card__label {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.dc-dash-card__valor {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.dc-dash-obs-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.dc-dash-obs {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--bg-surface);
|
|
transition: opacity var(--transition-fast);
|
|
}
|
|
|
|
.dc-dash-obs.is-oculto {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.dc-dash-obs__info {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dc-dash-obs__origem {
|
|
display: inline-block;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--accent);
|
|
margin-right: var(--space-2);
|
|
}
|
|
|
|
.dc-dash-obs__referencia {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dc-dash-obs__texto {
|
|
margin-top: var(--space-1);
|
|
font-size: 0.82rem;
|
|
/* Era `--text-secondary` (cinza) — pedido explícito do usuário: no tema
|
|
escuro o texto da observação em si ficava "apagado"/difícil de ler
|
|
contra o fundo do card. `--text-primary` é o token de texto principal
|
|
(branco no escuro, escuro no claro), não um branco fixo — continua
|
|
legível nos dois temas. */
|
|
color: var(--text-primary);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.dc-dash-toggle-btn {
|
|
flex-shrink: 0;
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
|
|
.dc-dash-toggle-btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Modal "Ver fórmula" (#dc-indicador-formula-modal) */
|
|
|
|
.dc-ind-formula-box {
|
|
margin-top: var(--space-2);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-canvas);
|
|
border: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.dc-ind-formula-box__label {
|
|
display: block;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.dc-ind-formula-box p {
|
|
font-size: 0.88rem;
|
|
font-family: "DM Mono", monospace;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Modal "Novo/Editar Indicador" (#dc-indicador-modal) — construtor de
|
|
componentes: cada .dc-ind-componente é um termo da fórmula (chave + tipo
|
|
+ o "picker" certo pro tipo, ver pidDcRenderComponentePicker em
|
|
dashboard-contabil.js), reaproveitando .checklist-box/.checklist-item/
|
|
.checklist-search de components.css pros pickers de conta/linha da DRE. */
|
|
|
|
.dc-ind-componentes-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-4);
|
|
margin-bottom: var(--space-2);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dc-ind-componente {
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3);
|
|
background: var(--bg-canvas);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
/* Não reaproveita .modal-field-row (grid de exatamente 2 colunas,
|
|
components.css) porque esta linha tem um 3º elemento (o botão de
|
|
remover) que precisa ficar ao lado dos dois campos, não quebrar pra uma
|
|
"3ª coluna" inexistente. */
|
|
.dc-ind-componente__linha {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.dc-ind-componente__linha .modal-field {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dc-ind-comp-chave,
|
|
.dc-ind-comp-tipo,
|
|
.dc-ind-comp-indicador {
|
|
width: 100%;
|
|
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.85rem;
|
|
}
|
|
|
|
.dc-ind-comp-remover {
|
|
flex-shrink: 0;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.dc-ind-comp-picker {
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
/* Único scroll de verdade dentro do construtor de componentes — o
|
|
checklist de contas/linhas da DRE em si (até ~150 itens). Antes havia
|
|
TAMBÉM um scroll na lista de componentes por fora (.dc-ind-componentes-lista,
|
|
320px) — dois scrolls aninhados deixavam a área útil minúscula, a ponto
|
|
de nem um componente inteiro caber sem rolar duas vezes (relatado pelo
|
|
usuário). Removido o scroll externo: agora só o modal inteiro rola
|
|
(`.modal-card` já tem `max-height`/`overflow-y`, ver components.css), e
|
|
este checklist, bem maior que antes, é o único scroll aninhado que
|
|
sobra — genuinamente necessário, já que uma apuração real tem ~100-150
|
|
contas/linhas. */
|
|
.dc-ind-comp-picker .checklist-box {
|
|
max-height: 260px;
|
|
}
|
|
|
|
.dc-ind-formula-hint {
|
|
font-size: 0.76rem;
|
|
color: var(--text-muted);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
/* Seletor de ícone do indicador (modal "Novo/Editar Indicador") — cada
|
|
botão já é o próprio preview (mesmo ícone que aparece no card do
|
|
relatório "Gerar Dashboard", ver dashboard-contabil-relatorio.html);
|
|
`.is-selecionado` é a única indicação de estado, sem nenhum input
|
|
escondido visível — o valor real fica em memória (dcIndicadorIconeSelecionado
|
|
em dashboard-contabil.js) até o Salvar. */
|
|
.dc-ind-icone-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.dc-ind-icone-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--border-subtle);
|
|
background: var(--bg-surface);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
|
|
.dc-ind-icone-btn:hover {
|
|
background: var(--card-bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dc-ind-icone-btn.is-selecionado {
|
|
background: rgba(var(--accent-rgb), 0.16);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.dc-ind-componentes-lista {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
/* Resultado de "Calcular com esta apuração" (#dc-indicador-calcular-btn) —
|
|
mostra o valor resolvido de cada componente + o resultado final da
|
|
fórmula, contra a apuração aberta agora, sem salvar nada. Pedido
|
|
explícito do usuário: conferir se a fórmula pegou a conta certa antes
|
|
de confirmar. */
|
|
.dc-ind-preview {
|
|
margin-top: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-canvas);
|
|
border: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.dc-ind-preview__lista {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
font-size: 0.85rem;
|
|
font-family: "DM Mono", monospace;
|
|
}
|
|
|
|
.dc-ind-preview__lista li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
padding: var(--space-1) 0;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.dc-ind-preview__lista li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.dc-ind-preview__lista li span:first-child {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dc-ind-preview__lista li span:last-child {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dc-ind-preview__resultado {
|
|
margin-top: var(--space-2);
|
|
padding-top: var(--space-2);
|
|
border-top: 1px solid var(--border-subtle);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dc-ind-preview__resultado strong {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.dc-ind-preview__erro {
|
|
font-size: 0.85rem;
|
|
color: var(--danger);
|
|
}
|
|
|
|
.dc-ind-preview__carregando {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Modal "Gerenciar Indicadores" (#dc-indicadores-hub-modal) — lista todo
|
|
indicador personalizado (padrão e não padrão), pra visualizar/editar
|
|
mesmo os que não estão ativos nesta apuração agora (ver
|
|
pidDcRenderHubIndicadores em dashboard-contabil.js). */
|
|
|
|
.dc-ind-hub-secao {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.dc-ind-hub-secao__titulo {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.dc-ind-hub-lista {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
max-height: 240px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dc-ind-hub-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-3);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-canvas);
|
|
}
|
|
|
|
.dc-ind-hub-item__ativo {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.dc-ind-hub-item__spacer {
|
|
width: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Reset de <button> pra parecer texto clicável — abre "Ver fórmula" (ver
|
|
data-dc-hub-ver em dashboard-contabil.js). */
|
|
.dc-ind-hub-item__nome {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: left;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 0.85rem;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dc-ind-hub-item__nome:hover {
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Botão flutuante "voltar ao topo" — fixo na viewport (não escopado a
|
|
nenhuma aba), aparece via JS (dashboard-contabil.js, evento `scroll`)
|
|
só depois que o início da página já saiu de vista. `bottom`/`right`
|
|
dão folga suficiente pra não sobrepor nenhum outro elemento fixo da
|
|
página (não há nenhum hoje, mas evita colidir se um for adicionado). */
|
|
.dc-back-to-top-btn {
|
|
position: fixed;
|
|
right: var(--space-5);
|
|
bottom: var(--space-5);
|
|
z-index: 20;
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
|
|
transition: background var(--transition-fast), transform 100ms ease;
|
|
}
|
|
|
|
.dc-back-to-top-btn:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
.dc-back-to-top-btn:active {
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
/* Cabeçalho de tabela com o botão "Restaurar formatação padrão" (Balancete/
|
|
DRE/Análise Vertical) — a última coluna (Observação) vira um flex pra
|
|
manter o rótulo à esquerda e o botão colado na borda direita da linha de
|
|
cabeçalho, sem precisar de uma coluna extra (e sem mexer nos `colspan`
|
|
das linhas vazias/observação, que continuam contando só as colunas de
|
|
dado). */
|
|
.dc-th-linha {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* Menor que o .icon-btn padrão (38px) — vive dentro de uma célula de
|
|
cabeçalho de tabela, não pode competir em tamanho com o texto da coluna. */
|
|
.dc-reset-formatacao-btn {
|
|
width: 22px;
|
|
height: 22px;
|
|
flex-shrink: 0;
|
|
color: var(--text-muted);
|
|
}
|