:root { /* Tema escuro amaciado: fundo saindo de um quase-preto (#060b13) para um grafite-azulado (#10151f), e branco de destaque saindo de puro (#ffffff) para levemente suavizado (#eff1f7) — reduz o choque de contraste sem perder legibilidade. Marca (roxo/ciano), cores de status e o destaque roxo/ciano da linha do consultor no calendário (.consultantGroupRow, mais abaixo) ficam inalterados de propósito. */ --bg: #10151f; --bg2: #161c29; --card: #1a2130; --card2: #1f2739; --line: #2c3650; --txt: #dce1ee; --mut: #92a3bc; --pri: #6f63ff; --pri2: #8b7eff; --cyan: #22d3ee; --ok: #22c55e; --warn: #facc15; --bad: #fb7185; --blue: #60a5fa; --radius: 18px; --shadow: 0 20px 55px rgba(0, 0, 0, 0.34); /* =================================================================== Variáveis de superfície/tema — introduzidas para suportar o tema claro (ver bloco [data-theme="light"] abaixo). Cada uma abstrai um padrão de cor hardcoded que se repetia dezenas de vezes pelo arquivo (fundos de painel, bordas translúcidas azuis, sombras, brilhos). Os valores aqui são os do tema escuro amaciado — trocar o tema só sobrescreve estas variáveis, nada mais. =================================================================== */ --surf-0: #10151f; /* fundo geral da página */ --surf-1: #141b28; /* painéis, cards, inputs, tabelas — nível 1 */ --surf-2: #1a2130; /* painéis, modais — nível 2, levemente mais claro */ --surf-3: #232c40; /* th de tabela, toggles, elementos elevados */ --surf-4: #262f46; /* hover de itens de lista/menu */ --surf-5: #1c2434; /* coluna fixa da tabela do calendário */ --surf-6: #2e3a54; /* hover de combo/botão secundário */ --surf-7: #384566; /* borda de allocRow */ --txt-strong: #eff1f7; /* era branco puro — títulos de destaque, ícones ativos */ --txt-soft: #c9d8f6; /* texto azul claro — labels secundários */ --txt-softer: #a9c2ec; --line-soft: #242c40; /* divisórias sutis (bordas de tabela) */ --shine: rgba(255, 255, 255, 0.05); /* brilho/realce sutil sobre superfície escura */ --shine-strong: rgba(255, 255, 255, 0.07); --shadow-soft: rgba(0, 0, 0, 0.15); --shadow-strong: rgba(0, 0, 0, 0.26); --overlay: rgba(8, 12, 20, 0.62); /* fundo do backdrop de modal */ --overlay-soft: rgba(8, 12, 20, 0.42); /* backdrop de loading global */ --accent-rgb: 96, 165, 250; /* componentes RGB de --blue, para usar em rgba() */ --hero-gradient: linear-gradient(165deg, #1a2130, #10151f 78%); --hero-radial-1: rgba(34, 211, 238, 0.32); --hero-radial-2: rgba(111, 99, 255, 0.4); --panel-rgb: 26, 33, 48; --panel-rgb-2: 31, 39, 57; --capacity-col-rgb: 36, 44, 64; --hero-radial-bg: #1e2c4a; --c-ok-text: #86efac; --c-warn-text: #fde68a; --c-info-text: #93c5fd; --c-bad-text: #fda4af; --c-holiday-text: #fde68a; --c-leadership-text: #d8b4fe; --c-travel-text: #fed7aa; --c-displacement-text: #a5f3fc; } /* ========================================================= Tema claro — ativado via [data-theme="light"] no . Sobrescreve somente as variáveis de superfície/texto; cores de acento e de status (chips, badges) usam tons equivalentes calibrados para fundo claro nas regras específicas abaixo. ========================================================= */ html[data-theme="light"] { /* Paleta refinada — mesma marca do tema escuro (roxo + ciano), recalibrada para fundo claro. Neutros com leve viés violeta em vez de cinza puro, sombra em camadas (contato + difusa) em vez de uma sombra única achatada. Cores de status (ok/warn/bad) mantidas como já estavam — não fizeram parte do ajuste. */ --bg: #f3f1fb; --bg2: #ebe6f8; --card: #ffffff; --card2: #f8f6fc; --line: #e9e4f7; --txt: #201a3a; --mut: #675e82; --pri: #5b4fe0; --pri2: #7a6dfb; --cyan: #0c8ca8; --ok: #16a34a; --warn: #b45309; --bad: #e11d48; --blue: #1d6fe8; --shadow: 0 1px 2px rgba(28, 20, 58, 0.05), 0 20px 44px -16px rgba(28, 20, 58, 0.2); --surf-0: #f3f1fb; --surf-1: #ffffff; --surf-2: #ffffff; --surf-3: #eeeaf9; --surf-4: #e6e0f5; --surf-5: #f7f5fc; --surf-6: #dfd8f2; --surf-7: #cfc5e8; --txt-strong: #120d28; --txt-soft: #4c3fa6; --txt-softer: #5a5296; --line-soft: #f2eefa; --shine: rgba(28, 20, 58, 0.05); --shine-strong: rgba(28, 20, 58, 0.08); --shadow-soft: rgba(28, 20, 58, 0.1); --shadow-strong: rgba(28, 20, 58, 0.18); --overlay: rgba(18, 13, 40, 0.38); --overlay-soft: rgba(18, 13, 40, 0.2); --accent-rgb: 29, 111, 232; --hero-gradient: linear-gradient(165deg, #f8f6fc, #f3f1fb 78%); --hero-radial-1: rgba(12, 140, 168, 0.16); --hero-radial-2: rgba(91, 79, 224, 0.16); --panel-rgb: 255, 255, 255; --panel-rgb-2: 255, 255, 255; --capacity-col-rgb: 255, 255, 255; --hero-radial-bg: #dcd4f5; --c-ok-text: #15803d; --c-warn-text: #92400e; --c-info-text: #1d6fe8; --c-bad-text: #be123c; --c-holiday-text: #92400e; --c-leadership-text: #7e22ce; --c-travel-text: #c2410c; --c-displacement-text: #0e7490; } /* =================================================================== Componentes com cor fixa fora do sistema de variáveis (pensados originalmente só para o tema escuro) — sobrescritos aqui somente para o tema claro. O tema escuro continua usando as regras originais, sem nenhuma alteração. =================================================================== */ /* Fim de semana não é um estado "bom/ruim", é só um dia não-útil — vira neutro em vez de tomar emprestada a cor de conflito (vermelho), que fica reservada só pra alertas de verdade. */ html[data-theme="light"] .weekend { background: rgba(103, 94, 130, 0.12) !important; color: var(--mut); } html[data-theme="light"] .calendarTable .weekend { background: repeating-linear-gradient( 135deg, rgba(103, 94, 130, 0.07) 0 9px, rgba(103, 94, 130, 0.12) 9px 18px ) !important; } html[data-theme="light"] .calendarTable th.weekend { background: linear-gradient(180deg, var(--surf-4), var(--surf-3)) !important; color: var(--mut); } html[data-theme="light"] .calendarTable .todayHead { background: linear-gradient(180deg, var(--pri), var(--blue)) !important; color: #fff; } html[data-theme="light"] .calendarTable .holiday { background: linear-gradient( 135deg, rgba(146, 64, 14, 0.18), rgba(146, 64, 14, 0.08) ) !important; color: var(--c-holiday-text); } html[data-theme="light"] .calendarTable th.holiday, html[data-theme="light"] .calendarTable th.holiday.weekend { background: linear-gradient(180deg, #fbe2a8, #f6d583) !important; color: #6b3d05; } html[data-theme="light"] .calendarTable .holiday.weekend { background: repeating-linear-gradient( 135deg, rgba(146, 64, 14, 0.16) 0 9px, rgba(146, 64, 14, 0.09) 9px 18px ) !important; } /* Degradês das células de alocação (confirmada/temporária/férias/ compensação/viagem/deslocamento) ficam pesados/"plásticos" sobre o fundo claro — no tema claro, troca pra fundo pastel + texto escuro (em vez de fundo escuro sólido + texto claro, herdado do tema escuro), bem mais suave. Só a cor muda — borda, sombra, ícone, tamanho continuam iguais. .consultantDayVacation é a pílula "Férias" da linha-resumo do consultor (linha de cima), diferente de .allocChip.vacation (célula de projeto) — as duas usavam o mesmo degradê azul escuro. */ html[data-theme="light"] .allocChip.confirmed { background: rgba(34, 197, 94, 0.28); color: #14532d; } html[data-theme="light"] .allocChip.temporary { background: rgba(217, 119, 6, 0.26); color: #78350f; } html[data-theme="light"] .allocChip.vacation, html[data-theme="light"] .consultantDayVacation { background: rgba(37, 99, 235, 0.22); color: #1e3a8a; } html[data-theme="light"] .allocChip.comp { background: rgba(147, 51, 234, 0.22); color: #581c87; } html[data-theme="light"] .allocChip.travel { background: rgba(234, 88, 12, 0.24); color: #7c2d12; } html[data-theme="light"] .allocChip.displacement { background: rgba(8, 145, 178, 0.22); color: #164e63; } /* .miniMeta (texto pequeno "Remoto"/"temp."/"2 lanç." dentro do chip) é branco translúcido — pensado pro fundo escuro sólido de antes. Com o fundo pastel novo, fica ilegível; troca pra preto translúcido. */ html[data-theme="light"] .allocChip .miniMeta { color: rgba(0, 0, 0, 0.55); } /* .tag.ok/.warn/.info/.bad (ex.: "ativo"/"inativo" nas listagens) usam o mesmo fundo neutro --surf-4 de qualquer tag comum, só com o texto colorido — no claro isso vira uma pílula cinza-arroxeada sem graça, quase sem relação com a cor do texto. Dá um fundo/borda com leve tingimento na cor de cada estado, só no tema claro. */ html[data-theme="light"] .tag.ok { background: rgba(21, 128, 61, 0.12); border-color: rgba(21, 128, 61, 0.3); } html[data-theme="light"] .tag.warn { background: rgba(146, 64, 14, 0.12); border-color: rgba(146, 64, 14, 0.3); } html[data-theme="light"] .tag.info { background: rgba(29, 111, 232, 0.12); border-color: rgba(29, 111, 232, 0.3); } html[data-theme="light"] .tag.bad { background: rgba(190, 18, 60, 0.12); border-color: rgba(190, 18, 60, 0.3); } /* .tabBtn.active (aba selecionada, ex.: Relatórios) usava um degradê bem translúcido (.85/.28 de opacidade) + texto branco — pensado pro fundo escuro, onde fica vívido. No claro, o degradê quase some sobre o fundo claro e o texto branco fica quase ilegível. Troca pra um degradê sólido (opaco) só no tema claro. */ html[data-theme="light"] .tabBtn.active { background: linear-gradient(135deg, var(--pri), var(--pri2)); box-shadow: 0 2px 8px rgba(111, 99, 255, 0.35); } /* Tags de viagem/deslocamento/liderança/feriado tinham fundo e borda com opacidade muito baixa (.10/.12), fora do sistema de tema — ficavam "lavadas" sobre fundo claro. Fundo/borda mais fortes, tingidos na própria cor de cada tag. */ html[data-theme="light"] .tag.holidayTag { border-color: rgba(146, 64, 14, 0.32); background: rgba(146, 64, 14, 0.1); } html[data-theme="light"] .tag.leadershipTag { border-color: rgba(126, 34, 206, 0.35); background: rgba(126, 34, 206, 0.12); } html[data-theme="light"] .tag.travelTag { border-color: rgba(194, 65, 12, 0.35); background: rgba(194, 65, 12, 0.13); } html[data-theme="light"] .tag.displacementTag { border-color: rgba(14, 116, 144, 0.35); background: rgba(14, 116, 144, 0.13); } /* Botões ganham uma sombra escura neutra (nunca colorida) pra dar elevação — no tema escuro os botões já se destacam naturalmente pelo brilho da própria cor, então essa sombra fica só no claro. */ html[data-theme="light"] .btn { box-shadow: 0 1px 2px rgba(28, 20, 58, 0.06), 0 8px 16px -6px rgba(28, 20, 58, 0.22); } html[data-theme="light"] .btn.secondary { box-shadow: none; } /* Célula vazia do calendário (sem alocação) usa opacity:.45 nos dois temas — sobre fundo já bem claro isso deixa o ícone/conteúdo quase invisível, dando sensação de tela "apagada". Sobe o piso mínimo de contraste só no claro. */ html[data-theme="light"] .allocChip.empty { opacity: 0.7; } /* Pill "0h" da linha-resumo do consultor (soma do dia, distinta de .allocChip): opacity:.42 + fundo quase invisível (rgba(var(--panel-rgb-2),.56) = branco sobre branco no claro) + texto cinza fixo (#94a3b8, calibrado só pro escuro) — três coisas que tornavam "0h" quase ilegível. A borda azulada de cada pill (herdada de .consultantDayTotal) também se repetia em cada célula vazia, criando a sensação de "grade cheia de linhas". */ html[data-theme="light"] .consultantDayTotal.empty { opacity: 0.85; background: var(--surf-4); color: var(--mut); border-color: transparent; box-shadow: none; }