/* ========================================================================= Controle Show — Design System (tokens + componentes base) Base: paleta Flat UI modernizada da v1.0. Light mode. Mobile-first. ========================================================================= */ :root { /* Cores de marca — TEMA PADRÃO (azul blue-600, o visual de sempre). O tema é trocado em Configurações > Identidade: o shell estampa data-csw-tema no e o bloco [data-csw-tema="logo"] abaixo sobrepõe estes tokens com as cores da logo. */ --csw-primary: #2563eb; --csw-primary-600: #1d4ed8; --csw-primary-700: #1e40af; --csw-primary-soft: #eff6ff; /* Tokens temáveis usados nas classes arbitrárias do app JS */ --csw-thead: #0056a0; /* cabeçalho azul das tabelas */ --csw-green: #28b050; /* botão verde (CSW_GREEN_BTN) */ --csw-green-600: #229648; /* hover do botão verde */ /* Superfícies */ --csw-bg: #f1f5f9; --csw-surface: #ffffff; --csw-surface-2: #f8fafc; --csw-sidebar: #1e293b; --csw-sidebar-hover: #334155; --csw-sidebar-active: #23924a; /* item ATIVO do menu: verde da logo, um passo fechado */ /* MENU lateral (tokens do tema — o app JS pinta por .csw-aside/.csw-nav-*). 18/08/2026: o menu passou a ser o MESMO nos dois temas — faixa da LOGO branca (casa com o header do conteúdo, que também é branco) e, dali para baixo, o AZUL DA LOGO com texto e ícones brancos; hover e item ativo no VERDE do cifrão. As cores saíram do PNG do logotipo por amostragem de pixel: azul #3fa6fe, verde #29ad52. O azul puro dá só 2,59:1 com texto branco (reprova AA), então o fundo usa o MESMO matiz (207,6°) fechado até 4,56:1 — na tela lê como o azul da marca. Só o MENU mudou: botões, cabeçalhos de tabela e gráficos seguem como estavam. */ --csw-aside: #0176da; /* fundo do menu — azul da logo (branco em AA, 4,56:1) */ --csw-aside-topo: #ffffff; /* faixa da LOGO: branca, igual ao header do conteúdo */ --csw-aside-topo-bd: #e2e8f0; /* borda da faixa branca — a mesma do header (slate-200) */ --csw-aside-open: #015eae; /* guia do GRUPO ABERTO: mesmo azul, um passo fechado */ --csw-aside-sep: #3b96e4; /* divisórias internas */ --csw-aside-link: #ffffff; /* texto do item + ícones (herdam currentColor) */ --csw-aside-hover: #29ad52; /* hover = verde EXATO da logo */ --csw-aside-hover-txt: #ffffff; /* texto/ícone no hover */ --csw-aside-foot: #eaf6ff; /* rodapé */ --csw-aside-grp: #ffffff; /* cabeçalho de grupo (CADASTROS, VENDAS…) */ --csw-aside-sub: #eaf6ff; /* sub-rótulo dentro do grupo */ --csw-aside-brand: #0173d5; /* nome do sistema no topo (faixa branca), sem logo enviada */ /* Texto */ --csw-text: #0f172a; --csw-text-muted: #64748b; --csw-text-invert: #f8fafc; /* Estados */ --csw-success: #059669; --csw-warning: #d97706; --csw-danger: #dc2626; --csw-danger-600: #b91c1c; /* Bordas / raios / sombras */ --csw-border: #e2e8f0; --csw-radius-sm: 6px; --csw-radius: 10px; --csw-radius-lg: 16px; --csw-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04); --csw-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12); /* Espaços / tipografia */ --csw-space: 16px; --csw-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Layout */ --csw-sidebar-w: 260px; --csw-topbar-h: 60px; } /* ===================================================================== TEMA "CORES DA LOGO" (Configurações > Identidade > Tema de cores) Azul do arco (#3b9af5) e verde do cifrão (#34a853) do logotipo. Botões/títulos usam tons 1 passo mais escuros p/ contraste AA de texto branco. As escalas Twind blue/emerald são remapeadas no shell. ===================================================================== */ html[data-csw-tema="logo"] { --csw-primary: #1a73cf; --csw-primary-600: #155ca8; --csw-primary-700: #124b88; --csw-primary-soft: #eff7ff; --csw-thead: #155ca8; --csw-green: #34a853; --csw-green-600: #2b8c45; --csw-sidebar: #1669c2; --csw-sidebar-hover: #2f86dd; --csw-success: #2b8c45; /* 18/08/2026: os tokens do MENU saíram daqui. O menu passou a ser o MESMO nos dois temas (faixa da logo branca + azul da logo + verde do cifrão), definido no :root — manter uma cópia aqui só criaria duas verdades para a mesma coisa. Este bloco segue cuidando do resto do tema: botões, cabeçalhos de tabela e destaques. */ } /* --------------------------------------------------------------------- Utilitários TEMÁVEIS (CSS puro, não Twind). O Twind NÃO resolve var() dentro de classe arbitrária (bg-[var(--x)] sai sem cor) — por isso estas classes existem: são o único jeito de ligar os tokens do tema aos elementos pintados pelo app JS. --------------------------------------------------------------------- */ .csw-thead { background-color: var(--csw-thead); } .csw-thead-text { color: var(--csw-thead); } .csw-thead-border { border-color: var(--csw-thead); } .csw-thead-hover:hover { background-color: var(--csw-primary-700); } .csw-thead-grad { background-image: linear-gradient(to right, var(--csw-thead), var(--csw-primary-700)); } .csw-btn-green { background-color: var(--csw-green); color: #fff; } .csw-btn-green:hover { background-color: var(--csw-green-600); } /* Menu lateral temável (o app JS aplica estas classes no