/* ============================================================================ TEMA SAFPLAN CENTRAL · assets/temas/safplan-central/tema.css ---------------------------------------------------------------------------- 4º tema do sistema — a identidade EXATA da Safplan · Central de Clientes (`pavipro/assets/css/app.css`), para os 4 segmentos atenderem com a mesma cara: · primária #1D4ED8 (hover #123C9B) · acento céu #0EA5E9 · tinta #0C1B33 · fundo #F2F5FA · cartão #FFFFFF · bordas #DDE5EF / #CBD6E4 · raio 14px · fonte Inter (títulos Manrope) · menu azul-noite com ícones brancos Mesma superfície de tokens do tema `safplan` (que é a família DayNight) — por isso nenhuma tela muda de estrutura, só de cor. T2 (23/10/2026) tirou as cores FIXAS das telas, então este tema vale em TODAS as telas que usam o layout. ========================================================================== */ /* TEMA NOME: Safplan Central (claro · azul #1D4ED8) */ /* TEMA SCHEME: light */ /* TEMA BOOTSTRAP: assets/vendor/bootswatch/zephyr/bootstrap.min.css */ /* TEMA COMPONENTES: assets/temas/safplan-central/tema-extras.css */ /* TEMA FAMILIA: Safplan Central — fundo #F2F5FA, borda #DDE5EF, tinta #0C1B33, acento #0EA5E9 */ /* TEMA FONTES: Inter+Manrope */ :root { /* ── canais RGB ─────────────────────────────────────────────────────────── */ --cor-primaria-rgb: 29 78 216; /* #0284C7 — azul-céu 600 */ --cor-escuro-rgb: 12 27 51; /* #1E293B — tinta principal */ --cor-superficie-rgb: 255 255 255; /* #FFFFFF — cartões */ --cor-borda-rgb: 221 229 239; /* #E2E8F0 — bordas suaves */ --cor-fundo-rgb: 242 245 250; /* #F8FAFC — fundo de página */ --cor-preto-rgb: 242 245 250; /* rodapé/caixas acompanham o claro */ /* ── cores prontas ──────────────────────────────────────────────────────── */ --cor-primaria: rgb(var(--cor-primaria-rgb)); --cor-escuro: rgb(var(--cor-escuro-rgb)); --cor-superficie: rgb(var(--cor-superficie-rgb)); --cor-borda: rgb(var(--cor-borda-rgb)); --cor-fundo: rgb(var(--cor-fundo-rgb)); --cor-preto: rgb(var(--cor-preto-rgb)); --cor-texto: #0C1B33; /* --ink do Central */ /* tinta principal */ --cor-texto-suave:#5B6B82; /* --muted do Central */ /* texto secundário */ /* ── ESCALA PRIMARIA (azul-céu) — alimenta as classes `gold-50 … gold-900` ── Atenção: os NOMES das classes continuam `gold-*` (é o vocabulário das telas), mas quem manda na cor é este token. */ --cor-primaria-50-rgb: 239 246 255; /* #f0f9ff */ --cor-primaria-100-rgb: 219 234 254; /* #e0f2fe */ --cor-primaria-200-rgb: 191 219 254; /* #bae6fd */ --cor-primaria-300-rgb: 147 197 253; /* #7dd3fc */ --cor-primaria-400-rgb: 96 165 250; /* #38bdf8 — acento do template */ --cor-primaria-500-rgb: 59 130 246; /* #0ea5e9 */ --cor-primaria-600-rgb: 37 99 235; /* #0284c7 — primária do tema */ --cor-primaria-700-rgb: 29 78 216; /* #0369a1 */ --cor-primaria-800-rgb: 30 64 175; /* #075985 */ --cor-primaria-900-rgb: 30 58 138; /* #0c4a6e */ /* ── ESCALA ESCURA — alimenta as classes `dark-400 … dark-950`. No tema claro a escala vira uma rampa de cinzas frios: as telas que usam `bg-dark-900` (fundo escuro) continuam legíveis, mas na cor do tema. */ --cor-escuro-400-rgb: 148 163 184; /* #94a3b8 */ --cor-escuro-500-rgb: 100 116 139; /* #64748b */ --cor-escuro-600-rgb: 71 85 105; /* #475569 */ --cor-escuro-700-rgb: 51 65 85; /* #334155 */ --cor-escuro-800-rgb: 30 41 59; /* #1e293b */ --cor-escuro-900-rgb: 12 27 51; /* #0f172a */ --cor-escuro-950-rgb: 7 16 34; /* #020617 — tinta do tema */ /* ── forma e tipografia ────────────────────────────────────────────────── */ --raio: 14px; --raio-controle: 10px; --raio-pequeno: 8px; --sombra: 0 1px 3px rgb(12 27 51 / 0.06); --sombra-media: 0 4px 12px rgb(12 27 51 / 0.08); --sombra-forte: 0 10px 30px -12px rgb(12 27 51 / 0.18); --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* ── extras deste tema (não existem no padrão; usados pelo seletor) ────── */ --cor-primaria-escura: #123c9b; --cor-ceu: #0ea5e9; /* ── tokens SEMÂNTICOS (usados pela ponte token→Bootstrap) ───────────── Mesma família do app Safplan (--ok/--warn/--danger do app.css dele). */ /* ── ESTADO: SOLIDO (preenchimento/borda) ───────────────────────────── T2, 23/10/2026: no tema CLARO o preenchimento precisa aceitar TEXTO BRANCO (text-sobre) — por isso os valores desceram para o tom -600/-700 (contraste >= 4,5:1). Antes #F59E0B com texto branco dava 2,2:1. */ --cor-sucesso-rgb: 22 163 74; /* #16A34A — green-600 */ --cor-info-rgb: 3 105 161; /* #0369A1 — sky-700 */ --cor-alerta-rgb: 217 119 6; /* #B45309 — amber-700 */ --cor-perigo-rgb: 220 38 38; /* #DC2626 — red-600 */ /* ── ESTADO: COR DE TEXTO (T2, 23/10/2026) — ver comentario no tema pavimentopro: mesmo token nos 3 temas, valor ajustado ao fundo. */ --cor-txt-sucesso-rgb: 21 128 61; /* #15803D — green-700 */ --cor-txt-perigo-rgb: 185 28 28; /* #B91C1C — red-700 */ --cor-txt-alerta-rgb: 180 83 9; /* #B45309 — amber-700 */ --cor-txt-info-rgb: 29 78 216; /* #1D4ED8 — blue-700 */ --cor-txt-roxo-rgb: 109 40 217; /* #6D28D9 — violet-700 */ --cor-roxo-rgb: 124 58 237; /* #7C3AED — violet-600 (preenchimento) */ --cor-primaria-hover-rgb: 18 60 155; /* #0369A1 — sky-700 (hover do primario) */ --cor-texto-rgb: 30 41 59; /* canais de --cor-texto */ --cor-sobre-primaria-rgb: 255 255 255; /* texto EM CIMA da cor primária */ /* ── tokens de PEÇA (campos, faixas, destaque) ──────────────────────── No tema claro o campo é BRANCO e a borda é suave (no escuro era preto). */ --cor-campo-bg-rgb: 255 255 255; /* #F8FAFC — fundo de input/select */ --cor-campo-borda-rgb: 203 214 228; /* #E2E8F0 — borda de input/select */ --cor-superficie-2-rgb: 247 250 253; /* #F1F5F9 — superfície destacada */ --cor-faixa-rgb: 241 245 249; /* #F1F5F9 — faixa/coluna fixa */ --cor-overlay-rgb: 12 27 51; /* #0F172A — véu atrás de modal */ /* ── ESCALA SEMÂNTICA DE TEXTO/ELEMENTO (tema CLARO) ────────────────── Mesma intenção da escala do tema escuro, com os tons equivalentes aqui: “forte” = texto principal, “medio/fraco/apagado” = textos secundários, “vidro” = camada suave por cima do branco, “veu” = véu de modal. */ --cor-txt-forte-rgb: 12 27 51; /* #1E293B — texto principal */ --cor-txt-forte2-rgb: 51 65 85; /* #334155 */ --cor-txt-forte3-rgb: 71 85 105; /* #475569 */ --cor-txt-medio-rgb: 91 107 130; /* #5F6F87 — secundário */ --cor-txt-fraco-rgb: 126 143 165; /* #7E8FA5 — terciário */ --cor-txt-apagado-rgb: 148 163 184; /* #94A3B8 — rótulo */ --cor-txt-sobre-destaque-rgb: 255 255 255; /* branco sobre o azul */ --cor-borda-clara-rgb: 12 27 51; /* borda sutil (tinta) */ --cor-vidro-rgb: 12 27 51; /* camada suave sobre branco */ --cor-bloco-rgb: 241 245 249; /* bloco/caixa clara */ /* ── pecas de superficie / borda / tinta (substituem cores cravadas nas telas) ── */ --cor-fundo-0-rgb: 255 255 255; /* superficie principal */ --cor-fundo-1-rgb: 255 255 255; --cor-fundo-2-rgb: 255 255 255; --cor-fundo-3-rgb: 255 255 255; --cor-fundo-4-rgb: 242 245 250; /* caixa suave */ --cor-fundo-5-rgb: 242 245 250; --cor-fundo-6-rgb: 241 245 249; /* faixa clara */ --cor-fundo-7-rgb: 255 255 255; /* superficie principal */ --cor-fundo-8-rgb: 241 245 249; /* ── CORES DE AÇÃO (chips de legenda/status da 6WLA: 3 azuis + 3 laranjas) ── Valores IDÊNTICOS ao tema escuro DE PROPÓSITO: são cores de CATEGORIA/intensidade, não superfície de tema. A TINTA delas é branca nos dois temas (--cor-acao-tinta), senão o rótulo ficava escuro em cima de chip escuro (defeito medido em 24/09/2026). */ --cor-acao-azul-1-rgb: 70 130 180; /* #4682b4 */ --cor-acao-azul-1-hover-rgb: 53 104 148; --cor-acao-azul-2-rgb: 65 114 159; /* #41729f */ --cor-acao-azul-2-hover-rgb: 49 88 125; --cor-acao-azul-3-rgb: 39 89 142; /* #27598e */ --cor-acao-azul-3-hover-rgb: 28 68 112; --cor-acao-laranja-1-rgb: 217 119 6; /* #d97706 */ --cor-acao-laranja-1-hover-rgb: 180 83 9; --cor-acao-laranja-2-rgb: 234 88 12; /* #ea580c */ --cor-acao-laranja-2-hover-rgb: 194 65 12; --cor-acao-laranja-3-rgb: 194 65 12; /* #c2410c */ --cor-acao-laranja-3-hover-rgb: 154 52 18; --cor-acao-celeste-rgb: 56 189 248; /* #38bdf8 — quadradinho da legenda */ --cor-acao-tinta-rgb: 255 255 255; /* texto EM CIMA da cor de ação (branco nos 2 temas) */ --cor-borda-0-rgb: 221 229 239; --cor-borda-1-rgb: 221 229 239; --cor-borda-2-rgb: 221 229 239; --cor-borda-3-rgb: 221 229 239; --cor-borda-4-rgb: 203 214 228; --cor-txt-1-rgb: 100 116 139; --cor-txt-2-rgb: 91 107 130; --cor-txt-3-rgb: 12 27 51; /* tinta forte */ --cor-txt-4-rgb: 100 116 139; /* ── ALIASES DE COMPONENTE (24/09/2026) ─────────────────────────────────── A camada assets/css/pavipro_componentes_tema.css consome o token SEM o sufixo -rgb (--cor-txt-forte, --cor-campo-bg...). Esses aliases NÃO existiam em tema nenhum → toda regra de componente saía INVÁLIDA (cor/raio/sombra em branco) e o componente parecia quebrado. Nada aqui inventa cor: cada alias aponta para o -rgb que já existia. (--raio-controle, --raio-pequeno, --sombra-media e --sombra-forte já são declarados neste tema mais acima.) */ --cor-txt-forte: rgb(var(--cor-txt-forte-rgb)); --cor-txt-medio: rgb(var(--cor-txt-medio-rgb)); --cor-txt-apagado: rgb(var(--cor-txt-apagado-rgb)); --cor-txt-forte3: rgb(var(--cor-txt-forte3-rgb)); --cor-superficie-2: rgb(var(--cor-superficie-2-rgb)); --cor-campo-bg: rgb(var(--cor-campo-bg-rgb)); --cor-campo-borda: rgb(var(--cor-campo-borda-rgb)); /* ── LOGIN (tela de entrada) ────────────────────────────────────────────── Tema CLARO — a cara do Safplan Control: superfície clara + brilho azul da marca, sem foto de fundo (a foto é da identidade do sistema de pavimentação, que vive no tema `pavimentopro`). · --login-halo brilho suave no topo · --login-veu-1/2 véu aplicado SOBRE a foto (aqui, o próprio fundo claro) · --login-foto 'none' = este tema não usa foto */ --login-halo: rgb(var(--cor-primaria-rgb) / 0.10); --login-veu-1: rgb(var(--cor-fundo-4-rgb)); --login-veu-2: rgb(var(--cor-fundo-6-rgb)); --login-foto: none; } /* ===== Menu lateral (sidebar) — tokens deste tema ===== */ :root { --pavi-sidebar-w: 244px; --pavi-sidebar-w-mini: 72px; --pavi-sidebar-fundo: linear-gradient(180deg, #0c1b33, #0a1527); --pavi-sidebar-texto: #cbd7ea; --pavi-sidebar-texto-forte: #ffffff; --pavi-sidebar-hover: rgba(255, 255, 255, .07); --pavi-sidebar-ativo: linear-gradient(90deg, rgba(29, 78, 216, .90), rgba(14, 165, 233, .75)); --pavi-sidebar-ativo-txt: #ffffff; --pavi-sidebar-borda: rgba(255, 255, 255, .08); --pavi-conteudo-fundo: #f2f5fa; /* Títulos com a fonte de display do Central */ --fonte-titulo: 'Manrope', 'Inter', sans-serif; } /* ===== PAPEL (IMPRESSÃO) — L2-print, 20/10/2026 ===== Documento impresso NÃO segue o tema: em QUALQUER tema o papel é branco e a tinta é escura. Estes tokens existem para os CSS de impressão (assets/css/telas/*impressao*) pararem de usar token de TELA: `--cor-fundo-0` é #000000 no pavimentopro e `--cor-borda-0` também → faixas e bordas PRETAS no papel; `--cor-txt-1/2` viravam cinza de tela e `--cor-primaria` virava ouro claro ilegível sobre o branco. REGRA: os 8 primeiros são IGUAIS nos 3 temas (papel é papel — não troque por tema); só `--cor-papel-marca` muda, porque a marca no papel é a marca do tema. Paridade conferida por: php ferramentas/tokens_por_tema.php */ :root { --cor-papel: #ffffff; /* fundo do documento (era --cor-fundo-0) */ --cor-papel-2: #f8fafc; /* faixa/cabeçalho de tabela (era --cor-fundo-4) */ --cor-papel-3: #f1f5f9; /* segunda faixa / zebra */ --cor-papel-borda: #e2e8f0; /* borda fina (era --cor-borda-0) */ --cor-papel-borda-2: #cbd5e1; /* borda forte (era --cor-borda-4) */ --cor-papel-tinta: #1e293b; /* texto principal no papel */ --cor-papel-tinta-suave: #64748b; /* texto secundário (era --cor-txt-1) */ --cor-papel-tinta-fraca: #5b6b82; /* rótulo fino (era --cor-txt-2) */ --cor-papel-marca: #1d4ed8; /* marca no papel: azul escurecido — branco sobre ele = 5,9:1 */ }