/* Tema escuro e fonte da família Mira, em um arquivo só. * * COMO USAR (duas linhas em cada tela, antes do fechamento do ): * * * * POR QUE ASSIM, E NÃO EDITANDO AS TELAS. * * Levantamento de 05/09/2026: os sistemas Mira usam Tailwind por CDN, com a cor * escrita como classe literal dentro do HTML. São mais de 4.000 ocorrências na * família (1.719 só no mira-dp). Pior: em quase todos os projetos há nome de * classe de cor MONTADO COMO TEXTO DENTRO DO JAVASCRIPT, do tipo * `return 'bg-green-100 text-green-700'`, que nenhuma busca no HTML encontra. * * Editar isso à mão significaria milhares de alterações em oito sistemas em * produção, com a garantia de esquecer as que estão dentro do JS. Este arquivo * faz o contrário: reinterpreta no escuro as poucas dezenas de classes que a * família realmente usa. Como a mudança é no CSS, ela alcança também a classe * que nasceu dentro do JavaScript, sem que ninguém precise achar essa linha. * * E como ele é servido pelo portal, corrigir um tom aqui corrige em todos os * sistemas de uma vez, sem deploy nenhum (mesmo caminho já usado pelo * renovar-sessao.js). * * QUAIS CLASSES SÃO COBERTAS: as medidas em 05/09/2026 nas telas da família, * ampliadas em 07/09/2026 (ver bloco "segunda leva" mais abaixo) depois de o * Rodolfo reportar texto ilegível no escuro em vários módulos. O neutro é * slate/zinc/neutral/stone (a família usa as quatro, à vontade, para a MESMA * coisa: texto e borda neutros), o destaque é blue, e os selos semânticos são * green, red, amber, purple, emerald, orange, teal, cyan, sky, pink/fuchsia e * lime. Classe fora dessa lista continua com a cor clara original, o que é * proposital: é melhor um detalhe claro no escuro do que uma cor trocada onde * ela significava alguma coisa. * * O ACHADO DE 07/09/2026, para não se repetir: o módulo Seleção de * Currículos/Dossiê (mira-rh-selecao) usa `zinc` como paleta neutra em TODA * tela — dezenas de arquivos, centenas de ocorrências — e `zinc` não estava * coberto. O efeito prático: o FUNDO de cada cartão escurecia (`bg-white` é * coberto), mas o TEXTO continuava cinza-escuro original (`text-zinc-800` não * era coberto), e cinza-escuro sobre fundo quase preto é o retrato exato de * "texto ilegível no escuro". A causa não era um erro de cor no módulo — era * este arquivo não conhecer uma palavra neutra que a família usa. A correção * foi AQUI, cobrindo `zinc` (e, por simetria, `neutral`/`stone`, as duas * variantes de cinza que faltavam), e não reescrever o módulo inteiro. */ /* ---------------------------------------------------------------- fonte * A família não declarava fonte: mira-nfe, mira-rh, mira-dp, mira-sign, * mira-planejamento, mira-produtividade e monday-api rodavam na fonte padrão * do navegador, e por isso não pareciam da mesma casa. Estas são as mesmas * duas do portal. */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Public+Sans:wght@400;500;600;700&display=swap'); :root { --mira-titulo: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif; --mira-texto: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } body { font-family: var(--mira-texto); } /* A fonte de TÍTULO vale para os títulos de verdade, e só. * * A primeira versão pegava qualquer elemento com `text-lg`, e `text-lg` na * família também aparece em parágrafo e em rótulo: um texto corrido inteiro * saía na fonte de display, que é feita para chamada curta. Agora o critério é * o que define um título na prática: tamanho grande E peso forte, juntos. */ h1, h2, h3, .titulo, [class*="text-2xl"], [class*="text-3xl"], [class*="text-xl"][class*="font-bold"], [class*="text-xl"][class*="font-semibold"], [class*="text-lg"][class*="font-bold"], [class*="text-lg"][class*="font-semibold"] { font-family: var(--mira-titulo); } /* ------------------------------------------------------------- paleta escura * Os tons acompanham o portal, para as telas não brigarem quando alguém pula * de um sistema para outro pelas abas. */ :root { --mira-ground: #11151a; /* fundo da página (era slate-50/100) */ --mira-card: #1a1f27; /* superfície, cartão (era white) */ --mira-card-2: #232a34; /* superfície secundária (era slate-200) */ --mira-line: #2c343f; /* bordas e divisores */ --mira-ink: #e6e9ee; /* texto principal (era slate-800/900)*/ --mira-ink-2: #aeb6c2; /* texto secundário (era slate-600/700)*/ --mira-ink-3: #7d8695; /* texto de apoio (era slate-400/500)*/ } /* UMA CONDIÇÃO SÓ: [data-theme="dark"]. * * O estado "seguir o aparelho" NÃO ganha um segundo conjunto de regras aqui. * Quem resolve isso é o tema-mira.js: ele lê a escolha da pessoa, pergunta ao * sistema operacional quando a escolha é "seguir o aparelho", e marca no * o resultado JÁ RESOLVIDO (dark ou light). Fica ouvindo a troca do * tema do sistema para reagir na hora. * * Isso é deliberado, e é a diferença em relação ao estilo.css do portal, que * declara a paleta escura DUAS VEZES (uma sob `prefers-color-scheme`, outra * sob `data-theme`). O levantamento de 05/09/2026 apontou aquilo como o risco * número um daquele arquivo: quem edita um bloco e esquece o outro cria um * escuro ESCOLHIDO diferente do escuro HERDADO do sistema, e ninguém percebe, * porque testar exigiria alternar o tema do Windows. Aqui a paleta existe uma * vez só, então esse erro não tem como acontecer. */ [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* --- fundo da página e superfícies --- */ [data-theme="dark"] body, [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100, [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background-color: var(--mira-ground); } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-slate-white { background-color: var(--mira-card); } [data-theme="dark"] .bg-slate-200, [data-theme="dark"] .bg-gray-200, [data-theme="dark"] .bg-slate-300 { background-color: var(--mira-card-2); } /* --- texto --- */ [data-theme="dark"] body, [data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-black { color: var(--mira-ink); } [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-600 { color: var(--mira-ink-2); } [data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-slate-400, [data-theme="dark"] .text-slate-300, [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400 { color: var(--mira-ink-3); } /* --- bordas e divisores --- */ [data-theme="dark"] .border-slate-50, [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-slate-300, [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-300, [data-theme="dark"] .divide-slate-100 > * + *, [data-theme="dark"] .divide-slate-200 > * + * { border-color: var(--mira-line); } /* --- estados de passar o mouse --- * Sem isto, passar o mouse numa linha de lista a deixa BRANCA no tema escuro, * que é o defeito mais visível de um tema escuro mal feito. */ [data-theme="dark"] .hover\:bg-slate-50:hover, [data-theme="dark"] .hover\:bg-slate-100:hover, [data-theme="dark"] .hover\:bg-gray-50:hover, [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--mira-card-2); } [data-theme="dark"] .hover\:bg-white:hover { background-color: var(--mira-card-2); } /* --- campos de formulário --- * O placeholder precisa vir junto, senão ele fica quase invisível. */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--mira-card-2); border-color: var(--mira-line); color: var(--mira-ink); } [data-theme="dark"] ::placeholder { color: var(--mira-ink-3); opacity: 1; } /* --- destaque (azul) --- * O azul sólido de botão CONTINUA azul: ele é a identidade e tem contraste de * sobra no escuro. Só os fundos azuis CLAROS (usados como selo) mudam, porque * um bloco azul-bebê no escuro é uma mancha. */ [data-theme="dark"] .bg-blue-50, [data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18); } [data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-600 { color: #7cb2ff; } /* --- selos semânticos --- * A cor aqui CARREGA SIGNIFICADO (verde = deu certo, vermelho = falhou), então * ela não pode virar cinza. O fundo claro vira um véu translúcido da mesma * cor e o texto clareia: continua verde, continua legível. */ [data-theme="dark"] .bg-green-50, [data-theme="dark"] .bg-green-100, [data-theme="dark"] .bg-emerald-50, [data-theme="dark"] .bg-emerald-100 { background-color: rgba(34, 197, 94, 0.18); } [data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-600, [data-theme="dark"] .text-green-800, [data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-emerald-600 { color: #5fd68a; } [data-theme="dark"] .bg-red-50, [data-theme="dark"] .bg-red-100, [data-theme="dark"] .bg-rose-50, [data-theme="dark"] .bg-rose-100 { background-color: rgba(239, 68, 68, 0.18); } [data-theme="dark"] .text-red-700, [data-theme="dark"] .text-red-600, [data-theme="dark"] .text-red-500, [data-theme="dark"] .text-rose-700 { color: #ff8a8a; } [data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-amber-100, [data-theme="dark"] .bg-yellow-50, [data-theme="dark"] .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.18); } [data-theme="dark"] .text-amber-800, [data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-600, [data-theme="dark"] .text-yellow-700 { color: #f0b657; } [data-theme="dark"] .bg-purple-50, [data-theme="dark"] .bg-purple-100, [data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-100 { background-color: rgba(168, 85, 247, 0.18); } [data-theme="dark"] .text-purple-700, [data-theme="dark"] .text-purple-600, [data-theme="dark"] .text-indigo-700 { color: #c79bf5; } /* --- sombras --- * Sombra preta sobre fundo escuro não aparece; sem ajuste, os cartões perdem o * relevo e a tela vira um borrão sem hierarquia. */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-md { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-xl { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65); } /* --- o logo da Mirante no fundo escuro --- * O logo colorido foi desenhado para fundo claro: a montanha azul sobrevive, * mas a palavra "Mirante" e cinza-escura e some no tema escuro. * * A solucao NAO e recolorir o logo por filtro de CSS, que seria manipular o * ativo de marca. Existe uma versao OFICIAL para fundo escuro, e e ela que * entra aqui: logo-mirante-branca.png, servido pelo portal, byte a byte igual * ao arquivo de marketing (logo-horizontal-branca-fundotransparente-sem-slogan). * Mesmas dimensoes do colorido (2000x696), entao nao ha distorcao. * * `:not([src*="branca"])` para a tela que ja usa a branca nao trocar por ela * mesma. A URL e relativa: resolve contra este arquivo, ou seja, sempre contra * o portal, independente do sistema que estiver carregando o tema. */ [data-theme="dark"] img[src*="logo"]:not([src*="branca"]) { content: url("logo-mirante-branca.png"); } /* ============================================================ segunda leva * 07/09/2026. Achado revisando a família inteira atrás do defeito relatado * pelo Rodolfo ("modo escuro tirando a legibilidade dos textos"). Duas * famílias de classe apareciam fora da lista original: * * 1. `zinc`, `neutral`, `stone` — usadas EXATAMENTE como `slate`/`gray` já são * (texto e borda neutros), só que a família nunca ficou de acordo sobre * qual das quatro usar, e cada projeto escolheu a sua. O mira-rh-selecao * inteiro (Seleção de Currículos e Dossiê) é zinc do início ao fim, e como * zinc não estava aqui, o efeito era CONCRETO: card escurecia (`bg-white` * é coberto) e o texto ficava cinza-escuro original por cima, quase * ilegível. Tratadas como sinônimo de slate/gray, mesmo agrupamento. * 2. `orange`, `teal`, `cyan`, `sky`, `pink`/`fuchsia`, `lime` — usadas como * selo/categoria (o mesmo papel de purple/indigo, já coberto), num * palette de cores por categoria que aparece em mira-dp, mira-rh, * mira-comercial e mira-produtividade (ex.: cores de tag/tipo de contato). * Mesmo tratamento do purple: fundo claro vira véu translúcido, texto * escuro vira a mesma cor clareada — a cor CONTINUA a mesma, só adaptada. * * Tom sólido (500/600/700 usado como fundo de BOTÃO, ex. `bg-orange-500`) não * entra aqui de propósito, pela mesma razão do botão azul: cor sólida com * texto branco em cima já tem contraste de sobra nos dois temas. */ /* --- neutro: zinc/neutral/stone tratados como slate/gray --- */ [data-theme="dark"] .bg-zinc-50, [data-theme="dark"] .bg-zinc-100, [data-theme="dark"] .bg-neutral-50, [data-theme="dark"] .bg-neutral-100, [data-theme="dark"] .bg-stone-50, [data-theme="dark"] .bg-stone-100 { background-color: var(--mira-ground); } [data-theme="dark"] .bg-zinc-200, [data-theme="dark"] .bg-zinc-300, [data-theme="dark"] .bg-neutral-200, [data-theme="dark"] .bg-neutral-300, [data-theme="dark"] .bg-stone-200, [data-theme="dark"] .bg-stone-300 { background-color: var(--mira-card-2); } [data-theme="dark"] .text-zinc-900, [data-theme="dark"] .text-zinc-800, [data-theme="dark"] .text-neutral-900, [data-theme="dark"] .text-neutral-800, [data-theme="dark"] .text-stone-900, [data-theme="dark"] .text-stone-800 { color: var(--mira-ink); } [data-theme="dark"] .text-zinc-700, [data-theme="dark"] .text-zinc-600, [data-theme="dark"] .text-neutral-700, [data-theme="dark"] .text-neutral-600, [data-theme="dark"] .text-stone-700, [data-theme="dark"] .text-stone-600 { color: var(--mira-ink-2); } [data-theme="dark"] .text-zinc-500, [data-theme="dark"] .text-zinc-400, [data-theme="dark"] .text-zinc-300, [data-theme="dark"] .text-neutral-500, [data-theme="dark"] .text-neutral-400, [data-theme="dark"] .text-stone-500, [data-theme="dark"] .text-stone-400 { color: var(--mira-ink-3); } [data-theme="dark"] .border-zinc-100, [data-theme="dark"] .border-zinc-200, [data-theme="dark"] .border-zinc-300, [data-theme="dark"] .border-neutral-100, [data-theme="dark"] .border-neutral-200, [data-theme="dark"] .border-neutral-300, [data-theme="dark"] .border-stone-100, [data-theme="dark"] .border-stone-200, [data-theme="dark"] .border-stone-300, [data-theme="dark"] .divide-zinc-100 > * + *, [data-theme="dark"] .divide-zinc-200 > * + * { border-color: var(--mira-line); } [data-theme="dark"] .hover\:bg-zinc-50:hover, [data-theme="dark"] .hover\:bg-zinc-100:hover, [data-theme="dark"] .hover\:bg-neutral-50:hover, [data-theme="dark"] .hover\:bg-neutral-100:hover, [data-theme="dark"] .hover\:bg-stone-50:hover, [data-theme="dark"] .hover\:bg-stone-100:hover { background-color: var(--mira-card-2); } /* --- selo/categoria: as seis famílias que faltavam --- */ [data-theme="dark"] .bg-orange-50, [data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18); } [data-theme="dark"] .text-orange-800, [data-theme="dark"] .text-orange-700, [data-theme="dark"] .text-orange-600, [data-theme="dark"] .text-orange-500 { color: #ffb066; } [data-theme="dark"] .border-orange-200, [data-theme="dark"] .border-orange-300 { border-color: rgba(249, 115, 22, 0.4); } [data-theme="dark"] .bg-teal-50, [data-theme="dark"] .bg-teal-100 { background-color: rgba(20, 184, 166, 0.18); } [data-theme="dark"] .text-teal-800, [data-theme="dark"] .text-teal-700, [data-theme="dark"] .text-teal-600 { color: #5eead4; } [data-theme="dark"] .border-teal-200, [data-theme="dark"] .border-teal-300 { border-color: rgba(20, 184, 166, 0.4); } [data-theme="dark"] .bg-cyan-50, [data-theme="dark"] .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.18); } [data-theme="dark"] .text-cyan-800, [data-theme="dark"] .text-cyan-700, [data-theme="dark"] .text-cyan-600 { color: #67e8f9; } [data-theme="dark"] .border-cyan-200, [data-theme="dark"] .border-cyan-300 { border-color: rgba(6, 182, 212, 0.4); } [data-theme="dark"] .bg-sky-50, [data-theme="dark"] .bg-sky-100 { background-color: rgba(14, 165, 233, 0.18); } [data-theme="dark"] .text-sky-800, [data-theme="dark"] .text-sky-700, [data-theme="dark"] .text-sky-600 { color: #7dd3fc; } [data-theme="dark"] .border-sky-200, [data-theme="dark"] .border-sky-300 { border-color: rgba(14, 165, 233, 0.4); } /* violet/fuchsia entram junto do roxo (purple/indigo), mesma família visual */ [data-theme="dark"] .bg-violet-50, [data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, 0.18); } [data-theme="dark"] .text-violet-800, [data-theme="dark"] .text-violet-700, [data-theme="dark"] .text-violet-600, [data-theme="dark"] .text-violet-500 { color: #c4b5fd; } [data-theme="dark"] .border-violet-200, [data-theme="dark"] .border-violet-300, [data-theme="dark"] .border-violet-400 { border-color: rgba(139, 92, 246, 0.4); } [data-theme="dark"] .bg-pink-50, [data-theme="dark"] .bg-pink-100, [data-theme="dark"] .bg-fuchsia-50, [data-theme="dark"] .bg-fuchsia-100 { background-color: rgba(236, 72, 153, 0.18); } [data-theme="dark"] .text-pink-800, [data-theme="dark"] .text-pink-700, [data-theme="dark"] .text-pink-600, [data-theme="dark"] .text-fuchsia-700, [data-theme="dark"] .text-fuchsia-600 { color: #f9a8d4; } [data-theme="dark"] .border-pink-200, [data-theme="dark"] .border-pink-300 { border-color: rgba(236, 72, 153, 0.4); } [data-theme="dark"] .bg-lime-50, [data-theme="dark"] .bg-lime-100 { background-color: rgba(132, 204, 22, 0.18); } [data-theme="dark"] .text-lime-800, [data-theme="dark"] .text-lime-700, [data-theme="dark"] .text-lime-600 { color: #bef264; } [data-theme="dark"] .border-lime-200, [data-theme="dark"] .border-lime-300 { border-color: rgba(132, 204, 22, 0.4); } /* --- botão de tema (injetado por tema-mira.js) --- */ .mira-tema-botao { background: none; border: 1px solid currentColor; border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1; opacity: 0.7; padding: 6px 9px; } .mira-tema-botao:hover { opacity: 1; } /* Fim do arquivo. Regra nova entra ACIMA desta linha: a ordem importa quando * duas regras têm a mesma especificidade. */