/* ========================================================================= TOKENS — 7 temas (RGB sem unidade, tokens --snx-*) Tema controla SOMENTE cor (paleta). Tipografia (UI + mono) e escolhida separadamente pelo usuario via PreferenciasUsuarioService — aplicada via `` no shell. ========================================================================= */ :root{ /* emerald (default) — espelho do bloco [data-theme="emerald"] refinado */ --snx-app: 243 248 246; --snx-surface: 255 255 255; --snx-surface-muted: 248 251 249; --snx-surface-soft: 237 246 241; --snx-surface-sunk: 228 240 233; --snx-strong: 15 42 32; --snx-muted: 82 106 96; --snx-subtle: 132 158 148; --snx-border-default: 210 226 218; --snx-border-strong: 184 207 195; --snx-primary: 13 120 78; --snx-primary-hover: 10 96 61; --snx-primary-soft: 216 238 225; --snx-on-primary: 255 255 255; --snx-success: 22 130 78; --snx-warning: 184 117 22; --snx-danger: 180 40 48; --snx-info: 36 112 155; --snx-success-soft: 214 237 222; --snx-warning-soft: 245 231 204; --snx-danger-soft: 245 216 218; --snx-info-soft: 214 231 241; --snx-chrome-bg: 13 76 58; --snx-chrome-bg-soft: 18 94 72; --snx-chrome-text: 236 245 241; --snx-chrome-muted: 157 192 176; --snx-chrome-border: 32 96 74; --snx-chrome-active: 255 255 255; --snx-shadow: 15 42 32; /* dimensões */ --snx-row: 32px; --snx-row-sm: 28px; --snx-row-lg: 36px; --snx-radius-sm: 4px; --snx-radius: 3px; --snx-radius-2: 6px; --snx-radius-lg: 10px; --snx-shadow-sm: 0 1px 0 rgb(var(--snx-shadow) / .04); --snx-shadow-lg: 0 6px 24px rgb(var(--snx-shadow) / .06), 0 2px 6px rgb(var(--snx-shadow) / .04); --snx-sidebar-width: 15.5rem; --snx-mural-sidebar: 280px; --snx-fixed-actions-height: 56px; /* paleta de avatar (mural §17.12) — selecionada por hash determinístico do canalId/userId */ --snx-avatar-1: 42 111 79; --snx-avatar-2: 122 92 46; --snx-avatar-3: 61 90 130; --snx-avatar-4: 94 58 130; --snx-avatar-5: 122 61 61; --snx-avatar-6: 160 80 48; --snx-avatar-7: 47 116 130; --snx-avatar-8: 130 76 110; /* Tipografia — defaults (Geist + JetBrains Mono). Temas controlam SO COR; o usuario escolhe as fontes em /app/configuracoes/aparencia, e o ControllerAdvice aplica via ``, que sobrescreve estes defaults para a sessao do usuario. */ --snx-font-ui: "Geist", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --snx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } [data-theme="emerald"]{ /* EMERALD — refinamento premium do tema institucional default. Redeclaracao explicita necessaria para que `
` aninhado dentro de `` consiga "voltar" ao default (preview da galeria em /app/configuracoes/aparencia). Calibrado para contraste AAA no texto principal (#0f2a20 sobre #f3f8f6 ~13:1), hierarquia tonal clara em 5 niveis de superficie, borders firmes para legibilidade de listas/tabelas. */ /* Superficies: 5 niveis tonais bem separados */ --snx-app: 243 248 246; /* fundo da página — sage cream */ --snx-surface: 255 255 255; /* cards/painéis — true white pop */ --snx-surface-muted: 248 251 249; /* distinta de app (era idêntica) */ --snx-surface-soft: 237 246 241; /* hover de itens */ --snx-surface-sunk: 228 240 233; /* recessos profundos */ /* Texto: hierarquia AAA no principal */ --snx-strong: 15 42 32; /* 13:1 vs app — AAA */ --snx-muted: 82 106 96; /* 5.7:1 vs app — AA */ --snx-subtle: 132 158 148; /* labels/dicas */ /* Borders: firmes para tables/listas */ --snx-border-default: 210 226 218; /* firmeza visível */ --snx-border-strong: 184 207 195; /* contorno de elementos focados */ /* Primary verde institucional */ --snx-primary: 13 120 78; /* sindicato green */ --snx-primary-hover: 10 96 61; /* darken para hover/pressed */ --snx-primary-soft: 216 238 225; /* pastel verde para bg selecionado */ --snx-on-primary: 255 255 255; /* Status: paleta saturada para alta legibilidade */ --snx-success: 22 130 78; --snx-warning: 184 117 22; --snx-danger: 180 40 48; --snx-info: 36 112 155; --snx-success-soft: 214 237 222; --snx-warning-soft: 245 231 204; --snx-danger-soft: 245 216 218; --snx-info-soft: 214 231 241; /* Chrome (sidebar/footer): deep emerald */ --snx-chrome-bg: 13 76 58; --snx-chrome-bg-soft: 18 94 72; /* lift para hover */ --snx-chrome-text: 236 245 241; --snx-chrome-muted: 157 192 176; --snx-chrome-border: 32 96 74; --snx-chrome-active: 255 255 255; /* brilho do item ativo */ --snx-shadow: 15 42 32; } /* ========================================================================= OCEAN — refinamento premium da paleta turquesa marítima. Calibrado para contraste AAA no texto (#0e2830 sobre #eef7f9 ~13:1). Status definidos explicitamente (não mais herdados de :root emerald), superfícies em 5 níveis ordenados, borders firmes. ========================================================================= */ [data-theme="ocean"]{ /* Superfícies: 5 níveis com transições suaves de tom teal-cream */ --snx-app: 238 247 249; /* fundo — cream marítimo */ --snx-surface: 252 254 254; /* cards — near white */ --snx-surface-muted: 246 251 252; /* meio-termo (era idêntica a app) */ --snx-surface-soft: 226 240 244; /* hover */ --snx-surface-sunk: 210 230 236; /* sunk profundo */ /* Texto: contraste AAA */ --snx-strong: 14 40 48; /* 13:1 vs app — AAA */ --snx-muted: 70 110 122; /* 5.5:1 — AA */ --snx-subtle: 122 158 170; /* Borders firmes */ --snx-border-default: 195 218 224; --snx-border-strong: 170 200 210; /* Primary teal marítimo */ --snx-primary: 22 116 134; --snx-primary-hover: 14 92 108; --snx-primary-soft: 210 232 238; --snx-on-primary: 252 254 254; /* Status: paleta saturada coerente com tons frios do Ocean */ --snx-success: 17 130 96; /* teal-green */ --snx-warning: 200 130 30; /* amber */ --snx-danger: 180 50 60; /* coral red */ --snx-info: 22 116 134; /* mesmo do primary (Ocean é teal-themed) */ --snx-success-soft: 215 238 230; --snx-warning-soft: 248 230 200; --snx-danger-soft: 248 218 222; --snx-info-soft: 210 232 238; /* Chrome (sidebar/footer): deep ocean teal */ --snx-chrome-bg: 14 70 84; --snx-chrome-bg-soft: 22 88 104; /* lift para hover */ --snx-chrome-text: 224 240 246; --snx-chrome-muted: 144 178 192; --snx-chrome-border: 28 96 114; --snx-chrome-active: 255 255 255; --snx-shadow: 14 40 48; } /* ========================================================================= WIN10 — Flat moderno (categoria ESTILO). Azul institucional #0078D7, cantos quase retos (2px), sombras sutis. Sem gradientes. ========================================================================= */ [data-theme="win10"]{ --snx-app: 243 243 243; --snx-surface: 255 255 255; --snx-surface-muted: 248 248 248; --snx-surface-soft: 240 240 240; --snx-surface-sunk: 230 230 230; --snx-strong: 32 32 32; --snx-muted: 96 96 96; --snx-subtle: 138 138 138; --snx-border-default: 217 217 217; --snx-border-strong: 173 173 173; --snx-primary: 0 120 215; --snx-primary-hover: 0 99 177; --snx-primary-soft: 207 232 249; --snx-on-primary: 255 255 255; --snx-success: 16 124 16; --snx-warning: 202 122 0; --snx-danger: 196 43 28; --snx-info: 0 120 215; --snx-success-soft: 220 240 220; --snx-warning-soft: 252 232 196; --snx-danger-soft: 252 220 216; --snx-info-soft: 207 232 249; /* taskbar Win10 default = preto translucido — chrome bem escuro */ --snx-chrome-bg: 32 32 32; --snx-chrome-bg-soft: 44 44 44; --snx-chrome-text: 255 255 255; --snx-chrome-muted: 168 168 168; --snx-chrome-border: 16 16 16; --snx-chrome-active: 0 120 215; --snx-shadow: 0 0 0; --snx-radius-sm: 0; --snx-radius: 2px; --snx-radius-2: 2px; --snx-radius-lg: 4px; --snx-shadow-lg: 0 2px 8px rgb(0 0 0 / .12), 0 1px 2px rgb(0 0 0 / .08); } /* Win10 e flat — overrides minimos. Botoes com border 1px, hover muda fundo (sem gradient). Foco com outline azul solido (focus ring Win10). */ [data-theme="win10"] .btn{ border: 1px solid rgb(var(--snx-border-strong)); box-shadow: none; font-weight: 500; } [data-theme="win10"] .btn:hover{ background: rgb(var(--snx-surface-soft)); } [data-theme="win10"] .btn--primary{ background: rgb(var(--snx-primary)); color: rgb(255 255 255); border: 1px solid rgb(var(--snx-primary)); } [data-theme="win10"] .btn--primary:hover{ background: rgb(var(--snx-primary-hover)); border-color: rgb(var(--snx-primary-hover)); } [data-theme="win10"] .f__input:focus, [data-theme="win10"] .btn:focus-visible{ outline: 2px solid rgb(var(--snx-primary)); outline-offset: 1px; box-shadow: none; } [data-theme="win10"] .panel, [data-theme="win10"] .kpi{ box-shadow: 0 1px 3px rgb(0 0 0 / .08); } [data-theme="win10"] .sb, [data-theme="win10"] .tb{ box-shadow: none; border-color: rgb(var(--snx-chrome-border)); } /* ========================================================================= HIGH_CONTRAST — acessibilidade WCAG AAA (categoria ESTILO). Preto puro sobre branco puro + amarelo de seguranca. Bordas grossas, fonte 1.15x, peso 600+ em tudo, foco com outline 4px amarelo. ========================================================================= */ [data-theme="high_contrast"]{ --snx-app: 255 255 255; --snx-surface: 255 255 255; --snx-surface-muted: 248 248 248; --snx-surface-soft: 240 240 240; --snx-surface-sunk: 230 230 230; --snx-strong: 0 0 0; --snx-muted: 32 32 32; --snx-subtle: 80 80 80; --snx-border-default: 0 0 0; --snx-border-strong: 0 0 0; --snx-primary: 0 0 0; --snx-primary-hover: 32 32 32; --snx-primary-soft: 255 215 0; --snx-on-primary: 255 215 0; --snx-success: 0 96 0; --snx-warning: 168 96 0; --snx-danger: 168 0 0; --snx-info: 0 64 168; --snx-success-soft: 220 240 220; --snx-warning-soft: 252 232 196; --snx-danger-soft: 252 220 220; --snx-info-soft: 220 232 252; --snx-chrome-bg: 0 0 0; --snx-chrome-bg-soft: 16 16 16; --snx-chrome-text: 255 255 255; --snx-chrome-muted: 220 220 220; --snx-chrome-border: 0 0 0; --snx-chrome-active: 255 215 0; --snx-shadow: 0 0 0; --snx-radius-sm: 0; --snx-radius: 2px; --snx-radius-2: 2px; --snx-radius-lg: 4px; --snx-shadow-sm: none; --snx-shadow-lg: none; } [data-theme="high_contrast"] body{ font-size: 15px; font-weight: 500; } [data-theme="high_contrast"] .btn, [data-theme="high_contrast"] .panel, [data-theme="high_contrast"] .kpi, [data-theme="high_contrast"] .f__input, [data-theme="high_contrast"] .tbl, [data-theme="high_contrast"] .alert{ border: 2px solid rgb(0 0 0); box-shadow: none; font-weight: 600; } [data-theme="high_contrast"] .btn--primary{ background: rgb(0 0 0); color: rgb(255 215 0); border: 2px solid rgb(0 0 0); font-weight: 700; } [data-theme="high_contrast"] .btn--primary:hover{ background: rgb(255 215 0); color: rgb(0 0 0); } [data-theme="high_contrast"] .btn:focus-visible, [data-theme="high_contrast"] .f__input:focus{ outline: 4px solid rgb(255 215 0); outline-offset: 2px; box-shadow: none; } [data-theme="high_contrast"] h1, [data-theme="high_contrast"] h2, [data-theme="high_contrast"] .ph__title{ font-weight: 800; } /* ========================================================================= SOLARIZED LIGHT — paleta classica de IDE (categoria ESTILO). Bege quente #FDF6E3 + tons calibrados para legibilidade longa (Ethan Schoonover, MIT). Source Code Pro mono via Google Fonts. Vibe: IDE de programador veterano. ========================================================================= */ [data-theme="solarized"]{ /* SOLARIZED LIGHT — refinamento premium da paleta clássica de Ethan Schoonover. Inversão corrigida: surface agora é mais claro que app (cards "pop" sobre a página bege quente). Surface-muted distinto (era duplicado), status colors mantidos com paleta oficial Solarized. Chrome em base02 deep teal, active item em base3 cream brilhante. */ /* Superfícies: 5 níveis (base2 page < base3 surface — convenção padrão). A versão anterior tinha surface DARKER que app, contra-intuitivo. */ --snx-app: 238 232 213; /* base2 #EEE8D5 — page bg */ --snx-surface: 253 246 227; /* base3 #FDF6E3 — cards pop */ --snx-surface-muted: 245 239 220; /* meio-termo (era = surface) */ --snx-surface-soft: 230 224 204; /* hover */ --snx-surface-sunk: 220 214 192; /* sunk profundo */ /* Texto: paleta base Solarized */ --snx-strong: 88 110 117; /* base01 #586E75 — 6.5:1 vs app — AA */ --snx-muted: 101 123 131; /* base00 #657B83 — 5.2:1 — AA */ --snx-subtle: 147 161 161; /* base1 #93A1A1 */ /* Borders firmes para visual "IDE" */ --snx-border-default: 215 209 187; --snx-border-strong: 147 161 161; /* base1 — contornos fortes */ /* Primary blue Solarized */ --snx-primary: 38 139 210; /* #268BD2 */ --snx-primary-hover: 22 116 184; --snx-primary-soft: 215 230 240; --snx-on-primary: 253 246 227; /* base3 cream sobre azul */ /* Status: paleta oficial Solarized accent */ --snx-success: 133 153 0; /* green #859900 */ --snx-warning: 181 137 0; /* yellow #B58900 */ --snx-danger: 220 50 47; /* red #DC322F */ --snx-info: 42 161 152; /* cyan #2AA198 */ --snx-success-soft: 226 232 200; --snx-warning-soft: 244 232 200; --snx-danger-soft: 246 216 215; --snx-info-soft: 214 232 230; /* Chrome (sidebar/footer): base02 deep teal — vibe IDE */ --snx-chrome-bg: 7 54 66; /* base02 #073642 */ --snx-chrome-bg-soft: 20 70 84; /* lift para hover */ --snx-chrome-text: 253 246 227; /* base3 cream brilhante */ --snx-chrome-muted: 147 161 161; /* base1 — non-active nav */ --snx-chrome-border: 0 43 54; /* base03 #002B36 */ --snx-chrome-active: 253 246 227; /* base3 cream — destaque ativo (era base blue) */ --snx-shadow: 7 54 66; /* Cantos retos sutis, sombra discreta — visual de painel de IDE */ --snx-radius-sm: 2px; --snx-radius: 3px; --snx-radius-2: 4px; --snx-radius-lg: 6px; --snx-shadow-lg: 0 1px 2px rgb(7 54 66 / .12); } /* bordas finas + sombra discreta — visual de painel de IDE */ [data-theme="solarized"] .btn, [data-theme="solarized"] .panel, [data-theme="solarized"] .kpi, [data-theme="solarized"] .f__input, [data-theme="solarized"] .tbl, [data-theme="solarized"] .alert{ border: 1px solid rgb(var(--snx-border-strong)); box-shadow: none; } [data-theme="solarized"] .btn--primary{ background: rgb(var(--snx-primary)); color: rgb(var(--snx-on-primary)); border-color: rgb(var(--snx-primary)); font-weight: 500; } [data-theme="solarized"] .btn--primary:hover{ background: rgb(var(--snx-primary-hover)); border-color: rgb(var(--snx-primary-hover)); } [data-theme="solarized"] .btn:focus-visible, [data-theme="solarized"] .f__input:focus{ outline: 2px solid rgb(var(--snx-primary)); outline-offset: 1px; box-shadow: none; } /* mono em headings tambem (coerencia com IDE) */ [data-theme="solarized"] h1, [data-theme="solarized"] h2, [data-theme="solarized"] .ph__title{ font-weight: 600; letter-spacing: -.01em; } /* ========================================================================= NORD — paleta artica (Arctic, north-bluish) escura. Acento ciano frio (#88c0d0). Modo escuro sereno para uso prolongado. ========================================================================= */ [data-theme="nord"]{ --snx-app: 46 52 64; --snx-surface: 59 66 82; --snx-surface-muted: 67 76 94; --snx-surface-soft: 76 86 106; --snx-surface-sunk: 36 42 54; --snx-strong: 236 239 244; --snx-muted: 216 222 233; --snx-subtle: 180 195 215; --snx-border-default: 67 76 94; --snx-border-strong: 76 86 106; --snx-primary: 136 192 208; --snx-primary-hover: 129 161 193; --snx-primary-soft: 67 76 94; --snx-on-primary: 46 52 64; --snx-success: 163 190 140; --snx-warning: 235 203 139; --snx-danger: 191 97 106; --snx-info: 136 192 208; --snx-success-soft: 56 76 56; --snx-warning-soft: 80 70 36; --snx-danger-soft: 76 36 38; --snx-info-soft: 28 56 64; --snx-chrome-bg: 36 42 54; --snx-chrome-bg-soft: 46 52 64; --snx-chrome-text: 236 239 244; --snx-chrome-muted: 180 195 215; --snx-chrome-border: 28 32 42; --snx-chrome-active: 136 192 208; --snx-shadow: 0 0 0; } /* ========================================================================= DRACULA — paleta classica (draculatheme.com) escura com acento lilas (#bd93f9). Contrastes saturados, identidade vibrante. ========================================================================= */ [data-theme="dracula"]{ --snx-app: 40 42 54; --snx-surface: 33 34 44; --snx-surface-muted: 50 52 65; --snx-surface-soft: 68 71 90; --snx-surface-sunk: 24 25 33; --snx-strong: 248 248 242; --snx-muted: 205 206 209; --snx-subtle: 98 114 164; --snx-border-default: 68 71 90; --snx-border-strong: 98 114 164; --snx-primary: 189 147 249; --snx-primary-hover: 167 122 234; --snx-primary-soft: 68 71 90; --snx-on-primary: 40 42 54; --snx-success: 80 250 123; --snx-warning: 255 184 108; --snx-danger: 255 85 85; --snx-info: 139 233 253; --snx-success-soft: 26 64 36; --snx-warning-soft: 76 50 30; --snx-danger-soft: 76 36 36; --snx-info-soft: 28 56 64; --snx-chrome-bg: 33 34 44; --snx-chrome-bg-soft: 50 52 65; --snx-chrome-text: 248 248 242; --snx-chrome-muted: 145 156 185; --snx-chrome-border: 24 25 33; --snx-chrome-active: 189 147 249; --snx-shadow: 0 0 0; } /* ========================================================================= GRUVBOX — paleta retro warm (github.com/morhetz/gruvbox). Variante dark medium: fundo marrom escuro #282828, acento amarelo mostarda #d79921. Tons terra confortaveis, baixa fadiga ocular. ========================================================================= */ [data-theme="gruvbox"]{ --snx-app: 40 40 40; --snx-surface: 50 48 47; --snx-surface-muted: 60 56 54; --snx-surface-soft: 80 73 69; --snx-surface-sunk: 29 32 33; --snx-strong: 235 219 178; --snx-muted: 189 174 147; --snx-subtle: 146 131 116; --snx-border-default: 60 56 54; --snx-border-strong: 80 73 69; --snx-primary: 215 153 33; --snx-primary-hover: 250 189 47; --snx-primary-soft: 60 56 54; --snx-on-primary: 40 40 40; --snx-success: 152 151 26; --snx-warning: 215 153 33; --snx-danger: 204 36 29; --snx-info: 69 133 136; --snx-success-soft: 50 60 24; --snx-warning-soft: 76 56 18; --snx-danger-soft: 76 24 22; --snx-info-soft: 28 56 58; --snx-chrome-bg: 29 32 33; --snx-chrome-bg-soft: 40 40 40; --snx-chrome-text: 235 219 178; --snx-chrome-muted: 146 131 116; --snx-chrome-border: 20 22 22; --snx-chrome-active: 215 153 33; --snx-shadow: 0 0 0; } /* ========================================================================= GRUVBOX LIGHT — variante clara do Gruvbox (light medium). Fundo papel envelhecido #fbf1c7, acento mostarda #b57614. Mesma identidade warm em modo claro, baixa fadiga ocular. ========================================================================= */ [data-theme="gruvbox_light"]{ --snx-app: 251 241 199; --snx-surface: 253 247 218; --snx-surface-muted: 235 219 178; --snx-surface-soft: 213 196 161; --snx-surface-sunk: 240 224 184; --snx-strong: 60 56 54; --snx-muted: 80 73 69; --snx-subtle: 124 111 100; --snx-border-default: 213 196 161; --snx-border-strong: 189 174 147; --snx-primary: 181 118 20; --snx-primary-hover: 152 96 16; --snx-primary-soft: 235 219 178; --snx-on-primary: 251 241 199; --snx-success: 121 116 14; --snx-warning: 181 118 20; --snx-danger: 157 0 6; --snx-info: 7 102 120; --snx-success-soft: 232 232 188; --snx-warning-soft: 244 224 165; --snx-danger-soft: 245 210 210; --snx-info-soft: 210 232 238; --snx-chrome-bg: 60 56 54; --snx-chrome-bg-soft: 80 73 69; --snx-chrome-text: 251 241 199; --snx-chrome-muted: 213 196 161; --snx-chrome-border: 40 40 40; --snx-chrome-active: 181 118 20; --snx-shadow: 60 56 54; } /* ========================================================================= ROSÉ PINE DAWN — refinamento premium da paleta oficial (rosepinetheme.com). Light com base #faf4ed e acento Iris #907aa9. Calibrado para contraste AA+ no texto principal (#4b4669 sobre #faf4ed = ~7.5:1), chrome em Text deep purple #575279, hierarquia tonal clara entre surface/muted/soft/sunk. Borders mais firmes para legibilidade de listas e tabelas. ========================================================================= */ [data-theme="rose_pine_dawn"]{ /* Superfícies: 4 níveis tonais bem separados para layering em painéis/cards */ --snx-app: 250 244 237; /* Base #faf4ed — fundo da página */ --snx-surface: 255 250 243; /* Surface #fffaf3 — cards e painéis */ --snx-surface-muted: 244 235 226; /* meio-termo entre Base e Overlay */ --snx-surface-soft: 238 228 218; /* Overlay refinado — hover de itens */ --snx-surface-sunk: 228 215 203; /* sunk profundo — recessos visíveis */ /* Texto: hierarquia com contraste AA+ no principal e muted */ --snx-strong: 75 70 105; /* darken de Text #575279 → #4b4669, 7.5:1 vs Base */ --snx-muted: 121 117 147; /* Subtle #797593 — 5.5:1 (AA pass) */ --snx-subtle: 152 147 165; /* Muted #9893a5 — labels e dicas */ /* Borders: firmes para separar elementos em listas e tabelas */ --snx-border-default: 226 215 202; /* visível mas suave */ --snx-border-strong: 198 184 169; /* claro contorno de elementos focados */ /* Primary Iris: tom oficial + hover mais saturado */ --snx-primary: 144 122 169; /* Iris #907aa9 */ --snx-primary-hover: 117 96 145; /* Iris escurecido para hover/pressed */ --snx-primary-soft: 232 222 240; /* light Iris pastel para selecionado bg */ --snx-on-primary: 255 250 243; /* Base cream — texto sobre Iris (legível) */ /* Status: Pine para success, Gold warning, Love danger, Foam info */ --snx-success: 40 105 131; /* Pine #286983 — deep teal "go" */ --snx-warning: 234 157 52; /* Gold #ea9d34 */ --snx-danger: 180 99 122; /* Love #b4637a */ --snx-info: 86 148 159; /* Foam #56949f */ --snx-success-soft: 218 232 238; /* light Pine — bg de pills de sucesso */ --snx-warning-soft: 252 232 200; /* light Gold */ --snx-danger-soft: 245 220 224; /* light Love */ --snx-info-soft: 226 238 240; /* light Foam */ /* Chrome (sidebar/footer): Text deep purple para identidade premium */ --snx-chrome-bg: 87 82 121; /* Text #575279 — chrome principal */ --snx-chrome-bg-soft: 110 105 145; /* lift sutil para hover nos itens nav */ --snx-chrome-text: 250 244 237; /* Base cream sobre chrome — 7.5:1 */ --snx-chrome-muted: 188 184 215; /* Iris washed para itens não-ativos */ --snx-chrome-border: 65 60 95; /* darken de chrome-bg para separadores */ --snx-chrome-active: 255 250 243; /* Base cream — brilho de item ativo */ /* Shadow tint: deep purple sutil para depth premium em painéis flutuantes */ --snx-shadow: 87 82 121; } /* ========================================================================= BASE ========================================================================= */ *{ box-sizing:border-box } html,body{ margin:0; padding:0 } body{ font-family: var(--snx-font-ui); font-size: 13px; line-height: 1.4; color: rgb(var(--snx-strong)); background: rgb(var(--snx-app)); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01","cv11","tnum"; } button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer } input,select,textarea{ font:inherit; color:inherit } a{ color:inherit; text-decoration:none } .mono{ font-family: var(--snx-font-mono); font-variant-numeric: tabular-nums } /* ========================================================================= SHELL ========================================================================= */ .app{ display: grid; grid-template-columns: var(--snx-sidebar-width) 1fr; min-height: 100vh; } /* ========================================================================= SIDEBAR (fiel ao fragment antigo: abas radio + details) ========================================================================= */ .sb{ background: rgb(var(--snx-chrome-bg)); color: rgb(var(--snx-chrome-text)); border-right: 1px solid rgb(var(--snx-chrome-border)); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:hidden; } .sb__brand{ height: 52px; display:flex; align-items:center; gap:10px; padding: 0 14px; border-bottom: 1px solid rgb(var(--snx-chrome-border)); } .sb__mark{ width:26px; height:26px; border-radius:6px; background: rgb(var(--snx-chrome-bg-soft)); color: rgb(var(--snx-chrome-active)); display:grid; place-items:center; font-weight:700; font-size:11px; letter-spacing:.03em; border:1px solid rgb(var(--snx-chrome-border)); overflow:hidden; } .sb__mark img{ /* favicon.svg vem em preto (com swap automatico para branco em dark mode do navegador, irrelevante aqui pois sempre renderizamos sobre chrome escuro do tema). brightness(0)+ invert(1) forca branco solido em qualquer tema do Sindnex. */ width: 18px; height: 18px; filter: brightness(0) invert(1); } .sb__brand-name{ font-weight:600; font-size:13.5px; letter-spacing:-.01em; line-height:1 } .sb__brand-sub{ font-size:10.5px; color:rgb(var(--snx-chrome-muted)); margin-top:2px; line-height:1 } /* tabs via radio */ .sb__tabs{ display:flex; flex-direction:column; flex:1; min-height:0 } .sb__radio{ display:none } .sb__tabbar{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding: 10px 10px 6px; } .sb__tab{ height: 26px; border-radius:4px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:10px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color: rgb(var(--snx-chrome-muted)); border:1px solid transparent; cursor:pointer; } .sb__tab:hover{ color: rgb(var(--snx-chrome-active)) } #sb-tab-filiacao:checked ~ .sb__tabbar label[for="sb-tab-filiacao"], #sb-tab-operacao:checked ~ .sb__tabbar label[for="sb-tab-operacao"], #sb-tab-estrategia:checked ~ .sb__tabbar label[for="sb-tab-estrategia"]{ color: rgb(var(--snx-chrome-active)); background: rgb(var(--snx-chrome-bg-soft)); border-color: rgb(var(--snx-chrome-border)); } /* panel (scrolls) */ .sb__panel{ display:none; flex:1; min-height:0; overflow-y:auto; padding: 2px 8px 10px; scrollbar-width: thin; } #sb-tab-filiacao:checked ~ .sb__panel--filiacao{ display:block } #sb-tab-operacao:checked ~ .sb__panel--operacao{ display:block } #sb-tab-estrategia:checked ~ .sb__panel--estrategia{ display:block } .sb__panel::-webkit-scrollbar{ width:6px } .sb__panel::-webkit-scrollbar-thumb{ background: rgb(var(--snx-chrome-bg-soft)); border-radius:3px } /* group (details/summary) */ .sb__group{ margin: 2px 0; border-radius: 4px; } .sb__group > summary{ list-style:none; cursor:pointer; height: 30px; padding: 0 8px; display:flex; align-items:center; gap:10px; color: rgb(var(--snx-chrome-muted)); font-size:12px; font-weight:500; border-radius:4px; } .sb__group > summary::-webkit-details-marker{ display:none } .sb__group > summary::after{ content:""; width:6px; height:6px; margin-left:auto; border-right:1.5px solid rgb(var(--snx-chrome-muted)); border-bottom:1.5px solid rgb(var(--snx-chrome-muted)); transform: rotate(-45deg); transition: transform .15s; } .sb__group[open] > summary::after{ transform: rotate(45deg) translate(-1px,-1px) } .sb__group > summary:hover{ color: rgb(var(--snx-chrome-active)); background: rgb(var(--snx-chrome-bg-soft)) } .sb__ico{ width:20px; height:20px; flex-shrink:0; background: rgb(var(--snx-chrome-bg-soft)); color: rgb(var(--snx-chrome-active)); border-radius:4px; display:grid; place-items:center; font-size:9.5px; font-weight:700; letter-spacing:.04em; border:1px solid rgb(var(--snx-chrome-border)); } .sb__body{ padding: 2px 0 6px 8px } .sb__item{ display:flex; align-items:center; gap:10px; height: 26px; padding: 0 8px; font-size:12px; color: rgb(var(--snx-chrome-muted)); border-radius:4px; position:relative; cursor:pointer; } .sb__item:hover{ color: rgb(var(--snx-chrome-active)); background: rgb(var(--snx-chrome-bg-soft)) } .sb__item.is-active{ color: rgb(var(--snx-chrome-active)); background: rgb(var(--snx-chrome-bg-soft)); } .sb__item.is-active::before{ content:""; position:absolute; left:-8px; top:5px; bottom:5px; width:2px; border-radius:2px; background: rgb(var(--snx-primary)); } .sb__item .sb__count{ margin-left:auto; font-family: var(--snx-font-mono); font-size:10.5px; color: rgb(var(--snx-chrome-muted)); } .sb__item .sb__pill{ margin-left:auto; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; padding: 2px 5px; border-radius:3px; background: rgb(var(--snx-chrome-bg-soft)); color: rgb(var(--snx-chrome-active)); border:1px solid rgb(var(--snx-chrome-border)); } /* solo item (no group) */ .sb__solo{ display:flex; align-items:center; gap:10px; height: 30px; padding: 0 8px; margin: 2px 0; color: rgb(var(--snx-chrome-text)); font-size: 12.5px; font-weight:500; border-radius: 4px; position:relative; cursor:pointer; } .sb__solo:hover{ background: rgb(var(--snx-chrome-bg-soft)) } .sb__solo.is-active{ background: rgb(var(--snx-chrome-bg-soft)) } .sb__solo.is-active::before{ content:""; position:absolute; left:-8px; top:6px; bottom:6px; width:2px; border-radius:2px; background: rgb(var(--snx-primary)); } /* footer */ .sb__foot{ margin-top:auto; border-top: 1px solid rgb(var(--snx-chrome-border)); padding: 8px 10px; display:flex; flex-direction:column; gap:4px; } .sb__action{ display:flex; align-items:center; gap:10px; height: 30px; padding: 0 8px; border-radius:4px; color: rgb(var(--snx-chrome-text)); font-size: 12.5px; cursor:pointer; position:relative; } .sb__action:hover{ background: rgb(var(--snx-chrome-bg-soft)) } .sb__action .sb__badge{ margin-left:auto; background: rgb(var(--snx-danger)); color: rgb(var(--snx-on-primary)); font-family: var(--snx-font-mono); font-size:10px; font-weight:600; padding: 1px 6px; border-radius: 10px; min-width:18px; text-align:center; } .sb__profile{ display:flex; align-items:center; gap:10px; padding: 8px; margin-top: 6px; border-top: 1px solid rgb(var(--snx-chrome-border)); } .sb__avatar{ width:28px; height:28px; border-radius:50%; background: rgb(var(--snx-primary)); color: rgb(var(--snx-on-primary)); display:grid; place-items:center; font-size:11px; font-weight:600; flex-shrink:0; } .sb__me{ min-width:0; display:flex; flex-direction:column; line-height:1.15 } .sb__me b{ font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .sb__me span{ font-size:10.5px; color: rgb(var(--snx-chrome-muted)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .sb__profile form{ /* `display: contents` torna o form transparente ao layout flex do .sb__profile — sem isso o botao fica empacotado dentro do form (que e o flex item real) e nao consegue se posicionar contra a borda do sidebar. */ display: contents; } .sb__logout{ /* Centro alinhado com o centro do badge de notificacoes do mural. Lados-direitos estariam coincidentes em 18px da borda, mas como o botao (28px) e mais largo que o badge (~22px), compenso 3px com margin negativa para os centros baterem. */ margin-left: auto; margin-right: -3px; width: 28px; height: 28px; border-radius: 4px; display: grid; place-items: center; color: rgb(var(--snx-chrome-muted)); background: transparent; border: none; cursor: pointer; } .sb__logout svg{ width: 16px; height: 16px; } .sb__logout:hover{ background: rgb(var(--snx-chrome-bg-soft)); color: rgb(var(--snx-danger)); } /* estado vazio dentro do painel de uma aba da sidebar */ .sb__empty { margin: 8px 10px 4px; padding: 10px 12px; background: rgb(var(--snx-chrome-bg-soft)); border: 1px dashed rgb(var(--snx-chrome-border)); border-radius: var(--snx-radius); color: rgb(var(--snx-chrome-muted)); font-size: 11.5px; line-height: 1.45; } /* ========================================================================= MAIN ========================================================================= */ .main{ display:flex; flex-direction:column; min-width:0 } /* topbar */ .tb{ height: 48px; display:flex; align-items:center; gap:16px; padding: 0 20px; background: rgb(var(--snx-surface)); border-bottom: 1px solid rgb(var(--snx-border-default)); position: sticky; top:0; z-index: 30; } .crumb{ display:flex; align-items:center; gap:6px; font-size:12px; color:rgb(var(--snx-muted)) } .crumb a{ color:inherit } .crumb .sep{ color: rgb(var(--snx-subtle)) } .crumb .cur{ color: rgb(var(--snx-strong)); font-weight:500 } .tb__id{ margin-left: 4px; font-family: var(--snx-font-mono); font-size:11px; color: rgb(var(--snx-muted)); border:1px solid rgb(var(--snx-border-default)); border-radius: 3px; padding: 2px 6px; background: rgb(var(--snx-surface-muted)); } .tb__right{ margin-left:auto; display:flex; align-items:center; gap:12px } .tb__status{ display:flex; align-items:center; gap:8px; font-size: 12px; color: rgb(var(--snx-muted)); } .tb__dot{ width:7px; height:7px; border-radius:50%; background: rgb(var(--snx-success)); box-shadow: 0 0 0 3px rgb(var(--snx-success) / .2); } .tb__dot.is-saving{ background: rgb(var(--snx-warning)); box-shadow: 0 0 0 3px rgb(var(--snx-warning) / .2); animation: pulse 1s ease-in-out infinite; } @keyframes pulse{ 50%{ transform: scale(.8) } } .tb__divider{ width:1px; height:20px; background: rgb(var(--snx-border-default)) } /* ========================================================================= PAGE HEADER ========================================================================= */ .ph{ padding: 18px 24px 0; display:flex; align-items:flex-start; gap: 20px; } .ph__ava{ width: 52px; height: 52px; border-radius: var(--snx-radius-2); background: rgb(var(--snx-primary-soft)); color: rgb(var(--snx-primary)); display:grid; place-items:center; font-size: 17px; font-weight:600; border:1px solid rgb(var(--snx-border-default)); flex-shrink:0; } .ph__body{ flex:1; min-width:0 } .ph__title{ margin:0; font-size:18px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; } .pill{ font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid rgb(var(--snx-border-default)); color: rgb(var(--snx-muted)); background: rgb(var(--snx-surface-muted)); display:inline-flex; align-items:center; gap:4px; } .pill--draft{ color: rgb(var(--snx-warning)); background: rgb(var(--snx-warning-soft)); border-color: rgb(var(--snx-warning) / .35); } .pill--ok{ color: rgb(var(--snx-success)); background: rgb(var(--snx-success-soft)); border-color: rgb(var(--snx-success) / .35); } .pill--err{ color: rgb(var(--snx-danger)); background: rgb(var(--snx-danger-soft)); border-color: rgb(var(--snx-danger) / .35); } /* * §14 — Badge * * Marca de classificacao/atributo (eixo: confidencial, novo, beta, oficial), distinto * da .pill que representa eixo de status. Use .badge para marcas estaveis (sempre * presente) e .pill para estado mutavel. Anatomia identica a .pill mas com letterspacing * mais largo para enfatizar leitura horizontal. */ .badge{ font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding: 2px 7px; border-radius: 3px; border: 1px solid rgb(var(--snx-border-default)); color: rgb(var(--snx-muted)); background: rgb(var(--snx-surface-muted)); display:inline-flex; align-items:center; gap:4px; } .badge--ok{ color: rgb(var(--snx-success)); background: rgb(var(--snx-success-soft)); border-color: rgb(var(--snx-success) / .35); } .badge--warn{ color: rgb(var(--snx-warning)); background: rgb(var(--snx-warning-soft)); border-color: rgb(var(--snx-warning) / .35); } .badge--err{ color: rgb(var(--snx-danger)); background: rgb(var(--snx-danger-soft)); border-color: rgb(var(--snx-danger) / .35); } .badge--info{ color: rgb(var(--snx-info)); background: rgb(var(--snx-info-soft)); border-color: rgb(var(--snx-info) / .35); } .badge--muted{ color: rgb(var(--snx-muted)); background: rgb(var(--snx-surface-muted)); border-color: rgb(var(--snx-border-default)); } .ph__meta{ display:flex; gap: 18px; margin-top: 6px; font-family: var(--snx-font-mono); font-size: 11.5px; color: rgb(var(--snx-muted)); } .ph__meta b{ color: rgb(var(--snx-strong)); font-weight:500 } .ph__prog{ width: 220px; flex-shrink:0 } .ph__prog-lbl{ display:flex; justify-content:space-between; font-size: 11px; color: rgb(var(--snx-muted)); margin-bottom: 6px; } .ph__prog-lbl b{ color: rgb(var(--snx-strong)); font-weight:600; font-family: var(--snx-font-mono); } .ph__prog-bar{ height: 4px; border-radius: 2px; background: rgb(var(--snx-surface-sunk)); overflow:hidden; position:relative; border: 1px solid rgb(var(--snx-border-default)); } .ph__prog-bar i{ display:block; height: 100%; width: 0; background: rgb(var(--snx-primary)); border-radius: 2px; transition: width .2s ease; } .ph__prog-steps{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 6px; font-size: 10px; color: rgb(var(--snx-subtle)); } .ph__prog-steps span, .ph__prog-steps a{ text-align:center; font-family: var(--snx-font-mono); color: rgb(var(--snx-subtle)); text-decoration: none; padding: 2px 0; border-radius: 2px; transition: color .15s, background .15s; } .ph__prog-steps a:hover{ color: rgb(var(--snx-strong)); background: rgb(var(--snx-surface-muted)); } .ph__prog-steps a:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--snx-focus-ring); } .ph__prog-steps .done{ color: rgb(var(--snx-muted)); } .ph__prog-steps .cur{ color: rgb(var(--snx-primary)); font-weight:600; } /* ========================================================================= TABS ========================================================================= */ .tabs{ padding: 16px 24px 0; display:flex; align-items:flex-end; gap:0; border-bottom: 1px solid rgb(var(--snx-border-default)); position: sticky; top: 48px; background: rgb(var(--snx-surface)); z-index: 20; margin-top: 14px; } .tab{ display:inline-flex; align-items:center; gap:8px; height: 34px; padding: 0 14px; font-size: 12.5px; color: rgb(var(--snx-muted)); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space:nowrap; cursor:pointer; } .tab:hover{ color: rgb(var(--snx-strong)) } .tab.is-active{ color: rgb(var(--snx-strong)); border-color: rgb(var(--snx-primary)); font-weight: 500; } .tab .idx{ font-family: var(--snx-font-mono); font-size: 10.5px; color: rgb(var(--snx-subtle)); } .tab.is-active .idx{ color: rgb(var(--snx-primary)) } .tab .badge{ font-size: 10px; font-family: var(--snx-font-mono); background: rgb(var(--snx-surface-sunk)); color: rgb(var(--snx-muted)); border: 1px solid rgb(var(--snx-border-default)); padding: 1px 5px; border-radius: 3px; } .tab .dot{ width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--snx-danger)); } /* ========================================================================= CONTENT + SECTIONS ========================================================================= */ .content{ padding: 20px 24px calc(var(--snx-fixed-actions-height) + 24px); width: 100%; max-width: none; } .section{ margin-bottom: 24px } .section__hd{ display:flex; align-items:baseline; gap: 12px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed rgb(var(--snx-border-default)); } .section__hd h2{ margin:0; font-size: 11.5px; font-weight:600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--snx-strong)); } .section__hd p{ margin:0; font-size: 12px; color: rgb(var(--snx-muted)) } .section__hd .num{ font-family: var(--snx-font-mono); font-size: 11px; color: rgb(var(--snx-subtle)); } /* grid 12 */ .grid{ display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 14px; row-gap: 12px; } .col-2{ grid-column: span 2 } .col-3{ grid-column: span 3 } .col-4{ grid-column: span 4 } .col-5{ grid-column: span 5 } .col-6{ grid-column: span 6 } .col-7{ grid-column: span 7 } .col-8{ grid-column: span 8 } .col-9{ grid-column: span 9 } .col-12{ grid-column: span 12 } /* ========================================================================= FIELD ========================================================================= */ .f{ display:flex; flex-direction:column; gap:4px; min-width:0; position:relative } fieldset.f{ border:0; padding:0; margin:0 } fieldset.f > legend{ padding:0 } .f__lbl{ display:flex; align-items:center; justify-content:space-between; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--snx-muted)); font-weight: 500; } .f__lbl .opt{ color: rgb(var(--snx-subtle)); text-transform:none; letter-spacing:0; font-weight:400; } .f__lbl .req{ color: rgb(var(--snx-danger)); margin-left: 2px } .f__lbl .help{ width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgb(var(--snx-border-strong)); color: rgb(var(--snx-subtle)); font-size: 9px; display: inline-grid; place-items: center; cursor: help; } .f__input, .f__select{ height: var(--snx-row); border: 1px solid rgb(var(--snx-border-strong)); background: rgb(var(--snx-surface)); border-radius: var(--snx-radius); padding: 0 10px; font-size: 13px; color: rgb(var(--snx-strong)); outline: 0; width: 100%; transition: border-color .12s, box-shadow .12s, background .12s; } .f__input::placeholder{ color: rgb(var(--snx-subtle)) } .f__input:hover, .f__select:hover{ border-color: rgb(var(--snx-muted) / .5) } .f__input:focus, .f__select:focus{ border-color: rgb(var(--snx-primary)); box-shadow: 0 0 0 3px rgb(var(--snx-primary) / .2); } .f__input[readonly]{ background: rgb(var(--snx-surface-sunk)); color: rgb(var(--snx-muted)); } .f__input.is-mono{ font-family: var(--snx-font-mono); font-size: 12.5px; } .f__input.is-ok{ border-color: rgb(var(--snx-success) / .55); } .f__input.is-err{ border-color: rgb(var(--snx-danger) / .65); background: rgb(var(--snx-danger-soft) / .35); } /* wrap with prefix/suffix */ .f__wrap{ position:relative } .f__wrap.has-pfx .f__input{ padding-left: 28px } .f__pfx{ position:absolute; left:8px; top:0; height: var(--snx-row); display:grid; place-items:center; color: rgb(var(--snx-subtle)); font-size:12px; font-family: var(--snx-font-mono); } .f__wrap.has-sfx .f__input{ padding-right: 72px } .f__sfx{ position:absolute; right:0; top:0; height: var(--snx-row); padding: 0 10px; display:flex; align-items:center; gap: 4px; color: rgb(var(--snx-muted)); font-size: 11px; border-left: 1px solid rgb(var(--snx-border-default)); font-family: var(--snx-font-mono); } .f__wrap.has-tick .f__input{ padding-right: 28px } .f__tick{ position:absolute; right: 8px; top: 0; height: var(--snx-row); display:grid; place-items:center; color: rgb(var(--snx-success)); } .f__wrap.has-btn .f__input{ padding-right: 92px } .f__inline-btn{ position:absolute; right: 2px; top: 2px; height: calc(var(--snx-row) - 4px); padding: 0 10px; font-size: 11.5px; color: rgb(var(--snx-muted)); border-left: 1px solid rgb(var(--snx-border-default)); border-radius: 2px; } .f__inline-btn:hover{ color: rgb(var(--snx-strong)); background: rgb(var(--snx-surface-muted)) } /* select caret */ .f__select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgb(var(--snx-muted)) 50%), linear-gradient(135deg, rgb(var(--snx-muted)) 50%, transparent 50%); background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; } /* textarea */ .f__ta{ min-height: 86px; height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; border: 1px solid rgb(var(--snx-border-strong)); border-radius: var(--snx-radius); background: rgb(var(--snx-surface)); font-size: 13px; color: rgb(var(--snx-strong)); outline: 0; width: 100%; font-family: inherit; transition: border-color .12s, box-shadow .12s; } .f__ta:focus{ border-color: rgb(var(--snx-primary)); box-shadow: 0 0 0 3px rgb(var(--snx-primary) / .2); } .f__count{ position:absolute; right: 8px; bottom: 6px; font-family: var(--snx-font-mono); font-size: 10.5px; color: rgb(var(--snx-subtle)); background: rgb(var(--snx-surface)); padding: 1px 4px; } /* messages */ .f__msg{ min-height: 0; font-size: 11px; color: rgb(var(--snx-muted)); display:flex; align-items:center; gap:6px; font-family: var(--snx-font-mono); } .f__msg.is-ok{ color: rgb(var(--snx-success)) } .f__msg.is-err{ color: rgb(var(--snx-danger)) } .f__msg.is-warn{ color: rgb(var(--snx-warning)) } /* ========================================================================= SEGMENTED ========================================================================= */ .seg{ display:inline-flex; border: 1px solid rgb(var(--snx-border-strong)); border-radius: var(--snx-radius); background: rgb(var(--snx-surface)); height: var(--snx-row); padding: 2px; gap: 2px; width: 100%; } .seg__btn{ flex: 1; padding: 0 10px; border-radius: 2px; font-size: 12.5px; color: rgb(var(--snx-muted)); display:inline-flex; align-items:center; justify-content:center; gap:6px; } .seg__btn:hover{ color: rgb(var(--snx-strong)) } .seg__btn.is-on{ background: rgb(var(--snx-strong)); color: rgb(var(--snx-surface)); font-weight: 500; } /* ========================================================================= SWITCH ========================================================================= */ .sw{ display:inline-flex; align-items:center; gap:10px; height: var(--snx-row); } .sw input{ display:none } .sw__track{ position:relative; width: 32px; height: 18px; border-radius: 10px; background: rgb(var(--snx-surface-sunk)); border: 1px solid rgb(var(--snx-border-strong)); transition: background .15s; } .sw__track::after{ content:""; position:absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--snx-surface)); box-shadow: 0 1px 2px rgb(var(--snx-shadow) / .15); transition: left .15s; } .sw input:checked + .sw__track{ background: rgb(var(--snx-primary)); border-color: rgb(var(--snx-primary)); } .sw input:checked + .sw__track::after{ left: 15px } .sw__lbl{ font-size: 12.5px; color: rgb(var(--snx-strong)) } .sw__lbl small{ display:block; font-size: 11px; color: rgb(var(--snx-muted)); font-weight: 400 } /* ========================================================================= CHIPS ========================================================================= */ .chips{ border: 1px solid rgb(var(--snx-border-strong)); border-radius: var(--snx-radius); background: rgb(var(--snx-surface)); padding: 3px; display:flex; flex-wrap:wrap; gap: 3px; min-height: var(--snx-row); align-items: center; } .chips:focus-within{ border-color: rgb(var(--snx-primary)); box-shadow: 0 0 0 3px rgb(var(--snx-primary) / .2); } /* Variante somente-leitura (detalhe/relatorio): sem borda externa, mais ar entre chips. */ .chips--read{ border: 0; background: transparent; padding: 0; gap: 6px; min-height: 0; } .chip{ display:inline-flex; align-items:center; gap:6px; height: 22px; padding: 0 4px 0 8px; border-radius: 2px; background: rgb(var(--snx-primary-soft)); color: rgb(var(--snx-primary)); font-size: 11.5px; font-weight: 500; border: 1px solid rgb(var(--snx-primary) / .25); } .chip__x{ width: 14px; height: 14px; border-radius: 2px; display:grid; place-items:center; color: rgb(var(--snx-primary)); font-size: 12px; line-height: 1; opacity: .7; } .chip__x:hover{ opacity: 1; background: rgb(var(--snx-primary) / .15) } .chips__input{ flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; font-size: 12.5px; padding: 0 6px; color: rgb(var(--snx-strong)); } /* ========================================================================= FORM DIVIDER (separador "ou" entre campos mutuamente exclusivos) ========================================================================= */ .form-divider{ display: flex; align-items: center; gap: 12px; text-transform: uppercase; font-size: 11px; font-weight: 600; color: rgb(var(--snx-muted)); letter-spacing: 0.08em; margin: 4px 0; } .form-divider::before, .form-divider::after{ content: ""; flex: 1; border-top: 1px solid rgb(var(--snx-line)); } /* ========================================================================= TYPEAHEAD (busca + dropdown de resultados HTMX) ========================================================================= */ .typeahead{ position: relative; } .typeahead__panel{ position: relative; min-height: 0; } .typeahead__panel:empty{ display: none; } .typeahead__results{ margin-top: 6px; border: 1px solid rgb(var(--snx-line)); border-radius: 4px; background: rgb(var(--snx-bg)); box-shadow: var(--snx-shadow-1); max-height: 280px; overflow-y: auto; } .typeahead__list{ list-style: none; margin: 0; padding: 0; } .typeahead__item{ display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 12px; background: transparent; border: 0; cursor: pointer; border-bottom: 1px solid rgb(var(--snx-line) / .5); color: rgb(var(--snx-strong)); } .typeahead__list li:last-child .typeahead__item{ border-bottom: 0; } .typeahead__item:hover, .typeahead__item:focus{ background: rgb(var(--snx-primary-soft)); outline: 0; } .typeahead__empty{ margin-top: 6px; padding: 10px 12px; border: 1px dashed rgb(var(--snx-line)); border-radius: 4px; font-size: 12.5px; } /* ========================================================================= BUTTONS ========================================================================= */ .btn{ height: 30px; padding: 0 12px; display:inline-flex; align-items:center; gap:6px; border-radius: var(--snx-radius); font-size: 12.5px; font-weight: 500; border: 1px solid transparent; color: rgb(var(--snx-muted)); white-space: nowrap; } .btn:hover{ color: rgb(var(--snx-strong)); background: rgb(var(--snx-surface-muted)) } .btn--outline{ border-color: rgb(var(--snx-border-strong)); background: rgb(var(--snx-surface)); color: rgb(var(--snx-strong)); } .btn--outline:hover{ background: rgb(var(--snx-surface-muted)) } .btn--primary{ background: rgb(var(--snx-primary)); color: rgb(var(--snx-on-primary)); border-color: rgb(var(--snx-primary)); } .btn--primary:hover{ background: rgb(var(--snx-primary-hover)); border-color: rgb(var(--snx-primary-hover)); color: rgb(var(--snx-on-primary)); } .btn--danger{ color: rgb(var(--snx-danger)); border-color: rgb(var(--snx-border-strong)); background: rgb(var(--snx-surface)); } .btn--danger:hover{ background: rgb(var(--snx-danger-soft)); border-color: rgb(var(--snx-danger) / .45) } .btn--icon{ width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--snx-radius); color: rgb(var(--snx-muted)); cursor: pointer; flex-shrink: 0; } .btn--icon:hover{ background: rgb(var(--snx-surface-muted)); border-color: rgb(var(--snx-border-default)); color: rgb(var(--snx-strong)); } .btn--icon.is-active{ background: rgb(var(--snx-primary-soft)); color: rgb(var(--snx-primary)); } .btn--icon[disabled], .btn--icon[aria-disabled="true"]{ color: rgb(var(--snx-subtle)); cursor: not-allowed; } .btn__kbd{ font-family: var(--snx-font-mono); font-size: 10.5px; padding: 0 4px; margin-left: 2px; border: 1px solid rgb(var(--snx-border-default)); border-radius: 2px; background: rgb(var(--snx-surface)); color: rgb(var(--snx-muted)); } .btn--primary .btn__kbd{ background: rgb(var(--snx-primary-hover)); border-color: rgb(var(--snx-on-primary) / .25); color: rgb(var(--snx-on-primary) / .75); } /* icon (inline svg) */ .ico{ width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ico--sm{ width: 12px; height: 12px } /* ========================================================================= STICKY ACTIONS ========================================================================= */ .actions{ position:fixed; bottom: 0; left: var(--snx-sidebar-width); right: 0; height: var(--snx-fixed-actions-height); background: rgb(var(--snx-surface)); border-top: 1px solid rgb(var(--snx-border-default)); padding: 0 24px; display:flex; align-items:center; gap: 12px; z-index: 25; box-shadow: 0 -2px 12px rgb(var(--snx-shadow) / .04); } .actions__hint{ display:flex; align-items:center; gap: 8px; font-size: 12px; color: rgb(var(--snx-muted)); } .actions__hint .dot{ width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--snx-warning)); box-shadow: 0 0 0 3px rgb(var(--snx-warning) / .2); } .actions__spacer{ flex: 1 } /* ========================================================================= DASHBOARD ========================================================================= */ .dash-period{ display:inline-flex; align-items:center; gap: 2px; border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius); padding: 2px; background: rgb(var(--snx-surface)); } .dash-period button{ appearance:none; border:0; background:transparent; font: inherit; font-size:12px; padding: 4px 10px; border-radius: 2px; color: rgb(var(--snx-muted)); cursor:pointer; } .dash-period button.is-active{ background: rgb(var(--snx-primary-soft)); color: rgb(var(--snx-primary)); font-weight:600 } .kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } .kpi{ background: rgb(var(--snx-surface)); border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius-2); padding: 12px 14px; display:flex; flex-direction:column; gap: 4px; position: relative; min-height: 108px; } .kpi__lbl{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--snx-subtle)); font-weight: 600; display:flex; align-items:center; gap: 6px; } .kpi__ico{ width: 20px; height: 20px; border-radius: 3px; background: rgb(var(--snx-primary-soft)); color: rgb(var(--snx-primary)); display:inline-flex; align-items:center; justify-content:center; font-size: 10px; font-weight: 700; font-family: var(--snx-font-mono); } .kpi__val{ font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: rgb(var(--snx-strong)); font-family: var(--snx-font-mono); display:flex; align-items:baseline; gap: 4px; } .kpi__val small{ font-size: 13px; font-weight: 500; color: rgb(var(--snx-muted)) } .kpi__delta{ display:inline-flex; align-items:center; gap: 4px; font-size: 11.5px; font-weight: 600; } .kpi__delta.up{ color: rgb(var(--snx-success)) } .kpi__delta.down{ color: rgb(var(--snx-danger)) } .kpi__delta .ico{ width:10px; height:10px } .kpi__sub{ font-size: 11.5px; color: rgb(var(--snx-muted)); margin-top: auto } .kpi__spark{ position: absolute; right: 10px; top: 10px; width: 68px; height: 26px; opacity: .9; } .dash-grid{ display:grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 14px; } .panel{ background: rgb(var(--snx-surface)); border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius-2); overflow: hidden; } .panel__hd{ padding: 10px 14px; height: 40px; display:flex; align-items:center; gap: 10px; border-bottom: 1px solid rgb(var(--snx-border-default)); background: rgb(var(--snx-surface-muted)); } .panel__hd h3{ margin:0; font-size: 12.5px; font-weight: 600; letter-spacing: .01em } .panel__hd .sub{ color: rgb(var(--snx-muted)); font-size: 11.5px; font-family: var(--snx-font-mono) } .panel__hd .seg{ margin-left:auto } .panel__bd{ padding: 14px } .panel__bd.nopad{ padding: 0 } .chart{ width: 100%; height: 240px; } .chart-legend{ display:flex; gap: 14px; margin-top: 10px; font-size: 11.5px; color: rgb(var(--snx-muted)); padding: 0 14px 12px; } .chart-legend .sw{ display:inline-flex; align-items:center; gap: 6px; } .chart-legend .sw i{ width: 10px; height: 10px; border-radius: 2px; display:inline-block } .tl{ display:flex; flex-direction:column } .tl__item{ display:grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 10px 14px; border-top: 1px solid rgb(var(--snx-border-default)); position: relative; } .tl__item:first-child{ border-top: 0 } .tl__item .pin{ width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--snx-primary)); margin-top: 5px; box-shadow: 0 0 0 3px rgb(var(--snx-primary) / .12); justify-self: center; } .tl__item .pin.is-warn{ background: rgb(var(--snx-warning)); box-shadow: 0 0 0 3px rgb(var(--snx-warning) / .14) } .tl__item .pin.is-err{ background: rgb(var(--snx-danger)); box-shadow: 0 0 0 3px rgb(var(--snx-danger) / .14) } .tl__item .pin.is-ok{ background: rgb(var(--snx-success)); box-shadow: 0 0 0 3px rgb(var(--snx-success) / .14) } .tl__item .pin.is-info{ background: rgb(var(--snx-info)); box-shadow: 0 0 0 3px rgb(var(--snx-info) / .14) } .tl__item h4{ margin:0 0 2px; font-size: 12.5px; font-weight: 600 } .tl__item p{ margin:0; color: rgb(var(--snx-muted)); font-size: 11.5px } .tl__item time{ color: rgb(var(--snx-subtle)); font-size: 11px; font-family: var(--snx-font-mono); margin-left: 8px } .tl__item .ator{ color: rgb(var(--snx-strong)); font-weight: 500 } /* ========================================================================= LIST / TABLE ========================================================================= */ .fb{ display:flex; align-items:center; gap: 8px; background: rgb(var(--snx-surface)); border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius-2); padding: 8px; margin-top: 14px; min-width: 0; overflow: hidden; width: 100%; } .fb__search{ flex: 1 1 360px; max-width: 520px; min-width: 0; display:flex; align-items:center; gap: 8px; height: var(--snx-row); padding: 0 10px; border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius); background: rgb(var(--snx-surface-muted)); } .fb__search:focus-within{ border-color: rgb(var(--snx-primary) / .45); box-shadow: 0 0 0 2px rgb(var(--snx-primary) / .12); } .fb__search input{ flex:1; border:0; background: transparent; outline: none; font: inherit; font-size: 13px; color: rgb(var(--snx-strong)); } .fb__search input::placeholder{ color: rgb(var(--snx-subtle)) } .fb__search .ico{ color: rgb(var(--snx-subtle)) } .fb__search .kbd{ font-family: var(--snx-font-mono); font-size: 10.5px; padding: 1px 5px; background: rgb(var(--snx-surface)); border:1px solid rgb(var(--snx-border-default)); border-radius:2px; color: rgb(var(--snx-muted)); } .seg{ display:inline-flex; align-items:center; border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius); overflow: hidden; height: var(--snx-row); flex-shrink: 0; margin-left: auto; width: auto; } .seg button, .seg a{ appearance:none; border: 0; background: rgb(var(--snx-surface)); font: inherit; font-size: 12px; padding: 0 10px; color: rgb(var(--snx-muted)); cursor: pointer; border-left: 1px solid rgb(var(--snx-border-default)); height: 100%; display: inline-flex; align-items: center; text-decoration: none; } .seg button:first-child, .seg a:first-child{ border-left: 0 } .seg button.is-active, .seg a.is-active{ background: rgb(var(--snx-primary-soft)); color: rgb(var(--snx-primary)); font-weight: 600 } .sel{ height: var(--snx-row); background: rgb(var(--snx-surface)); border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius); padding: 0 28px 0 10px; font: inherit; font-size: 13px; color: rgb(var(--snx-strong)); appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; max-width: 170px; flex-shrink: 0; } .fb__spacer{ flex: 1 } .fb__more{ margin-left: auto; height: var(--snx-row); padding: 0 10px; background: rgb(var(--snx-surface)); border: 1px dashed rgb(var(--snx-border-default)); border-radius: var(--snx-radius); font: inherit; font-size: 12px; color: rgb(var(--snx-muted)); display:inline-flex; align-items:center; gap: 6px; cursor:pointer; } .tbl-wrap{ margin-top: 12px; background: rgb(var(--snx-surface)); border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius-2); overflow: hidden; width: 100%; } .tbl-bulk{ display:flex; align-items:center; gap: 14px; padding: 8px 14px; background: rgb(var(--snx-primary-soft)); color: rgb(var(--snx-primary)); font-size: 12px; font-weight: 500; border-bottom: 1px solid rgb(var(--snx-border-default)); } .tbl-bulk .spacer{ flex: 1 } .tbl-bulk button{ appearance:none; border:1px solid rgb(var(--snx-primary) / .3); background: rgb(var(--snx-surface)); color: rgb(var(--snx-primary)); padding: 4px 10px; font: inherit; font-size: 11.5px; border-radius: var(--snx-radius); cursor: pointer; } .tbl-bulk button:disabled{ opacity: .45; cursor: not-allowed; color: rgb(var(--snx-muted)); border-color: rgb(var(--snx-border-default)); background: rgb(var(--snx-surface-muted)); } .tbl-bulk__feedback{ color: rgb(var(--snx-muted)); font-weight: 400; } .tbl{ width: 100%; border-collapse: collapse; font-size: 12.5px; } .tbl thead th{ text-align: left; font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--snx-subtle)); padding: 8px 12px; background: rgb(var(--snx-surface-muted)); border-bottom: 1px solid rgb(var(--snx-border-default)); white-space: nowrap; } .tbl thead th .sort{ display:inline-flex; align-items:center; gap: 2px; color: inherit } .tbl thead th .sort.is-on{ color: rgb(var(--snx-primary)) } .tbl thead th .sort .ico{ width:10px; height:10px } .tbl tbody td{ padding: 0 12px; height: var(--snx-row); border-bottom: 1px solid rgb(var(--snx-border-default)); color: rgb(var(--snx-strong)); white-space: nowrap; vertical-align: middle; } .tbl tbody tr.is-hidden{ display: none } .tbl tbody tr:hover td{ background: rgb(var(--snx-surface-muted)) } .tbl tbody tr.is-selected td{ background: rgb(var(--snx-primary-soft) / .5) } .tbl td.num, .tbl td.mono{ font-family: var(--snx-font-mono); font-variant-numeric: tabular-nums } .tbl td.num{ text-align: right } .tbl td.right{ text-align: right } .tbl td .avatar{ width: 22px; height: 22px; border-radius: 50%; background: rgb(var(--snx-primary-soft)); color: rgb(var(--snx-primary)); display:inline-flex; align-items:center; justify-content:center; font-size: 10px; font-weight: 600; margin-right: 8px; vertical-align: middle; } .tbl td .sub{ color: rgb(var(--snx-subtle)); font-size: 11px } .tbl .chk{ width: 14px; height: 14px; border: 1px solid rgb(var(--snx-border-strong)); border-radius: 2px; background: rgb(var(--snx-surface)); display:inline-block; vertical-align: middle; position: relative; } .tbl-check-control{ display: inline-grid; place-items: center; width: 18px; height: 18px; position: relative; cursor: pointer; vertical-align: middle; } .tbl-check-control input{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; } .tbl-check-control input:focus-visible + .chk{ outline: 2px solid rgb(var(--snx-primary) / .35); outline-offset: 2px; } .tbl-check-control input:checked + .chk, .tbl-check-control input:indeterminate + .chk{ background: rgb(var(--snx-primary)); border-color: rgb(var(--snx-primary)); } .tbl-check-control input:checked + .chk::after{ content:""; position:absolute; left:3px; top:0px; width:5px; height:9px; border-right: 2px solid rgb(var(--snx-on-primary)); border-bottom: 2px solid rgb(var(--snx-on-primary)); transform: rotate(45deg); } .tbl-check-control input:indeterminate + .chk::after{ content:""; position:absolute; left:3px; right:3px; top:6px; height:2px; background: rgb(var(--snx-on-primary)); } .tbl-check-control input:disabled + .chk{ opacity: .45 } .tbl .chk.is-on{ background: rgb(var(--snx-primary)); border-color: rgb(var(--snx-primary)) } .tbl .chk.is-on::after{ content:""; position:absolute; left:3px; top:0px; width:5px; height:9px; border-right: 2px solid rgb(var(--snx-on-primary)); border-bottom: 2px solid rgb(var(--snx-on-primary)); transform: rotate(45deg); } .tbl .row-menu{ appearance:none; background: transparent; border:0; padding: 4px; border-radius: 2px; cursor:pointer; color: rgb(var(--snx-subtle)); } .tbl .row-menu:hover{ background: rgb(var(--snx-surface-sunk)); color: rgb(var(--snx-strong)) } .tbl .row-menu .ico{ width:14px; height:14px } .pager{ display:flex; align-items:center; gap: 8px; padding: 10px 14px; border-top: 1px solid rgb(var(--snx-border-default)); font-size: 12px; color: rgb(var(--snx-muted)); background: rgb(var(--snx-surface-muted)); } .pager .spacer{ flex: 1 } .pager button{ appearance:none; background: rgb(var(--snx-surface)); border: 1px solid rgb(var(--snx-border-default)); padding: 4px 8px; border-radius: var(--snx-radius); font: inherit; font-size: 12px; color: rgb(var(--snx-strong)); min-width: 28px; cursor: pointer; } .pager button.is-active{ background: rgb(var(--snx-primary)); color: rgb(var(--snx-on-primary)); border-color: rgb(var(--snx-primary)); font-weight: 600 } .pager button:disabled{ opacity: .4; cursor: not-allowed } .pager select.sel{ height: 26px; padding: 0 22px 0 8px; font-size: 12px } /* ========================================================================= STATUS PILLS — genéricas ========================================================================= */ .st{ display:inline-flex; align-items:center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.3; border: 1px solid transparent; } .st .dot{ width:6px; height:6px; border-radius:50% } .st--ok{ color: rgb(var(--snx-success)); background: rgb(var(--snx-success-soft)) } .st--ok .dot{ background: rgb(var(--snx-success)) } .st--warn{ color: rgb(var(--snx-warning)); background: rgb(var(--snx-warning-soft)) } .st--warn .dot{ background: rgb(var(--snx-warning)) } .st--err{ color: rgb(var(--snx-danger)); background: rgb(var(--snx-danger-soft)) } .st--err .dot{ background: rgb(var(--snx-danger)) } .st--info{ color: rgb(var(--snx-info)); background: rgb(var(--snx-info-soft)) } .st--info .dot{ background: rgb(var(--snx-info)) } .st--muted{ color: rgb(var(--snx-muted)); background: rgb(var(--snx-surface-sunk)) } .st--muted .dot{ background: rgb(var(--snx-subtle)) } /* ========================================================================= DETAIL VIEW ========================================================================= */ .ph__actions{ display:flex; align-items:center; gap: 8px } .d-meta{ display:flex; flex-wrap:wrap; gap: 0; margin-top: 14px; background: rgb(var(--snx-surface)); border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius-2); overflow: hidden; } .d-meta__cell{ padding: 10px 14px; border-right: 1px solid rgb(var(--snx-border-default)); min-width: 140px; flex: 1 1 140px; } .d-meta__cell:last-child{ border-right: 0 } .d-meta__lbl{ font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--snx-subtle)); font-weight: 600; } .d-meta__val{ font-size: 13px; color: rgb(var(--snx-strong)); margin-top: 3px; font-weight: 500; } .d-meta__val.mono{ font-family: var(--snx-font-mono) } .d-grid{ display:grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 12px; align-items: start; } .d-grid-l, .d-grid-r{ display:flex; flex-direction:column; gap: 12px } .d-card{ background: rgb(var(--snx-surface)); border: 1px solid rgb(var(--snx-border-default)); border-radius: var(--snx-radius-2); overflow: hidden; } .d-card__hd{ display:flex; align-items:center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgb(var(--snx-border-default)); background: rgb(var(--snx-surface-muted)); height: 40px; } .d-card__hd h3{ margin:0; font-size: 12.5px; font-weight: 600; letter-spacing: .01em } .d-card__hd .edit{ margin-left:auto; appearance:none; background: transparent; border:0; padding:2px 6px; color: rgb(var(--snx-primary)); font: inherit; font-size: 11.5px; font-weight: 500; cursor:pointer; display:inline-flex; align-items:center; gap: 4px; border-radius: 2px; } .d-card__hd .edit:hover{ background: rgb(var(--snx-primary-soft)) } .d-card__bd{ padding: 0 } .d-row{ display:grid; grid-template-columns: 150px 1fr; padding: 8px 14px; border-top: 1px solid rgb(var(--snx-border-default)); font-size: 12.5px; min-height: 32px; align-items: center; } .d-row:first-child{ border-top: 0 } .d-key{ color: rgb(var(--snx-subtle)); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em } .d-val{ color: rgb(var(--snx-strong)) } .d-val.mono{ font-family: var(--snx-font-mono) } .d-val small{ color: rgb(var(--snx-muted)); margin-left: 6px; font-size: 11px } .d-summary{ padding: 14px } .d-summary .total{ font-size: 24px; font-weight: 700; letter-spacing: -.01em; font-family: var(--snx-font-mono); color: rgb(var(--snx-strong)); } .d-summary .total small{ font-size: 13px; color: rgb(var(--snx-muted)); font-weight: 500 } .d-summary .row{ display:flex; justify-content:space-between; font-size: 12px; color: rgb(var(--snx-muted)); padding: 3px 0 } .d-summary .row b{ color: rgb(var(--snx-strong)); font-family: var(--snx-font-mono); font-weight: 500 } .d-summary hr{ border:0; border-top: 1px dashed rgb(var(--snx-border-default)); margin: 10px 0 } .d-mini-list{ padding: 0 } .d-mini-list .it{ display:grid; grid-template-columns: 1fr auto; padding: 8px 14px; gap: 10px; border-top: 1px solid rgb(var(--snx-border-default)); font-size: 12.5px; align-items: center; } .d-mini-list .it:first-child{ border-top: 0 } .d-mini-list .it h4{ margin:0; font-size: 12.5px; font-weight: 500 } .d-mini-list .it p{ margin: 1px 0 0; color: rgb(var(--snx-muted)); font-size: 11.5px } .d-mini-list .it .amt{ font-family: var(--snx-font-mono); font-weight: 500; font-size: 12.5px } /* ========================================================================= APP EXTENSIONS - telas reais fora do preview canonico ========================================================================= */ html { min-width: 0; } body { min-width: 1024px; } .ph__actions { display: flex; align-items: center; gap: 8px; align-self: center; } .ph__period { display: flex; align-items: center; gap: 10px; align-self: center; margin-left: auto; } .ph__meta span { white-space: nowrap; } .ph__prog-bar--done i { width: 100%; } .ph__prog-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } .u-mt-14 { margin-top: 14px; } .u-mb-14 { margin-bottom: 14px; } .u-pad-14 { padding: 14px; } .u-ml-auto { margin-left: auto; } .u-ml-6 { margin-left: 6px; } .u-inline { display: inline; } .u-inline-block { display: inline-block; } .u-block { display: block; } .u-pre-wrap { white-space: pre-wrap; word-break: break-word; } .is-hidden { display: none !important; } .link-primary { color: rgb(var(--snx-primary)); font-weight: 500; } .perm-group-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--snx-muted)); margin: 12px 0 6px; } .alert { padding: 10px 12px; border-radius: var(--snx-radius); font-size: 12px; } .alert--err { color: rgb(var(--snx-danger)); background: rgb(var(--snx-danger-soft)); border: 1px solid rgb(var(--snx-danger) / .2); } .alert--ok { color: rgb(var(--snx-success)); background: rgb(var(--snx-success-soft)); border: 1px solid rgb(var(--snx-success) / .2); } .alert--info { color: rgb(var(--snx-info)); background: rgb(var(--snx-info-soft)); border: 1px solid rgb(var(--snx-info) / .2); } .empty-state { margin: 0; color: rgb(var(--snx-muted)); font-size: 12.5px; padding: 20px; } .tbl tbody tr { height: var(--snx-row); } .tbl tbody td { line-height: 1.3; } .tbl .tbl__check { width: 32px; text-align: center; } .tbl-bulk--summary { background: rgb(var(--snx-primary-soft) / .55); } .tbl td.actions-cell { text-align: right; } .tbl td.actions-cell .btn { height: 26px; padding: 0 8px; font-size: 11.5px; } .tbl td.actions-cell form { display: inline-flex; margin: 0 0 0 6px; } .pill--muted { color: rgb(var(--snx-muted)); background: rgb(var(--snx-surface-muted)); } .pill--warn { color: rgb(var(--snx-warning)); background: rgb(var(--snx-warning-soft)); border-color: rgb(var(--snx-warning) / .35); } .btn--danger { color: rgb(var(--snx-danger)); border-color: rgb(var(--snx-border-strong)); background: rgb(var(--snx-surface)); } .btn--danger:hover { background: rgb(var(--snx-danger-soft)); border-color: rgb(var(--snx-danger) / .45); } .btn--ghost { color: rgb(var(--snx-muted)); border-color: rgb(var(--snx-border-default)); background: transparent; } .btn--ghost:hover { color: rgb(var(--snx-strong)); background: rgb(var(--snx-surface-muted)); } .btn--block { width: 100%; justify-content: center; } /* ── Uploader (drop-zone clicavel) ────────────────────────────────────────── * Variante visual de input file dentro de forms (§17.3/§17.4). Esconde o * nativo via .uploader__input.is-hidden e usa