/* ============================================================
SIGECON 2.0 — estilo único, com temas via custom properties.
Visual: barras finas, cartões limpos, hierarquia clara
célula → NC → NE → liquidação.
Tipografia dupla (igual ao sistema de referência): Archivo pro texto
de UI, IBM Plex Mono pros valores numéricos/monetários — dá o "look"
de painel financeiro que o padrão adotado usa.
============================================================ */
/* Fonte carregada via no do index.html (não @import
aqui), pra poder ser removida na cópia de teste igual aos outros
recursos externos (CDN do supabase-js/chart.js) sem quebrar o CSS. */
/* ---------- Temas ----------
Meta de contraste/vibração pedida explicitamente ("deixar o pastel de
lado e entregar algo excepcional"): os 4 temas agora seguem a mesma
régua de contraste do padrão de referência (sigeconex), não só o
tema Blue — texto mais escuro/mais claro que antes (mais contraste
contra o fundo), bordas mais visíveis, e verde/vermelho/amarelo/roxo
sempre com a versão "sólida" da cor (nunca dessaturada/pastel). */
:root,
:root[data-theme="white"] {
--bg: #f4f6f9;
--surface: #ffffff;
--surface-2: #f8fafc;
--border: #cbd3e1;
--text: #0f172a;
--text-muted: #5a6880;
--primary: #1d4ed8;
--primary-hover: #2563eb;
--primary-contrast: #ffffff;
--success: #15803d;
--danger: #b91c1c;
--danger-hover: #dc2626;
--warning: #92400e;
--shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
--bar-empenhado: #7c3aed;
--bar-saldo: #16a34a;
--tint-danger: #fef2f2;
--tint-warning: #fffbeb;
--tint-success: #f0fdf4;
--tint-neutral: #f1f5f9;
--font: Archivo, 'Segoe UI', system-ui, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
/* DARK — continua neutro (cinza/grafite, sem matiz azul dominante como o
tema Blue), mas com o MESMO padrão de contraste/vibração: fundo mais
fechado, texto/borda com mais contraste, e as cores de destaque
(sucesso/perigo/alerta/roxo) na versão sólida e vívida da referência
em vez da versão acinzentada/pastel que havia antes. */
:root[data-theme="dark"] {
--bg: #0d0e10;
--surface: #17181c;
--surface-2: #1e1f24;
--border: #4c4f5a;
--text: #f5f6f8;
--text-muted: #aab0bd;
--primary: #6d8fd6;
--primary-hover: #8fa8e0;
--primary-contrast: #ffffff;
--success: #3ddc97;
--danger: #ff8d7e;
--danger-hover: #ffab9f;
--warning: #f5b70a;
--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 22px rgba(0, 0, 0, .45);
--bar-empenhado: #8b5cf6;
--bar-saldo: #3ddc97;
--tint-danger: rgba(255, 141, 126, .14);
--tint-warning: rgba(245, 183, 10, .14);
--tint-success: rgba(61, 220, 151, .12);
--tint-neutral: #22242b;
}
/* BLUE — valores puxados 1:1 das custom properties do painel de
referência (:root do CSS enviado pelo usuário), não mais uma
aproximação: --base-clr/--card-bg/--line-clr/--accent-solid/
--success/--danger/--warning/--purple-solid/--tint-* copiados com o
mesmo hex/rgba, só remapeados pros nomes de variável deste projeto. */
:root[data-theme="blue"] {
--bg: #05070b; /* --base-clr */
--surface: #131a26; /* --card-bg */
--surface-2: #0d121a; /* --card-bg-2 */
--border: #34435f; /* --line-clr (mais contraste contra o fundo escuro) */
--text: #f2f5fb; /* --text-clr */
--text-muted: #a3b0c7; /* --secondary-text-clr */
--primary: #3f7dff; /* --accent-solid */
--primary-hover: #7fb0ff; /* --accent-clr */
--primary-contrast: #ffffff;
--success: #3ddc97;
--danger: #ff8d7e;
--danger-hover: #ffab9f;
--warning: #f5b70a;
--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 50px rgba(0, 0, 0, .6);
--bar-empenhado: #8b5cf6; /* --purple-solid */
--bar-saldo: #3ddc97;
--tint-danger: rgba(255, 141, 126, .12);
--tint-warning: rgba(245, 183, 10, .12);
--tint-success: rgba(61, 220, 151, .10);
--tint-neutral: #1c2431;
}
/* GREEN — mesma régua de contraste: texto/borda mais escuros que antes,
e o verde de destaque na versão sólida/funda (não mais o tom
"sálvia" acinzentado da rodada anterior). */
:root[data-theme="green"] {
--bg: #eef7f1;
--surface: #ffffff;
--surface-2: #f3faf5;
--border: #a9d6b8;
--text: #0d2818;
--text-muted: #3f6350;
--primary: #0e7a52;
--primary-hover: #0a5f40;
--primary-contrast: #ffffff;
--success: #15803d;
--danger: #b91c1c;
--danger-hover: #dc2626;
--warning: #92400e;
--shadow: 0 1px 2px rgba(9, 60, 36, .08), 0 2px 8px rgba(9, 60, 36, .06);
--bar-empenhado: #0e7a52;
--bar-saldo: #16a34a;
--tint-danger: #fef2f2;
--tint-warning: #fffbeb;
--tint-success: #e3f8ec;
--tint-neutral: #e9f5ee;
}
/* ---------- Base ---------- */
* { box-sizing: border-box; }
/* Garante que o atributo [hidden] SEMPRE vença, mesmo em elementos que
têm display:flex/grid definido por classe (célula-acoes, liquidacoes-
bloco, modal-overlay, etc.) — sem isto, esses elementos continuam
visíveis e clicáveis mesmo "escondidos" via JS (bug real encontrado
em teste automatizado: RBAC escondia botões, mas eles continuavam
aparecendo por causa do display:flex vencer o [hidden]). */
[hidden] { display: none !important; }
html, body {
margin: 0; padding: 0; height: 100%;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
.muted { color: var(--text-muted); }
.small-label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
/* Valores numéricos/monetários em monoespaçada — igual ao padrão de
referência (--mono aplicado em .card-value/.kpi-value/etc.), pra dar
o alinhamento e o "look" de painel financeiro. */
.valor, .celula-numero, .nc-numero, .ne-numero, .celula-barra-texto,
.celula-percentual-valor, .nc-prazo, .kpi-valor { font-variant-numeric: tabular-nums; font-family: var(--mono); }
h1, h2, h3, h4 { margin: 0; }
/* ---------- Login ---------- */
.login-body {
display: flex; align-items: center; justify-content: center;
min-height: 100vh;
}
.login-card {
width: 380px; max-width: 92vw;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: var(--shadow);
padding: 32px 28px;
}
.login-brand { text-align: center; margin-bottom: 22px; }
.brand-mark {
width: 48px; height: 48px; border-radius: 12px;
background: var(--primary); color: var(--primary-contrast);
display: flex; align-items: center; justify-content: center;
font-weight: 700; margin: 0 auto 10px;
}
.brand-mark.small { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
.login-brand h1 { font-size: 20px; }
.login-brand h1 span { color: var(--primary); font-weight: 800; }
.login-form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.login-footer { text-align: center; margin-top: 18px; font-size: 12px; }
/* ---------- Formulários genéricos ---------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field span { font-size: 12px; color: var(--text-muted); }
.field input, .field select, .field textarea {
border: 1px solid var(--border); border-radius: 8px;
padding: 9px 11px; background: var(--surface-2); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--primary);
}
.field textarea { min-height: 60px; resize: vertical; }
.field-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.field-inline select { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: var(--surface); color: var(--text); }
.alert { padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.alert-error { background: rgba(220, 38, 38, .1); color: var(--danger); border: 1px solid rgba(220, 38, 38, .25); }
.campo-ug-aviso { margin: -6px 0 14px; line-height: 1.4; }
/* ---------- Botões ---------- */
.btn {
border: 1px solid transparent; border-radius: 8px;
padding: 9px 14px; font-weight: 600; cursor: pointer;
transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-primary { background: var(--primary); color: var(--primary-contrast); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-link { background: none; border: none; color: var(--primary); padding: 4px 0; font-weight: 600; cursor: pointer; }
/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
width: 240px; flex-shrink: 0;
background: var(--surface); border-right: 1px solid var(--border);
display: flex; flex-direction: column; align-items: stretch;
padding: 16px 14px;
/* Com o bloco de créditos no rodapé, o conteúdo da sidebar pode passar
de 100vh em telas mais baixas — sem overflow próprio, ela vazava
(cortada) em vez de rolar. */
overflow-y: auto;
}
/* Topo da sidebar: marca + dados do usuário logado, sempre em cima
(antes ficavam no rodapé — corrigido a pedido do usuário). */
.sidebar-topo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.brand-row { display: flex; align-items: center; gap: 8px; }
.sidebar-title { display: flex; align-items: baseline; gap: 4px; }
.sidebar-title strong { font-size: 15px; }
.sidebar-title span { color: var(--primary); font-weight: 800; font-size: 12px; }
/* Nome por extenso do sistema, logo abaixo da marca "SIGECON 2.0". */
.sidebar-subtitulo { font-size: 10px; color: var(--text-muted); line-height: 1.3; margin-top: -6px; }
.perfil-box { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.perfil-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--surface); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.perfil-info { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.perfil-info strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.badge {
display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; width: fit-content;
}
/* Filtros de UASG/Exercício + Nova Célula: botão/campos próprios na
sidebar (antes ficavam soltos no topo do dashboard). */
.sidebar-filtros { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.sidebar-field { flex-direction: column; align-items: stretch; gap: 3px; font-size: 11px; }
.sidebar-field select { width: 100%; }
/* Busca — pedido explícito: sai do topo do dashboard e mora na sidebar
(filtra a lista de células ao digitar). Ctrl+F abre a busca universal
flutuante (modal), independente deste campo. */
.sidebar-search { position: relative; }
.sidebar-search-icone { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .7; pointer-events: none; }
.sidebar-search input {
width: 100%; border: 1px solid var(--border); border-radius: 8px;
padding: 8px 10px 8px 28px; background: var(--surface-2); color: var(--text); font-size: 12.5px;
}
.sidebar-search input:focus { outline: none; border-color: var(--primary); }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item {
text-align: left; background: none; border: none; border-radius: 8px;
padding: 10px 12px; color: var(--text-muted); font-weight: 600; cursor: pointer;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--primary); color: var(--primary-contrast); }
/* padding-top reduzido (14→10px) pra deixar o seletor de Tema um pouco
mais "acima", abrindo espaço pro bloco de créditos que fica por
último, na parte mais baixa da sidebar. */
.sidebar-footer { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.tema-switch { display: flex; flex-direction: column; gap: 3px; }
.tema-switch select { border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; background: var(--surface-2); color: var(--text); }
/* Créditos/atribuição, sempre por último (parte mais baixa da sidebar). */
.sidebar-creditos { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border); }
.sidebar-creditos p { margin: 0 0 4px; font-size: 10px; line-height: 1.4; color: var(--text-muted); }
.sidebar-creditos p:last-child { margin-bottom: 0; }
.sidebar-creditos a { color: var(--primary); text-decoration: none; }
.sidebar-creditos a:hover { text-decoration: underline; }
.sidebar-creditos-projeto { font-style: italic; }
/* .app-shell tem min-height:100vh (cresce se precisar), mas o .main
fica com altura travada em 100vh e rolagem própria — assim a sidebar
nunca sai da tela e só o conteúdo (dashboard/células/auditoria) rola,
em vez da página inteira (bug real: ao rolar pra ver o resto do
dashboard, a sidebar "sumia" junto por rolar com a página toda). */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; }
.view { display: none; padding: 18px 22px; }
.view.active { display: block; }
/* min-height (não height fixo) = o dashboard ocupa a tela toda quando
sobra espaço (pedido explícito: "distribuído na tela completa, de
acordo com o tamanho da tela do usuário"), mas em telas baixas o
conteúdo simplesmente cresce além disso e o scroll do .main cobre o
resto — nunca corta nada. 36px = padding de cima+baixo da .view. */
#view-dashboard.active { display: flex; flex-direction: column; gap: 8px; min-height: calc(100vh - 36px); }
/* Wrapper com altura travada ao redor de cada