/* ============================================================= Regente — Tema claro (dia) ------------------------------------------------------------- A interface do Regente foi escrita 100% em tons escuros: são ~13.700 usos de classes como bg-slate-800 / text-white, sem nenhum prefixo dark:. Reescrever isso em 168 telas seria caro e ainda deixaria de fora o HTML montado por JavaScript. Como só existem ~90 classes de cinza DISTINTAS, esta folha remapeia essas classes quando tem a classe .light. Nenhuma tela precisa ser alterada, e o que o JS injeta em tempo de execução também é coberto. Regras: - Só usar seletores prefixados por "html.light" (o tema escuro é o padrão e não deve ser tocado por este arquivo). - Variantes com opacidade (bg-slate-800/30) casam por [class~="..."] — evita escapar a barra no seletor. - Se este arquivo não carregar, a aplicação continua escura. ============================================================= */ html.light { color-scheme: light; --rg-ground: #eff4f2; /* fundo da página (era slate-900) */ --rg-surface: #ffffff; /* card / painel (era slate-800) */ --rg-surface-2: #e8efec; /* input, hover, chip (era slate-700) */ --rg-surface-3: #dae4e0; /* elevação extra (era slate-600) */ --rg-well: #f2f6f4; /* poço / fundo aninhado (era slate-900) */ --rg-well-deep: #e4ece9; /* poço profundo (era slate-950) */ --rg-border: #e3eae7; /* divisor discreto (era slate-800) */ --rg-border-strong: #c8d5d0; /* borda de card/input (era slate-700) */ --rg-border-hard: #b0c1ba; /* borda marcada (era slate-600) */ --rg-text: #15211d; /* texto principal (era white/100) */ --rg-text-2: #3a4a44; /* texto secundário (era slate-300) */ --rg-text-3: #66786f; /* texto de apoio (era slate-400) */ --rg-text-dim: #7e8f86; /* dica apagada (era slate-600) */ --rg-glass: rgba(255, 255, 255, 0.78); --rg-glass-border: rgba(21, 33, 29, 0.08); --rg-scroll-thumb: #c8d5d0; --rg-chip: #d5ece5; /* brand-100 */ --rg-chip-text: #073b33; /* brand-900 */ --rg-ok-text: #047857; /* emerald-700 */ --rg-login-brilho: #dfefe9; /* véu verde do login */ } /* O brilho radial índigo do fundo é pensado para o escuro; no claro ele vira um véu sujo, então quase some. */ html.light #bgGlow { opacity: 0.30; } /* ── Fundos sólidos ──────────────────────────────────────────── */ html.light .bg-slate-950 { background-color: var(--rg-well-deep) !important; } html.light .bg-slate-900 { background-color: var(--rg-well) !important; } html.light .bg-slate-800, html.light .bg-gray-800 { background-color: var(--rg-surface) !important; } html.light .bg-slate-700, html.light .bg-gray-700 { background-color: var(--rg-surface-2) !important; } html.light .bg-slate-600, html.light .bg-gray-600 { background-color: var(--rg-surface-3) !important; } html.light .bg-slate-500 { background-color: #cbd5e1 !important; } /* ── Fundos translúcidos "elevados" (slate-800/xx) ──────────── No escuro eles clareiam o card; no claro, o equivalente é branco com alfa proporcional — sutil continua sutil. */ html.light [class~="bg-slate-800/10"] { background-color: rgba(255,255,255,0.35) !important; } html.light [class~="bg-slate-800/20"] { background-color: rgba(255,255,255,0.50) !important; } html.light [class~="bg-slate-800/25"] { background-color: rgba(255,255,255,0.55) !important; } html.light [class~="bg-slate-800/30"] { background-color: rgba(255,255,255,0.62) !important; } html.light [class~="bg-slate-800/40"] { background-color: rgba(255,255,255,0.70) !important; } html.light [class~="bg-slate-800/50"] { background-color: rgba(255,255,255,0.78) !important; } html.light [class~="bg-slate-800/60"] { background-color: rgba(255,255,255,0.85) !important; } html.light [class~="bg-slate-800/70"] { background-color: rgba(255,255,255,0.90) !important; } html.light [class~="bg-slate-800/80"] { background-color: rgba(255,255,255,0.95) !important; } /* ── Fundos translúcidos "poço" (slate-700/600 com alfa) ─────── */ html.light [class~="bg-slate-700/20"] { background-color: rgba(15,23,42,0.035) !important; } html.light [class~="bg-slate-700/30"] { background-color: rgba(15,23,42,0.045) !important; } html.light [class~="bg-slate-700/40"] { background-color: rgba(15,23,42,0.055) !important; } html.light [class~="bg-slate-700/50"] { background-color: rgba(15,23,42,0.065) !important; } html.light [class~="bg-slate-700/60"] { background-color: rgba(15,23,42,0.075) !important; } html.light [class~="bg-slate-600/20"] { background-color: rgba(15,23,42,0.055) !important; } html.light [class~="bg-slate-600/30"] { background-color: rgba(15,23,42,0.070) !important; } html.light [class~="bg-slate-600/40"] { background-color: rgba(15,23,42,0.085) !important; } html.light [class~="bg-slate-600/50"] { background-color: rgba(15,23,42,0.100) !important; } /* ── Fundos translúcidos "profundos" (slate-900/950 com alfa) ── São poços, cabeçalhos fixos e blocos de código: no claro viram um véu escuro bem leve sobre o branco. */ html.light [class~="bg-slate-900/20"] { background-color: rgba(15,23,42,0.025) !important; } html.light [class~="bg-slate-900/30"] { background-color: rgba(15,23,42,0.030) !important; } html.light [class~="bg-slate-900/40"] { background-color: rgba(15,23,42,0.035) !important; } html.light [class~="bg-slate-900/50"] { background-color: rgba(15,23,42,0.040) !important; } html.light [class~="bg-slate-900/60"] { background-color: rgba(15,23,42,0.045) !important; } html.light [class~="bg-slate-900/70"] { background-color: rgba(15,23,42,0.050) !important; } html.light [class~="bg-slate-900/80"] { background-color: rgba(241,245,249,0.92) !important; } html.light [class~="bg-slate-900/90"] { background-color: rgba(241,245,249,0.96) !important; } html.light [class~="bg-slate-900/95"] { background-color: rgba(241,245,249,0.98) !important; } html.light [class~="bg-slate-950/20"] { background-color: rgba(15,23,42,0.030) !important; } html.light [class~="bg-slate-950/30"] { background-color: rgba(15,23,42,0.035) !important; } html.light [class~="bg-slate-950/40"] { background-color: rgba(15,23,42,0.040) !important; } html.light [class~="bg-slate-950/50"] { background-color: rgba(15,23,42,0.045) !important; } html.light [class~="bg-slate-950/60"] { background-color: rgba(15,23,42,0.050) !important; } html.light [class~="bg-slate-950/70"] { background-color: rgba(15,23,42,0.055) !important; } html.light [class~="bg-slate-950/80"] { background-color: rgba(15,23,42,0.060) !important; } /* Exceção: a MESMA classe bg-slate-950/xx é o véu dos modais (fixed inset-0). Véu escuro continua correto no tema claro. */ html.light .fixed.inset-0[class~="bg-slate-950/50"], html.light .fixed.inset-0[class~="bg-slate-950/70"], html.light .fixed.inset-0[class~="bg-slate-950/80"] { background-color: rgba(15, 23, 42, 0.45) !important; } /* ── Bordas ─────────────────────────────────────────────────── */ html.light .border-slate-900, html.light [class~="border-slate-900/30"] { border-color: #eef2f7 !important; } html.light .border-slate-800, html.light [class~="border-slate-800/30"], html.light [class~="border-slate-800/40"], html.light [class~="border-slate-800/50"], html.light [class~="border-slate-800/60"], html.light [class~="border-slate-800/70"], html.light [class~="border-slate-800/80"] { border-color: var(--rg-border) !important; } html.light .border-slate-700, html.light [class~="border-slate-700/30"], html.light [class~="border-slate-700/40"], html.light [class~="border-slate-700/50"], html.light [class~="border-slate-700/60"], html.light [class~="border-slate-700/70"], html.light [class~="border-slate-700/80"] { border-color: var(--rg-border-strong) !important; } html.light .border-slate-600, html.light .border-gray-600, html.light [class~="border-slate-600/30"], html.light [class~="border-slate-600/40"], html.light [class~="border-slate-600/50"] { border-color: var(--rg-border-hard) !important; } /* divide-slate-*: o Tailwind aplica a cor nos filhos, não no pai */ html.light [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--rg-border) !important; } /* Véus brancos herdados do tema escuro */ html.light [class~="border-white/5"] { border-color: rgba(15,23,42,0.07) !important; } html.light [class~="bg-white/5"] { background-color: rgba(15,23,42,0.03) !important; } html.light [class~="bg-white/10"] { background-color: rgba(15,23,42,0.05) !important; } /* ── Texto ──────────────────────────────────────────────────── */ html.light .text-white, html.light .text-slate-100, html.light [class~="hover:text-white"]:hover { color: var(--rg-text) !important; } html.light .text-slate-200 { color: #1e293b !important; } html.light .text-slate-300 { color: var(--rg-text-2) !important; } html.light .text-slate-400 { color: var(--rg-text-3) !important; } html.light .text-slate-600 { color: var(--rg-text-dim) !important; } html.light [class~="text-slate-600/50"] { color: rgba(148,163,184,0.75) !important; } html.light [class~="text-white/90"] { color: rgba(15,23,42,0.90) !important; } html.light [class~="text-white/50"] { color: rgba(15,23,42,0.55) !important; } html.light [class~="text-white/40"] { color: rgba(15,23,42,0.45) !important; } /* text-slate-500 (o rótulo mais usado do sistema) já tem contraste suficiente sobre branco — fica como está de propósito. */ html.light .placeholder-slate-500::placeholder, html.light .placeholder-slate-600::placeholder { color: var(--rg-text-dim) !important; } /* Exceção: botões e selos com fundo saturado mantêm texto branco. bg-brand-700 fica de fora porque essa tonalidade não existe no tailwind.config (o fundo é transparente — ver README do tema). */ html.light .text-white[class*="bg-"]:not([class*="bg-slate"]):not([class*="bg-gray"]):not([class*="bg-white"]):not([class*="bg-brand-7"]), html.light .text-white[class*="bg-gradient"], html.light .text-white[class*="hover:bg-brand"]:hover, html.light .text-white[class*="hover:bg-indigo"]:hover, html.light .text-white[class*="hover:bg-emerald"]:hover, html.light .text-white[class*="hover:bg-rose"]:hover, html.light .text-white[class*="hover:bg-amber"]:hover { color: #ffffff !important; } /* ── Acentos: -300/-400 são pensados para fundo escuro e somem no branco; no claro descem para -600/-700/-800. O seletor [class*="cor-400/"] pega as variantes com opacidade (text-amber-400/80 e afins, ~180 usos). Não há nenhuma classe hover:/group-hover: com opacidade no projeto, então casar pelo trecho com a barra é seguro. */ html.light .text-emerald-400, html.light [class*="text-emerald-400/"] { color: #047857 !important; } html.light .text-emerald-300, html.light [class*="text-emerald-300/"] { color: #065f46 !important; } html.light .text-emerald-200, html.light [class*="text-emerald-200/"], html.light .text-emerald-100 { color: #065f46 !important; } html.light .text-rose-400, html.light [class*="text-rose-400/"] { color: #e11d48 !important; } html.light .text-rose-300, html.light [class*="text-rose-300/"] { color: #be123c !important; } html.light .text-rose-200, html.light [class*="text-rose-200/"], html.light .text-rose-100 { color: #9f1239 !important; } html.light .text-amber-400, html.light [class*="text-amber-400/"] { color: #b45309 !important; } html.light .text-amber-300, html.light [class*="text-amber-300/"] { color: #92400e !important; } html.light .text-amber-200, html.light [class*="text-amber-200/"], html.light .text-amber-100 { color: #78350f !important; } html.light .text-yellow-400, html.light [class*="text-yellow-400/"] { color: #a16207 !important; } html.light .text-orange-400, html.light [class*="text-orange-400/"] { color: #c2410c !important; } html.light .text-orange-300, html.light [class*="text-orange-300/"] { color: #c2410c !important; } html.light .text-indigo-400, html.light [class*="text-indigo-400/"] { color: #4f46e5 !important; } html.light .text-indigo-300, html.light [class*="text-indigo-300/"] { color: #4338ca !important; } html.light .text-indigo-200 { color: #3730a3 !important; } html.light .text-teal-400, html.light [class*="text-teal-400/"] { color: #0f766e !important; } html.light .text-teal-300, html.light [class*="text-teal-300/"] { color: #115e59 !important; } html.light .text-teal-100 { color: #115e59 !important; } html.light .text-cyan-400, html.light [class*="text-cyan-400/"] { color: #0e7490 !important; } html.light .text-cyan-300, html.light [class*="text-cyan-300/"] { color: #155e75 !important; } html.light .text-cyan-200 { color: #155e75 !important; } html.light .text-sky-400, html.light [class*="text-sky-400/"] { color: #0369a1 !important; } html.light .text-sky-300, html.light [class*="text-sky-300/"] { color: #075985 !important; } html.light .text-blue-400, html.light [class*="text-blue-400/"] { color: #2563eb !important; } html.light .text-blue-300, html.light [class*="text-blue-300/"] { color: #1d4ed8 !important; } html.light .text-violet-400, html.light [class*="text-violet-400/"] { color: #7c3aed !important; } html.light .text-violet-300, html.light [class*="text-violet-300/"] { color: #6d28d9 !important; } html.light .text-violet-200 { color: #5b21b6 !important; } html.light .text-purple-400, html.light [class*="text-purple-400/"] { color: #9333ea !important; } html.light .text-purple-300, html.light [class*="text-purple-300/"] { color: #7e22ce !important; } html.light .text-fuchsia-300 { color: #a21caf !important; } /* O tom -500 também é claro demais sobre branco (amber-500 dá 1,8:1) */ html.light .text-amber-500, html.light [class*="text-amber-500/"] { color: #b45309 !important; } html.light .text-yellow-500 { color: #a16207 !important; } html.light .text-orange-500 { color: #c2410c !important; } html.light .text-lime-500 { color: #4d7c0f !important; } html.light .text-emerald-500, html.light [class*="text-emerald-500/"] { color: #047857 !important; } html.light .text-green-500 { color: #15803d !important; } html.light .text-teal-500 { color: #0f766e !important; } html.light .text-cyan-500 { color: #0e7490 !important; } html.light .text-sky-500 { color: #0369a1 !important; } html.light .text-rose-500, html.light [class*="text-rose-500/"] { color: #e11d48 !important; } html.light .text-red-500 { color: #dc2626 !important; } html.light .text-blue-500 { color: #2563eb !important; } html.light .text-violet-500 { color: #7c3aed !important; } html.light .text-red-400, html.light [class*="text-red-400/"] { color: #dc2626 !important; } html.light .text-red-300 { color: #b91c1c !important; } html.light .text-lime-400 { color: #4d7c0f !important; } html.light .text-lime-300 { color: #4d7c0f !important; } /* ── Caixas de aviso tingidas (bg--950/xx) ───────────────── No escuro são um véu quase preto da própria cor sobre o fundo; no claro o equivalente é um tingimento leve da mesma cor. Cobre tanto a versão sólida quanto as com opacidade. */ html.light [class*="bg-emerald-950"] { background-color: rgba(16,185,129,0.09) !important; } html.light [class*="bg-rose-950"] { background-color: rgba(244, 63, 94,0.08) !important; } html.light [class*="bg-amber-950"] { background-color: rgba(245,158, 11,0.10) !important; } html.light [class*="bg-sky-950"] { background-color: rgba( 14,165,233,0.09) !important; } html.light [class*="bg-blue-950"] { background-color: rgba( 59,130,246,0.09) !important; } html.light [class*="bg-indigo-950"] { background-color: rgba( 99,102,241,0.09) !important; } html.light [class*="bg-violet-950"] { background-color: rgba(139, 92,246,0.09) !important; } html.light [class*="bg-purple-950"] { background-color: rgba(168, 85,247,0.09) !important; } /* ── Blocos que continuam pretos (console de ferramentas, visor de mídia): o texto dentro deles precisa continuar claro. O véu dos modais também é bg-black/xx, por isso o :not(.fixed). */ html.light [class*="bg-black/"]:not(.fixed)[class*="text-slate-"], html.light [class*="bg-black/"]:not(.fixed) [class*="text-slate-"], html.light [class*="bg-black/"]:not(.fixed) .text-white { color: #cbd5e1 !important; } /* ── Gráficos SVG desenhados à mão (análises, painéis) ────────── As telas de análise desenham eixo/grade com stroke="#1e293b" no próprio SVG. CSS vence atributo de apresentação, então dá para clarear a grade sem tocar no PHP das 5 telas. */ html.light [stroke="#1e293b"] { stroke: #e6ebf2 !important; } html.light [stroke="#334155"] { stroke: #cbd5e1 !important; } html.light [stroke="#475569"] { stroke: #94a3b8 !important; } html.light [fill="#94a3b8"] { fill: #64748b !important; } /* ── Sombras: a sombra preta do tema escuro fica pesada no claro ─ */ html.light [class*="shadow-black"] { --tw-shadow-color: rgba(15,23,42,0.10) !important; } html.light .shadow-2xl { --tw-shadow: 0 12px 32px -12px rgba(15,23,42,0.18) !important; } /* Nota: os mockups de tela do WhatsApp (regua_fluxo.php, campanhas_recorrentes.php) usam cor em style="" inline, então já ficam escuros nos dois temas — que é o comportamento desejado. */