/* ══════════════════════════════════════════════════════════════════════════ AdmComIA — TEMA ESCURO (OS_2805, parte 3) Por que uma CAMADA e não `dark:` em cada classe: o painel tem 30 telas e mais de 1.400 pontos com a cor escrita fixa no HTML gerado por JS. Reescrever um por um seria semanas de trabalho e quebraria coisa. Aqui a gente traduz os TONS — branco, cinzas claros e texto quase preto — para os equivalentes escuros, de uma vez, em todas as telas. Cor de MARCA e de SITUAÇÃO (verde de aprovado, vermelho de atrasado) mantém o significado: muda só o tom, para continuar legível no escuro. Gatilho: . Sem o atributo, nada aqui vale. Especificidade: [data-tema="escuro"] .classe (0,2,0) ganha da utilitária do Tailwind (0,1,0) mesmo o Tailwind sendo injetado depois no . `!important` só onde o valor está no atributo style do elemento. ══════════════════════════════════════════════════════════════════════════ */ :root[data-tema="escuro"] { /* Superfícies, do fundo para a frente */ --dm-fundo: #0f172a; /* a página */ --dm-superficie: #1e293b; /* cartões, cabeçalho, menu lateral, modal */ --dm-superficie-2: #273449; /* faixas internas que eram cinza bem claro */ --dm-superficie-3: #334155; /* realce, linha da tabela sob o mouse */ /* Traços */ --dm-borda: #334155; --dm-borda-forte: #475569; /* Texto, do mais forte ao mais apagado */ /* Medidos com o auditor de contraste da propria pagina: no fundo dos cartoes (#1e293b) qualquer texto abaixo de ~#8f9fb4 fica com razao < 4.5 e vira texto que so quem tem vista boa le. Os quatro niveis mantem a hierarquia visual E passam no minimo. */ --dm-texto: #e2e8f0; /* titulo / conteudo forte */ --dm-texto-2: #cbd5e1; /* corpo */ --dm-texto-3: #aebccd; /* apoio */ --dm-texto-4: #94a3b8; /* o mais apagado que ainda passa */ /* Situações — mesmo significado, tom claro para contraste no escuro */ --dm-ok: #6ee7b7; --dm-ok-bg: rgba(16, 185, 129, 0.16); --dm-aviso: #fcd34d; --dm-aviso-bg:rgba(245, 158, 11, 0.16); --dm-erro: #fca5a5; --dm-erro-bg: rgba(239, 68, 68, 0.16); --dm-info: #93c5fd; --dm-info-bg: rgba(59, 130, 246, 0.16); color-scheme: dark; /* faz o navegador escurecer barra de rolagem e campos nativos */ } /* ───────────────────────────────────────────────────────────── 1. A página e as superfícies ───────────────────────────────────────────────────────────── */ :root[data-tema="escuro"] body { background-color: var(--dm-fundo); color: var(--dm-texto); } :root[data-tema="escuro"] .tw-bg-white, :root[data-tema="escuro"] .card, :root[data-tema="escuro"] #modal-card, :root[data-tema="escuro"] .doc-panel { background-color: var(--dm-superficie); } :root[data-tema="escuro"] .tw-bg-slate-50, :root[data-tema="escuro"] .tw-bg-slate-100 { background-color: var(--dm-superficie-2); } :root[data-tema="escuro"] .tw-bg-slate-200 { background-color: var(--dm-superficie-3); } :root[data-tema="escuro"] .tw-bg-slate-300 { background-color: var(--dm-borda-forte); } /* O tem tw-bg-slate-50 e ficaria igual ao cartão: a página é mais escura. */ :root[data-tema="escuro"] body.tw-bg-slate-50 { background-color: var(--dm-fundo); } /* ───────────────────────────────────────────────────────────── 2. Texto ───────────────────────────────────────────────────────────── */ :root[data-tema="escuro"] .tw-text-slate-900, :root[data-tema="escuro"] .tw-text-slate-800 { color: var(--dm-texto); } :root[data-tema="escuro"] .tw-text-slate-700, :root[data-tema="escuro"] .tw-text-slate-600 { color: var(--dm-texto-2); } :root[data-tema="escuro"] .tw-text-slate-500 { color: var(--dm-texto-3); } :root[data-tema="escuro"] .tw-text-slate-400, :root[data-tema="escuro"] .tw-text-slate-300 { color: var(--dm-texto-4); } /* ───────────────────────────────────────────────────────────── 3. Bordas ───────────────────────────────────────────────────────────── */ :root[data-tema="escuro"] .tw-border-slate-100, :root[data-tema="escuro"] .tw-border-slate-200 { border-color: var(--dm-borda); } :root[data-tema="escuro"] .tw-border-slate-300 { border-color: var(--dm-borda-forte); } :root[data-tema="escuro"] .tw-divide-slate-100 > * + *, :root[data-tema="escuro"] .tw-divide-slate-200 > * + * { border-color: var(--dm-borda); } /* ───────────────────────────────────────────────────────────── 4. Situações — o TOM muda, o significado não ───────────────────────────────────────────────────────────── */ :root[data-tema="escuro"] .tw-bg-emerald-50, :root[data-tema="escuro"] .tw-bg-emerald-100 { background-color: var(--dm-ok-bg); } :root[data-tema="escuro"] .tw-bg-amber-50, :root[data-tema="escuro"] .tw-bg-amber-100, :root[data-tema="escuro"] .tw-bg-yellow-50, :root[data-tema="escuro"] .tw-bg-yellow-100 { background-color: var(--dm-aviso-bg); } :root[data-tema="escuro"] .tw-bg-red-50, :root[data-tema="escuro"] .tw-bg-red-100, :root[data-tema="escuro"] .tw-bg-rose-50, :root[data-tema="escuro"] .tw-bg-rose-100 { background-color: var(--dm-erro-bg); } :root[data-tema="escuro"] .tw-bg-blue-50, :root[data-tema="escuro"] .tw-bg-blue-100, :root[data-tema="escuro"] .tw-bg-sky-50, :root[data-tema="escuro"] .tw-bg-sky-100, :root[data-tema="escuro"] .tw-bg-indigo-50, :root[data-tema="escuro"] .tw-bg-indigo-100 { background-color: var(--dm-info-bg); } :root[data-tema="escuro"] .tw-bg-purple-50, :root[data-tema="escuro"] .tw-bg-purple-100, :root[data-tema="escuro"] .tw-bg-violet-50, :root[data-tema="escuro"] .tw-bg-violet-100 { background-color: rgba(168, 85, 247, 0.16); } :root[data-tema="escuro"] .tw-bg-orange-50, :root[data-tema="escuro"] .tw-bg-orange-100 { background-color: rgba(249, 115, 22, 0.16); } :root[data-tema="escuro"] .tw-text-emerald-900, :root[data-tema="escuro"] .tw-text-emerald-800, :root[data-tema="escuro"] .tw-text-emerald-700, :root[data-tema="escuro"] .tw-text-emerald-600, :root[data-tema="escuro"] .tw-text-green-800, :root[data-tema="escuro"] .tw-text-green-700, :root[data-tema="escuro"] .tw-text-green-600 { color: var(--dm-ok); } :root[data-tema="escuro"] .tw-text-amber-900, :root[data-tema="escuro"] .tw-text-amber-800, :root[data-tema="escuro"] .tw-text-amber-700, :root[data-tema="escuro"] .tw-text-amber-600, :root[data-tema="escuro"] .tw-text-yellow-800, :root[data-tema="escuro"] .tw-text-yellow-700, :root[data-tema="escuro"] .tw-text-yellow-600 { color: var(--dm-aviso); } :root[data-tema="escuro"] .tw-text-red-900, :root[data-tema="escuro"] .tw-text-red-800, :root[data-tema="escuro"] .tw-text-red-700, :root[data-tema="escuro"] .tw-text-red-600, :root[data-tema="escuro"] .tw-text-red-500, :root[data-tema="escuro"] .tw-text-rose-700, :root[data-tema="escuro"] .tw-text-rose-600 { color: var(--dm-erro); } :root[data-tema="escuro"] .tw-text-blue-900, :root[data-tema="escuro"] .tw-text-blue-800, :root[data-tema="escuro"] .tw-text-blue-700, :root[data-tema="escuro"] .tw-text-blue-600, :root[data-tema="escuro"] .tw-text-sky-700, :root[data-tema="escuro"] .tw-text-sky-600, :root[data-tema="escuro"] .tw-text-indigo-700, :root[data-tema="escuro"] .tw-text-indigo-600 { color: var(--dm-info); } :root[data-tema="escuro"] .tw-text-purple-700, :root[data-tema="escuro"] .tw-text-purple-600, :root[data-tema="escuro"] .tw-text-violet-700 { color: #d8b4fe; } :root[data-tema="escuro"] .tw-text-orange-700, :root[data-tema="escuro"] .tw-text-orange-600 { color: #fdba74; } /* Bordas coloridas de aviso (faixas do tipo "atenção") */ :root[data-tema="escuro"] .tw-border-emerald-200 { border-color: rgba(16, 185, 129, 0.4); } :root[data-tema="escuro"] .tw-border-amber-200, :root[data-tema="escuro"] .tw-border-yellow-200 { border-color: rgba(245, 158, 11, 0.4); } :root[data-tema="escuro"] .tw-border-red-200, :root[data-tema="escuro"] .tw-border-rose-200 { border-color: rgba(239, 68, 68, 0.4); } :root[data-tema="escuro"] .tw-border-blue-200, :root[data-tema="escuro"] .tw-border-sky-200 { border-color: rgba(59, 130, 246, 0.4); } /* Botões e selos com fundo SATURADO (500/600/700) já têm texto branco: ficam como estão de propósito — são a cor da marca e da ação. */ /* ───────────────────────────────────────────────────────────── 5. Componentes do app (app.css) ───────────────────────────────────────────────────────────── */ :root[data-tema="escuro"] .input, :root[data-tema="escuro"] input[type="text"], :root[data-tema="escuro"] input[type="email"], :root[data-tema="escuro"] input[type="password"], :root[data-tema="escuro"] input[type="number"], :root[data-tema="escuro"] input[type="date"], :root[data-tema="escuro"] input[type="datetime-local"], :root[data-tema="escuro"] input[type="time"], :root[data-tema="escuro"] input[type="search"], :root[data-tema="escuro"] input[type="tel"], :root[data-tema="escuro"] input[type="url"], :root[data-tema="escuro"] select, :root[data-tema="escuro"] textarea { background-color: var(--dm-fundo); border-color: var(--dm-borda-forte); color: var(--dm-texto); } :root[data-tema="escuro"] .input::placeholder, :root[data-tema="escuro"] input::placeholder, :root[data-tema="escuro"] textarea::placeholder { color: var(--dm-texto-4); } :root[data-tema="escuro"] .input:disabled, :root[data-tema="escuro"] input:disabled, :root[data-tema="escuro"] select:disabled, :root[data-tema="escuro"] textarea:disabled { background-color: var(--dm-superficie-2); color: var(--dm-texto-4); } /* O menu ABERTO do