/* ===== Raiz Solo — tema e leitura (compartilhado) ===== Aplicado via atributo data-tema no (definido por raizsolo_tema.js). Usa as variáveis que as telas já consomem, então recolore quase tudo automaticamente — inclusive estilos inline que usam var(--x). */ /* ---- ESCURO (padrão): melhora só o contraste do texto secundário ---- */ html[data-tema="escuro"]{ --mut:#c0cfa9 !important; --muted:#c0cfa9 !important; } /* ---- CAMPO (claro / alto contraste para leitura sob sol) ---- */ html[data-tema="campo"]{ --bg:#f4f3ea !important; --panel:#ffffff !important; --panel2:#eceee2 !important; --soil:#e9e7da !important; --border:#d4d9c4 !important; --ink:#1b2012 !important; --text:#1b2012 !important; --cream:#1b2012 !important; --mut:#525c44 !important; --muted:#525c44 !important; } /* alguns fundos do hub são fixos (não usam variável): ajusta no modo campo */ html[data-tema="campo"] .topbar{ background:rgba(244,243,234,.95) !important; } html[data-tema="campo"] .sidebar{ background:#ffffff !important; } html[data-tema="campo"] body::before{ opacity:.12 !important; } /* Campo: clareia blocos com fundo escuro FIXO (fluxo de trabalho, banner da Régua, etc.) */ html[data-tema="campo"] [style*="#11160d"], html[data-tema="campo"] [style*="#13200d"], html[data-tema="campo"] [style*="#1a2410"], html[data-tema="campo"] [style*="#141a10"]{ background:#eaf0df !important; background-image:none !important; border-color:#cdd8b6 !important; } /* Campo: texto que era claro fixo vira escuro */ html[data-tema="campo"] [style*="color:#faf8f0"], html[data-tema="campo"] [style*="color: #faf8f0"]{ color:#1b2012 !important; } /* Campo: banner da Régua pelo ID (garante o clareamento do fundo) */ html[data-tema="campo"] #regua-banner{ background:#e8f0db !important; background-image:none !important; border-color:#9cc06a !important; } html[data-tema="campo"] #regua-banner > div > div > span:first-child{ color:#1b2012 !important; } /* ---- leitura: legendas/tabelas um pouco maiores (telas no padrão novo) ---- */ html[data-tema] .legend .li{ font-size:13px; } html[data-tema] table.pts th, html[data-tema] table.pts td{ font-size:12px; } /* ---- alvos de toque mínimos ---- */ html[data-tema] .tab{ min-height:40px; display:inline-flex; align-items:center; } /* ---- botão flutuante de alternância de tema ---- */ #raiz-tema-btn{ position:fixed; z-index:5000; right:14px; bottom:calc(env(safe-area-inset-bottom) + 16px); width:48px; height:48px; border-radius:50%; border:1px solid rgba(0,0,0,.18); background:var(--clay,#c17f3a); color:#fff; font-size:21px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; } #raiz-tema-btn:active{ transform:scale(.94); } /* ===== botão de tema quando vai no topo (junto do usuário) ===== */ #raiz-tema-btn[data-slot]{ position:static; right:auto; bottom:auto; width:38px; height:38px; font-size:18px; box-shadow:none; border:1px solid rgba(255,255,255,.25); } /* ===== Campo: formulários, cabeçalhos e botões escuros dos módulos ===== */ html[data-tema="campo"] select, html[data-tema="campo"] textarea, html[data-tema="campo"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]){ background:#ffffff !important; color:#1b2012 !important; border-color:#cdd8b6 !important; } html[data-tema="campo"] .top{ background:#f4f3ea !important; } html[data-tema="campo"] .back{ background:#eef2e3 !important; color:#4a6a18 !important; border-color:#cdd8b6 !important; } html[data-tema="campo"] .toggle{ background:#ffffff !important; color:#1b2012 !important; border-color:#cdd8b6 !important; } html[data-tema="campo"] [style*="#0d1207"], html[data-tema="campo"] [style*="#16200d"], html[data-tema="campo"] [style*="#0f1a26"], html[data-tema="campo"] [style*="background:#0a0e08"]{ background:#eef2e3 !important; background-image:none !important; color:#1b2012 !important; border-color:#cdd8b6 !important; } /* ===== Campo: chips, barras e notas escuras (Prontidão / Régua) ===== */ html[data-tema="campo"] .meta, html[data-tema="campo"] .mode, html[data-tema="campo"] .btn{ background:#ffffff !important; color:#1b2012 !important; } html[data-tema="campo"] .meta.on, html[data-tema="campo"] .mode.on, html[data-tema="campo"] .on{ background:#e3f1cf !important; } html[data-tema="campo"] .meta.on *, html[data-tema="campo"] .mode.on *{ color:#2f5d22 !important; } html[data-tema="campo"] .b-ok{ background:#e6f3d8 !important; color:#2f5d22 !important; border-color:#9cc06a !important; } html[data-tema="campo"] .nbar-wrap{ background:#dfe4cf !important; } html[data-tema="campo"] [style*="#0d1520"]{ background:#e7eefa !important; color:#1e3a5f !important; border-color:#b8cde8 !important; } html[data-tema="campo"] [style*="#1a1207"]{ background:#f4ead6 !important; color:#6b4a1e !important; border-color:#d8c39a !important; } /* ===== Campo: abas, sub-abas, configs e previews escuros (hex literal em classes — vale p/ todos os módulos) ===== */ html[data-tema="campo"] .tab, html[data-tema="campo"] .stab, html[data-tema="campo"] .sb-tab, html[data-tema="campo"] .btn2, html[data-tema="campo"] .cfg, html[data-tema="campo"] .kpi, html[data-tema="campo"] .meta-bar, html[data-tema="campo"] .note, html[data-tema="campo"] .preview, html[data-tema="campo"] .talhao-chip, html[data-tema="campo"] .btn-import-sm{ background:#ffffff !important; color:#1b2012 !important; border-color:#d4d9c4 !important; } html[data-tema="campo"] .tab.active, html[data-tema="campo"] .stab.active, html[data-tema="campo"] .sb-tab.active, html[data-tema="campo"] .tab.on, html[data-tema="campo"] .stab.on, html[data-tema="campo"] .sb-tab.on{ background:#3a7d2c !important; color:#ffffff !important; border-color:#2f5d22 !important; } html[data-tema="campo"] .demo-badge{ background:#f4ead6 !important; color:#6b4a1e !important; border-color:#d8c39a !important; }