/** * SCIA — Tema claro/escuro (07/07/2026). * * Os tokens de cor do Tailwind (config inline dos layouts) apontam para as * variáveis --c-* abaixo, em TRIPLAS RGB ("R G B") — assim os modificadores de * opacidade (bg-secondary/10 etc.) continuam funcionando nos dois temas. * * O tema é alternado pela classe `dark` no (tailwind darkMode: "class"), * persistida em localStorage('sci_tema') e aplicada antes do primeiro paint * pelo script no dos layouts. * * A segunda metade do arquivo cobre as classes utilitárias FIXAS usadas nas * views (bg-white, bg-blue-50, text-green-700...), remapeadas para o escuro. * Os documentos de impressão/PDF abrem em janelas próprias e permanecem claros. */ /* ─── Paleta CLARA (valores originais do SCIA) ─────────────────────────── */ :root { --c-primary: 9 20 38; --c-on-primary: 255 255 255; --c-primary-container: 30 41 59; --c-on-primary-container: 133 144 166; --c-primary-fixed: 216 227 251; --c-primary-fixed-dim: 188 199 222; --c-on-primary-fixed: 17 28 45; --c-on-primary-fixed-variant: 60 71 90; --c-inverse-primary: 188 199 222; --c-secondary: 0 81 213; --c-on-secondary: 255 255 255; --c-secondary-container: 49 107 243; --c-on-secondary-container: 254 252 255; --c-secondary-fixed: 219 225 255; --c-secondary-fixed-dim: 180 197 255; --c-on-secondary-fixed: 0 23 75; --c-on-secondary-fixed-variant: 0 62 168; --c-tertiary: 4 21 40; --c-on-tertiary: 255 255 255; --c-tertiary-container: 26 42 62; --c-on-tertiary-container: 129 145 169; --c-tertiary-fixed: 211 228 254; --c-tertiary-fixed-dim: 183 200 225; --c-on-tertiary-fixed: 11 28 48; --c-on-tertiary-fixed-variant: 56 72 93; --c-error: 186 26 26; --c-on-error: 255 255 255; --c-error-container: 255 218 214; --c-on-error-container: 147 0 10; --c-background: 247 249 251; --c-on-background: 25 28 30; --c-surface: 247 249 251; --c-on-surface: 25 28 30; --c-surface-variant: 224 227 229; --c-on-surface-variant: 69 71 76; --c-surface-dim: 216 218 220; --c-surface-bright: 247 249 251; --c-surface-container-lowest: 255 255 255; --c-surface-container-low: 242 244 246; --c-surface-container: 236 238 240; --c-surface-container-high: 230 232 234; --c-surface-container-highest: 224 227 229; --c-surface-tint: 84 95 115; --c-outline: 117 119 125; --c-outline-variant: 197 198 205; --c-inverse-surface: 45 49 51; --c-inverse-on-surface: 239 241 243; } /* ─── Paleta ESCURA ────────────────────────────────────────────────────── */ html.dark { color-scheme: dark; /* inputs nativos (date, select, checkbox) escuros */ /* primary claro: títulos (text-primary) legíveis; botões bg-primary ficam claros com texto escuro (on-primary). O cabeçalho fixo tem override próprio. */ --c-primary: 169 199 255; --c-on-primary: 10 30 56; --c-primary-container: 42 66 105; --c-on-primary-container: 176 198 235; --c-primary-fixed: 216 227 251; --c-primary-fixed-dim: 188 199 222; --c-on-primary-fixed: 226 229 233; --c-on-primary-fixed-variant: 176 190 214; --c-inverse-primary: 9 20 38; /* secondary segue AZUL MÉDIO (os botões de ação têm text-white fixo) */ --c-secondary: 66 133 244; --c-on-secondary: 255 255 255; --c-secondary-container: 47 98 214; --c-on-secondary-container: 254 252 255; --c-secondary-fixed: 219 225 255; --c-secondary-fixed-dim: 180 197 255; --c-on-secondary-fixed: 226 229 233; --c-on-secondary-fixed-variant: 38 90 196; --c-tertiary: 183 200 225; --c-on-tertiary: 21 32 48; --c-tertiary-container: 42 58 82; --c-on-tertiary-container: 190 205 228; --c-tertiary-fixed: 211 228 254; --c-tertiary-fixed-dim: 183 200 225; --c-on-tertiary-fixed: 226 229 233; --c-on-tertiary-fixed-variant: 176 190 210; --c-error: 255 180 171; --c-on-error: 105 0 5; --c-error-container: 147 0 10; --c-on-error-container: 255 218 214; --c-background: 15 18 22; --c-on-background: 226 229 233; --c-surface: 15 18 22; --c-on-surface: 226 229 233; --c-surface-variant: 64 71 78; --c-on-surface-variant: 190 197 204; --c-surface-dim: 15 18 22; --c-surface-bright: 55 58 63; --c-surface-container-lowest: 10 13 16; --c-surface-container-low: 23 27 31; --c-surface-container: 28 32 37; --c-surface-container-high: 36 41 46; --c-surface-container-highest: 46 51 57; --c-surface-tint: 169 199 255; --c-outline: 140 147 154; --c-outline-variant: 62 68 75; --c-inverse-surface: 226 229 233; --c-inverse-on-surface: 25 28 30; } /* ─── Overrides do tema escuro para utilitárias fixas das views ────────── */ /* Cabeçalho fixo: permanece escuro (bg-primary vira claro no dark) */ html.dark header.fixed { background-color: rgb(13 17 23); box-shadow: inset 0 -1px 0 rgb(var(--c-outline-variant)); } html.dark header.fixed .text-on-primary { color: rgb(226 229 233); } html.dark header.fixed .text-on-primary-container { color: rgb(159 168 182); } html.dark header.fixed .border-on-primary-container\/20, html.dark header.fixed .border-on-primary\/10 { border-color: rgb(62 68 75); } /* Superfícies brancas → containers escuros (só o fundo; textos seguem suas classes) */ html.dark .bg-white { background-color: rgb(var(--c-surface-container-low)); } /* Azul (avisos/informação) */ html.dark .bg-blue-50 { background-color: rgb(17 27 46); } html.dark .bg-blue-100 { background-color: rgb(21 35 61); } html.dark .border-blue-100 { border-color: rgb(30 48 82); } html.dark .border-blue-200 { border-color: rgb(39 62 104); } html.dark .border-blue-300 { border-color: rgb(52 80 130); } html.dark .text-blue-600 { color: rgb(138 180 248); } html.dark .text-blue-700 { color: rgb(158 193 255); } html.dark .text-blue-800 { color: rgb(179 206 255); } html.dark .text-blue-900 { color: rgb(205 220 255); } /* Verde / esmeralda (sucesso) */ html.dark .bg-green-50, html.dark .bg-emerald-50 { background-color: rgb(13 36 24); } html.dark .bg-green-100, html.dark .bg-emerald-100 { background-color: rgb(18 48 31); } html.dark .border-green-200, html.dark .border-emerald-200 { border-color: rgb(31 74 49); } html.dark .border-green-300 { border-color: rgb(43 96 65); } html.dark .text-green-600, html.dark .text-emerald-600 { color: rgb(110 212 150); } html.dark .text-green-700, html.dark .text-emerald-700 { color: rgb(126 222 158); } html.dark .text-green-800, html.dark .text-emerald-800 { color: rgb(156 232 180); } html.dark .text-green-900, html.dark .text-emerald-900 { color: rgb(194 242 208); } /* Âmbar (atenção) */ html.dark .bg-amber-50 { background-color: rgb(38 28 8); } html.dark .bg-amber-100 { background-color: rgb(51 37 10); } html.dark .border-amber-200 { border-color: rgb(92 74 20); } html.dark .border-amber-300 { border-color: rgb(122 98 28); } html.dark .border-amber-400 { border-color: rgb(158 128 38); } html.dark .text-amber-700 { color: rgb(238 194 77); } html.dark .text-amber-800 { color: rgb(242 207 107); } html.dark .text-amber-900 { color: rgb(247 221 140); } /* Vermelho (erro) */ html.dark .bg-red-50 { background-color: rgb(45 18 16); } html.dark .bg-red-100 { background-color: rgb(60 22 19); } html.dark .border-red-200 { border-color: rgb(94 35 30); } html.dark .border-red-300 { border-color: rgb(122 46 40); } html.dark .text-red-700 { color: rgb(255 180 171); } html.dark .text-red-800 { color: rgb(255 199 192); } html.dark .text-red-900 { color: rgb(255 218 214); } /* Teal / roxo (badges de tipo) */ html.dark .bg-teal-50 { background-color: rgb(12 35 32); } html.dark .text-teal-700 { color: rgb(127 212 200); } html.dark .bg-purple-50 { background-color: rgb(30 20 48); } html.dark .text-purple-600 { color: rgb(196 167 255); } html.dark .text-purple-700 { color: rgb(205 180 255); } /* Hovers de fundos claros usados em botões/atalhos */ html.dark .hover\:bg-blue-50:hover { background-color: rgb(21 35 61); } html.dark .hover\:bg-amber-50:hover { background-color: rgb(51 37 10); } /* Realces inline (marcações amarelas de texto, se houver) */ html.dark mark { background-color: rgb(92 74 20); color: rgb(247 221 140); } /* Sombra sutil fica mais discreta em fundo escuro */ html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.5); } /* ═══════════════════════════════════════════════════════════════════════════ Padrão GLOBAL das caixas de texto (07/07/2026) Todas as