/* ========================================================================== dps.css — Design system do módulo DPS (Demonstração de Passivo e Solvência Trabalhista — fiscalização CGJ-RJ), Provimento CN-CNJ nº 227/2026. ORIGEM: porte fiel do protótipo Next.js "DST" (estética papel + navy + ouro, referência tribunal/cartório) — C:\GIT\TJRJ\DPS\docs\000-DPS-diversos\00-rascunho\ DST-Demonstração-Solvência-Trabalhista\src\ app\globals.css (tokens + reset + utilitários) components\AppShell\AppShell.module.css components\Sidebar\Sidebar.module.css components\Topbar\Topbar.module.css components\Card\Card.module.css components\DataTable\DataTable.module.css components\Kpi\Kpi.module.css components\Pill\Pill.module.css components\Callout\Callout.module.css components\TagLaw\TagLaw.module.css components\Gauge\Gauge.module.css components\Timeline\Timeline.module.css components\Stepper\Stepper.module.css O que mudou no porte: - Tokens renomeados com prefixo --dps- e ESCOPADOS dentro de .dps-shell (nunca em :root) para não vazar para o resto do Portal Extrajudicial (.page-ex / ex-portal.css continuam intocados). - Classes dos CSS Modules viraram classes globais prefixadas .dps-* (o React usava className por módulo isolado; aqui tudo convive no mesmo arquivo, sempre dentro da árvore de .dps-shell). - Fontes do protótipo (Archivo, JetBrains Mono, Google Fonts via @import) substituídas pelas fontes já vendorizadas do portal (wwwroot/css/ ex-fonts.css, carregado antes deste arquivo em App.razor): Archivo → Inter, JetBrains Mono → IBM Plex Mono. Fraunces é a mesma. Nenhum @import/CDN externo neste arquivo. - Breakpoints do protótipo preservados (1100px / 720px); abaixo de 720px a sidebar deixa de ser coluna fixa e empilha no topo (ver seção 12). ========================================================================== */ /* ========================================================================== 1) TOKENS — escopados em .dps-shell (nunca em :root). ========================================================================== */ .dps-shell { /* Tinta e papel */ --dps-navy-900: #0b1733; --dps-navy-800: #122148; --dps-navy-700: #1a2f5e; --dps-navy-600: #284078; --dps-navy-300: #7e90b8; --dps-ink: #16223f; --dps-slate: #4c5670; --dps-slate-2: #6b7591; --dps-paper: #f4f1e9; --dps-paper-2: #efe9dc; --dps-surface: #fffdf8; --dps-surface-2:#faf7f0; --dps-line: #e3dccb; --dps-line-2: #d7cdb5; /* Ouro togado */ --dps-gold-700: #8a6a16; --dps-gold-600: #a9831f; --dps-gold-500: #c4a14a; --dps-gold-300: #e7d39a; --dps-gold-050: #f6edd4; /* Status semânticos */ --dps-ok: #2f7d5b; --dps-ok-bg: #e6f1ea; --dps-ok-line: #b7d8c5; --dps-warn: #b07d12; --dps-warn-bg: #f8efd6; --dps-warn-line: #ecd79a; --dps-crit: #a8362a; --dps-crit-bg: #f6e3df; --dps-crit-line: #e2b3aa; --dps-info: #2a5b9e; --dps-info-bg: #e4ecf7; --dps-info-line: #bcd0ea; /* Forma e movimento */ --dps-radius: 14px; --dps-radius-sm: 9px; --dps-shadow: 0 1px 2px rgba(16,32,64,.05), 0 10px 30px -18px rgba(16,32,64,.30); --dps-shadow-lg: 0 2px 6px rgba(16,32,64,.06), 0 28px 60px -28px rgba(16,32,64,.40); --dps-sidebar-w: 264px; /* Tipografia — mapeada para as fontes vendorizadas do portal (ex-fonts.css) */ --dps-font-display: 'Fraunces', Georgia, serif; --dps-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --dps-font-mono: 'IBM Plex Mono', Consolas, monospace; /* ---- Aplicação dos tokens na raiz do módulo (equivalente ao "body" do protótipo, que aqui não pode tocar o real do portal) ---- */ display: flex; min-height: 100vh; position: relative; isolation: isolate; font-family: var(--dps-font-body); color: var(--dps-ink); background: radial-gradient(1200px 600px at 100% -10%, rgba(196,161,74,.10), transparent 55%), radial-gradient(900px 500px at -10% 110%, rgba(40,64,120,.08), transparent 55%), var(--dps-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 15px; line-height: 1.5; letter-spacing: .005em; } /* ========================================================================== 2) RESET escopado — box-sizing, papel com textura, links, foco, sr-only. ========================================================================== */ .dps-shell, .dps-shell *, .dps-shell *::before, .dps-shell *::after { box-sizing: border-box; } .dps-shell a { color: inherit; text-decoration: none; } /* Textura de papel (grain) — port literal do body::before do protótipo */ .dps-shell::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); } .dps-shell .dps-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .dps-shell :focus-visible { outline: 2px solid var(--dps-gold-500); box-shadow: 0 0 0 3px var(--dps-gold-050); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .dps-shell *, .dps-shell *::before, .dps-shell *::after { animation: none !important; transition: none !important; } } /* ========================================================================== 3) UTILITÁRIOS DE TIPOGRAFIA ========================================================================== */ .dps-eyebrow { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dps-gold-700); font-weight: 700; margin: 0 0 8px; } .dps-section-title { font-family: var(--dps-font-display); font-size: 1.18rem; font-weight: 600; color: var(--dps-ink); margin: 0; letter-spacing: -.01em; } .dps-muted { color: var(--dps-slate-2); } .dps-mono { font-family: var(--dps-font-mono); font-variant-numeric: tabular-nums; } /* ========================================================================== 4) UTILITÁRIOS DE LAYOUT / GRID ========================================================================== */ .dps-grid { display: grid; gap: 18px; } .dps-g-2 { grid-template-columns: repeat(2, 1fr); } .dps-g-3 { grid-template-columns: repeat(3, 1fr); } .dps-g-4 { grid-template-columns: repeat(4, 1fr); } .dps-span-2 { grid-column: span 2; } .dps-stack > * + * { margin-top: 14px; } .dps-flex { display: flex; align-items: center; gap: 12px; } .dps-flex--wrap { flex-wrap: wrap; } .dps-flex--between { justify-content: space-between; } .dps-right { text-align: right; } .dps-divider { height: 1px; background: var(--dps-line); margin: 18px 0; } .dps-list-clean { list-style: none; margin: 0; padding: 0; } /* ========================================================================== 5) APPSHELL — .dps-app (implícito em .dps-shell), .dps-main, .dps-content ========================================================================== */ .dps-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; z-index: 1; } .dps-content { padding: 28px 34px 64px; max-width: 1320px; width: 100%; } /* ========================================================================== 6) SIDEBAR — .dps-sidebar + marca, navegação, rodapé. ========================================================================== */ .dps-sidebar { width: var(--dps-sidebar-w); flex: 0 0 var(--dps-sidebar-w); background: linear-gradient(180deg, var(--dps-navy-900), var(--dps-navy-800) 60%, #0e1c3c); color: #cfd8ee; position: sticky; top: 0; align-self: flex-start; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid rgba(196,161,74,.22); box-shadow: 22px 0 60px -50px rgba(0,0,0,.9); z-index: 1; } /* Link discreto de retorno ao portal institucional (fora do módulo DPS) */ .dps-sidebar__voltar { display: block; padding: 12px 20px 0; font-size: .68rem; letter-spacing: .04em; color: #8492b6; transition: color .16s; } .dps-sidebar__voltar:hover, .dps-sidebar__voltar:focus { color: var(--dps-gold-300); } .dps-sidebar__brand { display: flex; align-items: center; gap: 12px; padding: 14px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.07); } .dps-sidebar__brand-text h1 { font-family: var(--dps-font-display); font-size: 1.18rem; font-weight: 600; margin: 0; color: #fff; line-height: 1; letter-spacing: .01em; } .dps-sidebar__brand-text small { display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dps-gold-300); margin-top: 5px; } .dps-nav { padding: 10px 12px; overflow-y: auto; flex: 1; } .dps-nav__group { margin-top: 14px; } .dps-nav__group:first-child { margin-top: 4px; } .dps-nav__label { font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: #7c8ab0; padding: 0 12px 8px; font-weight: 600; } .dps-nav__item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; margin: 2px 0; color: #c2cce4; font-size: .87rem; font-weight: 500; position: relative; cursor: pointer; transition: background .16s, color .16s; } .dps-nav__item:hover { background: rgba(255,255,255,.05); color: #fff; } .dps-nav__item.active { background: linear-gradient(90deg, rgba(196,161,74,.20), rgba(196,161,74,.02)); color: #fff; } .dps-nav__item.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--dps-gold-300), var(--dps-gold-600)); } .dps-nav__badge { margin-left: auto; font-size: .62rem; font-weight: 700; background: var(--dps-crit); color: #fff; border-radius: 20px; padding: 1px 7px; } .dps-sidebar__foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.07); font-size: .66rem; color: #8492b6; line-height: 1.5; } /* ========================================================================== 7) TOPBAR — .dps-topbar (sticky no topo de .dps-content; ver comentário em DpsLayout.razor sobre quem a instancia). ========================================================================== */ .dps-topbar { display: flex; align-items: center; gap: 18px; padding: 18px 0; margin: -28px -34px 24px; padding-left: 34px; padding-right: 34px; padding-top: 18px; position: sticky; top: 0; z-index: 20; background: rgba(244,241,233,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--dps-line); } .dps-topbar__titles { min-width: 0; } /* Linha de contexto acima do título (breadcrumb do protótipo). O trecho em recebe o ouro togado — é a página corrente dentro do módulo. */ .dps-topbar__crumb { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dps-slate-2); font-weight: 600; margin-bottom: 3px; } .dps-topbar__crumb b { color: var(--dps-gold-700); } .dps-topbar__h2 { font-family: var(--dps-font-display); font-weight: 600; font-size: 1.6rem; margin: 0; color: var(--dps-ink); letter-spacing: -.01em; line-height: 1.05; } .dps-topbar__spacer { flex: 1; } .dps-topbar__chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ========================================================================== 8) CARD — .dps-card, .dps-card--accent, .dps-card__head, .dps-card__pad. ========================================================================== */ .dps-card { background: var(--dps-surface); border: 1px solid var(--dps-line); border-radius: var(--dps-radius); box-shadow: var(--dps-shadow); position: relative; overflow: hidden; } .dps-card--accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--dps-gold-300), var(--dps-gold-600)); } .dps-card__pad { padding: 20px 22px; } .dps-card__head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--dps-line); } .dps-card__titulo { font-family: var(--dps-font-display); font-size: 1.02rem; font-weight: 600; margin: 0; color: var(--dps-ink); } .dps-card__head-spacer { flex: 1; } /* ========================================================================== 9) DATATABLE — .dps-table-wrap, .dps-table (cabeçalho navy, numéricos alinhados à direita com tabular-nums). ========================================================================== */ .dps-table-wrap { overflow-x: auto; } .dps-table { width: 100%; border-collapse: collapse; font-size: .84rem; } .dps-table thead th { text-align: left; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #c8d2ea; font-weight: 600; padding: 12px 16px; background: linear-gradient(180deg, var(--dps-navy-800), var(--dps-navy-700)); position: sticky; top: 0; } .dps-table thead th.dps-num { text-align: right; } .dps-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--dps-line); color: var(--dps-slate); } .dps-table tbody td.dps-num { text-align: right; font-family: var(--dps-font-mono); color: var(--dps-ink); font-variant-numeric: tabular-nums; } .dps-table tbody tr:hover { background: var(--dps-surface-2); cursor: default; } .dps-table tbody tr.dps-clickable:hover { cursor: pointer; } .dps-table tbody tr:last-child td { border-bottom: none; } .dps-table .dps-strong { color: var(--dps-ink); font-weight: 600; } .dps-table tfoot td { padding: 13px 16px; font-weight: 700; color: var(--dps-ink); border-top: 2px solid var(--dps-line-2); background: var(--dps-surface-2); } .dps-table tfoot td.dps-num { text-align: right; font-family: var(--dps-font-mono); } /* Linha vedada (ex.: item cancelado/indeferido, mantido para rastreio) */ .dps-table tr.dps-row--vedado td { opacity: .62; } .dps-table tr.dps-row--vedado td.dps-num { text-decoration: line-through; } /* ========================================================================== 10) KPI — .dps-kpi + elementos. ========================================================================== */ .dps-kpi { padding: 20px 22px; position: relative; } .dps-kpi__label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dps-slate-2); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } /* Corpo do número reduzido em 30% em relação ao protótipo (1,85rem → 1,3rem): os rótulos dos KPIs desta tela são longos e o número competia com eles. */ .dps-kpi__valor { font-family: var(--dps-font-mono); font-size: 1.3rem; font-weight: 600; color: var(--dps-ink); line-height: 1; letter-spacing: -.02em; } /* Prefixo monetário ("R$") e sufixo de unidade ("%") em corpo menor, sem competir com o número — port de .kpi .value .cur do protótipo. */ .dps-kpi__prefixo { font-size: .63rem; color: var(--dps-slate-2); margin-right: 3px; } .dps-kpi__sufixo { font-size: .7rem; color: var(--dps-slate-2); margin-left: 2px; } .dps-kpi__detalhe { font-size: .76rem; color: var(--dps-slate-2); margin-top: 9px; display: flex; align-items: center; gap: 6px; } .dps-kpi__icone { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--dps-gold-050); color: var(--dps-gold-700); float: right; } /* Tons opcionais para uso em .dps-kpi__valor / .dps-kpi__detalhe */ .dps-tone--ok { color: var(--dps-ok); } .dps-tone--warn { color: var(--dps-warn); } .dps-tone--crit { color: var(--dps-crit); } .dps-tone--info { color: var(--dps-info); } /* ========================================================================== 11) PILL — .dps-pill + variantes. ========================================================================== */ .dps-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: 4px 11px; border-radius: 30px; border: 1px solid transparent; white-space: nowrap; } .dps-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .dps-pill--ok { background: var(--dps-ok-bg); color: var(--dps-ok); border-color: var(--dps-ok-line); } .dps-pill--warn { background: var(--dps-warn-bg); color: var(--dps-warn); border-color: var(--dps-warn-line); } .dps-pill--crit { background: var(--dps-crit-bg); color: var(--dps-crit); border-color: var(--dps-crit-line); } .dps-pill--info { background: var(--dps-info-bg); color: var(--dps-info); border-color: var(--dps-info-line); } .dps-pill--neutral { background: var(--dps-paper-2); color: var(--dps-slate); border-color: var(--dps-line-2); } /* ========================================================================== 12) CALLOUT — .dps-callout + variantes. ========================================================================== */ .dps-callout { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--dps-radius-sm); border: 1px solid; font-size: .85rem; line-height: 1.5; } .dps-callout__titulo { font-weight: 700; margin-bottom: 3px; } .dps-callout--warn { background: var(--dps-warn-bg); border-color: var(--dps-warn-line); color: #6e5208; } .dps-callout--crit { background: var(--dps-crit-bg); border-color: var(--dps-crit-line); color: #7a2018; } .dps-callout--info { background: var(--dps-info-bg); border-color: var(--dps-info-line); color: #1f3f6e; } .dps-callout--ok { background: var(--dps-ok-bg); border-color: var(--dps-ok-line); color: #1d5239; } /* ========================================================================== 13) TAGLAW — .dps-taglaw (referência normativa, ex.: "Art. 15, CN-CNJ 227"). ========================================================================== */ .dps-taglaw { display: inline-block; font-size: .66rem; font-weight: 600; color: var(--dps-gold-700); background: var(--dps-gold-050); border: 1px solid var(--dps-gold-300); padding: 2px 8px; border-radius: 6px; font-family: var(--dps-font-mono); white-space: nowrap; } /* ========================================================================== 14) GAUGE — .dps-gauge (donut SVG). Cor do arco por classe modificadora, escolhida no code-behind pela faixa de cobertura: >=100% ok, >=85% warn (dourado), abaixo disso crit. GOTCHA (herdado do protótipo): wrapper position:relative + texto em position:absolute;inset:0 — não usar margin-left negativo nem flex+gap no wrapper, ou o percentual descentraliza. ========================================================================== */ .dps-gauge { position: relative; margin: 0 auto; } .dps-gauge__svg { display: block; transform: rotate(-90deg); } .dps-gauge__trilho { stroke: var(--dps-paper-2); } .dps-gauge__arco--ok { stroke: var(--dps-ok); } .dps-gauge__arco--warn { stroke: var(--dps-gold-600); } .dps-gauge__arco--crit { stroke: var(--dps-crit); } .dps-gauge__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* O corpo vem do componente (--dps-gauge-fs, 18% do diâmetro); 1.7rem é só o fallback de quem renderizar o gauge sem a variável. */ .dps-gauge__pct { font-family: var(--dps-font-mono); font-size: var(--dps-gauge-fs, 1.7rem); font-weight: 600; color: var(--dps-ink); line-height: 1; } .dps-gauge__legenda { font-size: .76rem; color: var(--dps-slate-2); margin-top: 2px; } /* ========================================================================== 15) TIMELINE — .dps-timeline + itens (concluído / atual / futuro). ========================================================================== */ .dps-timeline { position: relative; padding-left: 26px; list-style: none; margin: 0; } .dps-timeline::before { content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--dps-line-2); } .dps-timeline__item { position: relative; padding: 0 0 22px 8px; } .dps-timeline__item::before { content: ""; position: absolute; left: -22px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--dps-surface); border: 2px solid var(--dps-line-2); } .dps-timeline__item--done::before { background: var(--dps-ok); border-color: var(--dps-ok); } .dps-timeline__item--current::before { background: var(--dps-gold-500); border-color: var(--dps-gold-600); box-shadow: 0 0 0 4px var(--dps-gold-050); } .dps-timeline__item--future { opacity: .5; } .dps-timeline__titulo { font-size: .88rem; color: var(--dps-ink); font-weight: 600; } .dps-timeline__when { font-family: var(--dps-font-mono); font-size: .7rem; color: var(--dps-slate-2); } .dps-timeline__desc { margin: 4px 0 0; font-size: .8rem; color: var(--dps-slate); } /* ========================================================================== 16) STEPPER — .dps-stepper + passos (concluído / ativo). ========================================================================== */ .dps-stepper { display: flex; gap: 0; margin-bottom: 26px; flex-wrap: wrap; } .dps-step { display: flex; align-items: center; gap: 11px; padding: 12px 20px 12px 16px; background: var(--dps-surface); border: 1px solid var(--dps-line); position: relative; cursor: pointer; flex: 1; min-width: 150px; } .dps-step:first-child { border-radius: var(--dps-radius) 0 0 var(--dps-radius); } .dps-step:last-child { border-radius: 0 var(--dps-radius) var(--dps-radius) 0; } .dps-step + .dps-step { border-left: none; } .dps-step__num { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; display: grid; place-items: center; font-weight: 700; font-size: .82rem; background: var(--dps-paper-2); color: var(--dps-slate-2); border: 1px solid var(--dps-line-2); } .dps-step__titulo { line-height: 1.1; } .dps-step__titulo b { font-size: .82rem; display: block; color: var(--dps-ink); } .dps-step__titulo span { font-size: .67rem; color: var(--dps-slate-2); } .dps-step--done .dps-step__num { background: var(--dps-ok-bg); color: var(--dps-ok); border-color: var(--dps-ok-line); } .dps-step--active { background: var(--dps-navy-900); border-color: var(--dps-navy-900); } .dps-step--active .dps-step__num { background: var(--dps-gold-500); color: var(--dps-navy-900); border-color: var(--dps-gold-600); } .dps-step--active .dps-step__titulo b { color: #fff; } .dps-step--active .dps-step__titulo span { color: var(--dps-gold-300); } /* ========================================================================== 17) MODAL — .dps-modal-overlay + .dps-modal. Rodapé de ações segue o padrão da casa: botão principal à ESQUERDA, cancelar à DIREITA, grupo alinhado à direita (flex-end) — ver .dps-modal__foot. ========================================================================== */ .dps-modal-overlay { position: fixed; inset: 0; background: rgba(11,23,51,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .dps-modal { background: var(--dps-surface); border: 1px solid var(--dps-line); border-radius: var(--dps-radius); box-shadow: var(--dps-shadow-lg); width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; } .dps-modal__head { padding: 18px 22px; border-bottom: 1px solid var(--dps-line); } .dps-modal__head h3 { font-family: var(--dps-font-display); font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--dps-ink); } .dps-modal__body { padding: 20px 22px; overflow-y: auto; } .dps-modal__foot { padding: 16px 22px; border-top: 1px solid var(--dps-line); display: flex; justify-content: flex-end; gap: 10px; } /* ========================================================================== 18) BOTÕES — .dps-btn + variantes. ========================================================================== */ .dps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--dps-font-body); font-size: .84rem; font-weight: 600; padding: 9px 18px; border-radius: var(--dps-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .16s, border-color .16s, color .16s, box-shadow .16s; } .dps-btn--primary { background: var(--dps-navy-900); color: #fff; border-color: var(--dps-navy-900); } .dps-btn--primary:hover, .dps-btn--primary:focus-visible { background: var(--dps-navy-800); } .dps-btn--gold { background: linear-gradient(180deg, var(--dps-gold-500), var(--dps-gold-600)); color: var(--dps-navy-900); border-color: var(--dps-gold-600); } .dps-btn--gold:hover, .dps-btn--gold:focus-visible { box-shadow: 0 6px 16px -8px rgba(196,161,74,.7); } .dps-btn--ghost { background: transparent; color: var(--dps-slate); border-color: var(--dps-line-2); } .dps-btn--ghost:hover, .dps-btn--ghost:focus-visible { background: var(--dps-surface-2); color: var(--dps-ink); border-color: var(--dps-line); } /* ========================================================================== 19) CAMPOS DE FORMULÁRIO — .dps-field, .dps-input, .dps-select, .dps-textarea. ========================================================================== */ .dps-field { display: flex; flex-direction: column; gap: 5px; } .dps-field label { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dps-slate-2); } .dps-input, .dps-select, .dps-textarea { font-family: var(--dps-font-body); font-size: .87rem; color: var(--dps-ink); background: var(--dps-surface); border: 1px solid var(--dps-line-2); border-radius: var(--dps-radius-sm); padding: 8px 12px; } .dps-textarea { resize: vertical; min-height: 90px; } .dps-input:focus, .dps-select:focus, .dps-textarea:focus { outline: none; border-color: var(--dps-gold-500); box-shadow: 0 0 0 3px var(--dps-gold-050); } /* ========================================================================== 20) CHIP — .dps-chip (pílula de contexto da topbar: exercício, prazo). Port de components/Chip/Chip.module.css do protótipo DST. ========================================================================== */ .dps-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--dps-surface); border: 1px solid var(--dps-line-2); border-radius: 30px; padding: 7px 14px; font-size: .8rem; font-weight: 600; color: var(--dps-slate); box-shadow: var(--dps-shadow); white-space: nowrap; } .dps-chip__ic { display: inline-flex; color: var(--dps-gold-600); } /* Valor do chip em monoespaçada (ano do exercício, data de prazo). */ .dps-chip b { font-family: var(--dps-font-mono); margin-left: 4px; color: var(--dps-ink); } /* Seletor embutido no chip (troca de exercício): sem moldura própria, para o chip continuar lendo como uma pílula única. */ .dps-chip__select { font-family: var(--dps-font-mono); font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 700; color: var(--dps-ink); background: transparent; border: none; padding: 0 0 0 4px; margin: 0; cursor: pointer; } .dps-chip__select:focus { outline: none; } .dps-chip--prazo { background: var(--dps-warn-bg); border-color: var(--dps-warn-line); color: var(--dps-warn); } .dps-chip--prazo b { color: var(--dps-warn); } /* ========================================================================== 21) BARRA — .dps-barra (trilho + preenchimento) e a linha rotulada que a acompanha no cartão de distribuição por situação. ========================================================================== */ .dps-barra { height: 8px; background: var(--dps-paper-2); border-radius: 4px; overflow: hidden; } .dps-barra__fill { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; } .dps-barra__fill--ok { background: var(--dps-ok); } .dps-barra__fill--warn { background: var(--dps-gold-600); } .dps-barra__fill--crit { background: var(--dps-crit); } .dps-barra__fill--info { background: var(--dps-info); } .dps-barra__fill--neutral { background: var(--dps-navy-300); } /* Linha "rótulo + quantidade" acima de cada barra */ .dps-barra-linha { margin-bottom: 15px; } .dps-barra-linha:last-child { margin-bottom: 0; } .dps-barra-linha__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .dps-barra-linha__nome { font-size: .84rem; font-weight: 500; display: flex; align-items: center; } .dps-barra-linha__qt { font-family: var(--dps-font-mono); font-variant-numeric: tabular-nums; font-weight: 600; } /* Quadradinho de cor à esquerda do rótulo */ .dps-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; flex-shrink: 0; } .dps-swatch--ok { background: var(--dps-ok); } .dps-swatch--warn { background: var(--dps-gold-600); } .dps-swatch--crit { background: var(--dps-crit); } .dps-swatch--info { background: var(--dps-info); } .dps-swatch--neutral { background: var(--dps-navy-300); } /* Célula de concentração da tabela: barra + percentual à direita */ .dps-concentracao { display: flex; align-items: center; gap: 10px; } .dps-concentracao .dps-barra { flex: 1; } .dps-concentracao__pct { font-family: var(--dps-font-mono); font-variant-numeric: tabular-nums; font-size: .76rem; width: 34px; text-align: right; flex-shrink: 0; } /* ========================================================================== 22) LEGENDA — .dps-legenda (linhas cor + rótulo + valor, sob o gauge). ========================================================================== */ .dps-legenda { display: flex; flex-direction: column; gap: 10px; } .dps-legenda__linha { display: flex; align-items: center; gap: 10px; font-size: .82rem; } .dps-legenda__swatch { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 12px; } .dps-legenda__label { flex: 1; color: var(--dps-slate); } .dps-legenda__valor { font-family: var(--dps-font-mono); font-variant-numeric: tabular-nums; margin-left: auto; color: var(--dps-ink); font-weight: 600; } /* Gauge centralizado no cartão de cobertura */ .dps-gauge-wrap { display: flex; justify-content: center; margin-bottom: 12px; } /* ========================================================================== 23) DOC-ROW — .dps-doc-linha (itens de "Ações pendentes": contador circular, descrição e ação opcional à direita). ========================================================================== */ .dps-doc-linha { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dps-line); } .dps-doc-linha:last-child { border-bottom: none; padding-bottom: 0; } .dps-doc-linha__ic { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--dps-surface-2); color: var(--dps-slate); border: 1px solid var(--dps-line); font-family: var(--dps-font-mono); font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 700; flex-shrink: 0; } .dps-doc-linha__ic--warn { background: var(--dps-warn-bg); color: var(--dps-warn); border-color: var(--dps-warn-line); } .dps-doc-linha__ic--info { background: var(--dps-info-bg); color: var(--dps-info); border-color: var(--dps-info-line); } .dps-doc-linha__ic--crit { background: var(--dps-crit-bg); color: var(--dps-crit); border-color: var(--dps-crit-line); } .dps-doc-linha__meta { flex: 1; font-size: .875rem; color: var(--dps-ink); line-height: 1.4; } .dps-doc-linha__meta small { display: block; } /* Botão compacto usado nas ações pendentes */ .dps-btn--sm { font-size: .76rem; padding: 6px 12px; } /* ========================================================================== 24) ÍCONE — .dps-icone (SVG inline; herda a cor de quem o contém). ========================================================================== */ .dps-icone { display: block; flex-shrink: 0; } /* ========================================================================== 25) RESPONSIVO — breakpoints 1100px / 720px do protótipo. ========================================================================== */ @media (max-width: 1100px) { .dps-g-3, .dps-g-4 { grid-template-columns: repeat(2, 1fr); } .dps-span-2 { grid-column: auto; } .dps-content { padding: 24px 22px 48px; } .dps-topbar { margin: -24px -22px 20px; padding-left: 22px; padding-right: 22px; } } @media (max-width: 720px) { .dps-g-2, .dps-g-3, .dps-g-4 { grid-template-columns: 1fr; } /* Sidebar deixa de ser coluna fixa e empilha no topo do conteúdo. */ .dps-shell { flex-direction: column; } .dps-sidebar { width: 100%; flex: 0 0 auto; position: static; height: auto; box-shadow: none; border-right: none; border-bottom: 1px solid rgba(196,161,74,.22); } .dps-sidebar__voltar { padding-top: 10px; } .dps-nav { overflow-y: visible; } .dps-nav__group { margin-top: 8px; } .dps-content { padding: 18px 16px 40px; } .dps-topbar { margin: -18px -16px 18px; padding-left: 16px; padding-right: 16px; flex-wrap: wrap; } .dps-topbar__h2 { font-size: 1.3rem; } /* Barra de concentração empilha sob o percentual em tela estreita. */ .dps-concentracao { flex-direction: column; align-items: flex-start; gap: 4px; } .dps-concentracao .dps-barra { width: 100%; } .dps-concentracao__pct { width: auto; } .dps-stepper { flex-direction: column; } .dps-step:first-child { border-radius: var(--dps-radius) var(--dps-radius) 0 0; } .dps-step:last-child { border-radius: 0 0 var(--dps-radius) var(--dps-radius); } .dps-step + .dps-step { border-left: 1px solid var(--dps-line); border-top: none; } }