/* ╔═══════════════════════════════════════════════════════════════════════╗
* ║ CejurOS — DESIGN TOKENS (tokens institucionais + compat) ║
* ║ Shared across admin.html, index.html, login.html, radar*.html ║
* ╚═══════════════════════════════════════════════════════════════════════╝
*/
/* ─── PALETA INSTITUCIONAL (light) ─────────────────────────────────────── */
:root {
--bg-app: #ebebeb;
--bg-panel: #ffffff;
--bg-hover: #f1f5f9;
--brand-main: #172137; /* Azul Cejur */
--brand-hover: #0e1626;
--brand-highlight: #00ade2; /* Ciano Cejur */
--accent-gold: #c49500;
--accent-red: #dc2626; /* apenas destrutivo */
--accent-green: #059669;
--text-primary: #172137;
--text-secondary: #64748b;
--border-color: #e2e8f0;
/* Aliases (mesmo semântica, nomes alternativos usados em alguns módulos) */
--bg-surface: var(--bg-panel);
--text-main: var(--text-primary);
--text-muted: var(--text-secondary);
--brand-accent: var(--brand-highlight);
--border-subtle: var(--border-color);
}
/* ─── DARK MODE OFICIAL ────────────────────────────────────────────────── */
[data-theme="dark"] {
--bg-app: #0e1626;
--bg-panel: #172137;
--bg-hover: #1e293b;
--brand-main: #6ed5ff;
--brand-hover: #38bdf8;
--brand-highlight: #6ed5ff;
--accent-gold: #eab308;
--accent-red: #ef4444;
--accent-green: #34d399;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--border-color: rgba(110, 213, 255, 0.15);
}
/* ─── RESET BASE ────────────────────────────────────────────────────────── */
html, body {
background-color: var(--bg-app) !important;
color: var(--text-primary);
transition: background-color .3s ease, color .3s ease;
}
/* Containers de admin */
#adminMain { background-color: var(--bg-app) !important; }
#adminHeader, #jobsPanel {
background-color: var(--bg-panel) !important;
border-color: var(--border-color) !important;
}
/* ─── SUPERFÍCIES ──────────────────────────────────────────────────────── */
/* Exclui body/html pra não "ativar" o bg-app via bg-slate-100 no */
.bg-white:not(body):not(html),
.bg-slate-50:not(body),
.bg-slate-100:not(body),
.modal-box {
background-color: var(--bg-panel) !important;
}
.bg-slate-200:not(body) { background-color: var(--bg-hover) !important; }
/* Gradientes genéricos (cards que usam Tailwind bg-gradient-to-br) mesclam com panel em dark */
[data-theme="dark"] .bg-gradient-to-br { background: var(--bg-hover) !important; }
/* ─── BORDAS ───────────────────────────────────────────────────────────── */
.border-slate-100, .border-slate-200, .border-slate-300 {
border-color: var(--border-color) !important;
}
.divide-slate-50 > * + *, .divide-slate-100 > * + *, .divide-slate-200 > * + * {
border-color: var(--border-color) !important;
}
/* ─── TEXTOS ───────────────────────────────────────────────────────────── */
.text-slate-700, .text-slate-800, .text-slate-900 { color: var(--text-primary) !important; }
.text-slate-500, .text-slate-600 { color: var(--text-secondary) !important; }
.text-slate-400 { color: var(--text-secondary) !important; }
/* Cores hex arbitrárias da marca (Tailwind arbitrary values) */
[class*="text-[#1e2757]"],
[class*="text-[#172137]"],
[class*="text-[#2b4b97]"],
[class*="text-[#0f172a]"],
[class*="text-[#1e293b]"] { color: var(--text-primary) !important; }
[class*="bg-[#1e2757]"],
[class*="bg-[#172137]"] { background-color: var(--brand-main) !important; }
/* Em dark, o fundo acima vira ciano-claro (--brand-main = #6ed5ff) — texto branco
ficaria ilegível (1,7:1). Espelha o padrão do .btn-primary: texto escuro no escuro.
As linhas com .text-white pegam filhos brancos (ícone/span dentro do botão). */
[data-theme="dark"] [class*="bg-[#1e2757]"],
[data-theme="dark"] [class*="bg-[#172137]"],
[data-theme="dark"] [class*="bg-[#1e2757]"] .text-white,
[data-theme="dark"] [class*="bg-[#172137]"] .text-white { color: #0e1626 !important; }
/* text-[#0077a8] (ciano Cejur em textos) → brand-highlight */
[class*="text-[#0077a8]"] { color: var(--brand-highlight) !important; }
/* Navy médio #2b4b97 → ciano vibrante (decisão de marca: a cor primária visual
é o ciano Cejur, não o navy). Aplicado global em light e dark. */
[class*="bg-[#2b4b97]"] { background-color: #00ade2 !important; }
[class*="border-[#2b4b97]"] { border-color: #2eb0e2 !important; }
/* Borda padrão Tailwind .border-2 reduzida para 1px — UI mais leve */
.border-2 { border-width: 1px !important; }
/* ══════════════════════════════════════════════════════════════════════════
ARREDONDAMENTO — cortado pela metade na ferramenta inteira (decisão de marca:
cantos mais contidos, menos "balão"). Fonte única; .rounded-full preservado
(avatares/pílulas). Vale light e dark.
══════════════════════════════════════════════════════════════════════════ */
.rounded-3xl { border-radius: 0.75rem !important; } /* 24→12 */
.rounded-2xl { border-radius: 0.5rem !important; } /* 16→8 */
.rounded-xl { border-radius: 0.375rem !important; } /* 12→6 */
.rounded-lg { border-radius: 0.25rem !important; } /* 8→4 */
.rounded-md { border-radius: 0.1875rem!important; } /* 6→3 */
.rounded { border-radius: 0.125rem !important; } /* 4→2 */
.rounded-sm { border-radius: 0.0625rem!important; } /* 2→1 */
/* .rounded-full fica intacto (círculos/pílulas) */
/* Variantes direcionais em uso (bottom-sheets, cards, abas) */
.rounded-t-2xl { border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; }
.rounded-b-2xl { border-bottom-left-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
.rounded-r-2xl { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
.rounded-r-xl { border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; }
.rounded-t-md { border-top-left-radius: 0.1875rem !important; border-top-right-radius: 0.1875rem !important; }
.rounded-t-sm { border-top-left-radius: 0.0625rem !important; border-top-right-radius: 0.0625rem !important; }
/* Hovers de slate */
.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover { background-color: var(--bg-hover) !important; }
/* ─── INPUTS ───────────────────────────────────────────────────────────── */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
textarea, select {
background-color: transparent !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--brand-highlight) !important;
box-shadow: 0 0 0 3px rgba(0, 173, 226, 0.18) !important;
}
input::placeholder, textarea::placeholder {
color: var(--text-secondary) !important;
opacity: .55;
}
/* Campos de input "técnicos" com fonte mono */
#qiTexto, #nlTextoBruto {
font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
line-height: 1.6;
padding: 1rem;
}
/* ─── BOTÕES PADRONIZADOS ─────────────────────────────────────────────── */
.btn-primary {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
background-color: var(--brand-main);
color: #fff;
border: none; font-weight: 700;
padding: .625rem 1.25rem;
border-radius: .5rem;
transition: all .2s ease;
cursor: pointer;
}
[data-theme="dark"] .btn-primary { color: #0e1626; }
.btn-primary:hover { background-color: var(--brand-hover); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
background-color: transparent;
color: var(--text-primary);
border: 1px solid var(--border-color);
font-weight: 700;
padding: .625rem 1.25rem;
border-radius: .5rem;
transition: all .2s ease;
cursor: pointer;
}
.btn-secondary:hover { background-color: var(--bg-hover); }
.btn-danger {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
background-color: var(--accent-red);
color: #fff;
border: none; font-weight: 700;
padding: .625rem 1.25rem;
border-radius: .5rem;
transition: all .2s ease;
cursor: pointer;
}
.btn-danger:hover { filter: brightness(0.92); }
/* ─── BADGES PILL (status) ────────────────────────────────────────────── */
.badge-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: .25rem .6rem;
border-radius: 9999px;
font-size: .65rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
.badge-success { background: rgba(16, 185, 129, 0.15); color: #059669; }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.badge-danger { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }
.badge-info { background: rgba(0, 173, 226, 0.15); color: #0284c7; }
.badge-neutral { background: rgba(100, 116, 139, 0.15); color: #475569; }
[data-theme="dark"] .badge-success { color: #34d399; }
[data-theme="dark"] .badge-warning { color: #fbbf24; }
[data-theme="dark"] .badge-danger { color: #f87171; }
[data-theme="dark"] .badge-info { color: #6ed5ff; }
[data-theme="dark"] .badge-neutral { color: #cbd5e1; }
/* ─── TABELAS (zebra + hover + header) ───────────────────────────────── */
table thead th {
background-color: var(--bg-app);
color: var(--text-secondary);
font-size: .75rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
table tbody tr {
border-bottom: 1px solid var(--border-color);
transition: background-color .15s ease;
}
table tbody tr:hover {
background-color: var(--bg-hover) !important;
}
/* ─── CARD padrão ────────────────────────────────────────────────────── */
.card-ead {
background-color: var(--bg-panel);
border: 1px solid var(--border-color);
border-radius: 1rem;
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
transition: transform .2s ease, box-shadow .2s ease;
}
/* ─── BACKGROUNDS CLAROS EM DARK (evita "grito" visual) ──────────────── */
/* Em light essas cores são elegantes (azul clarinho Cejur + laranja alerta).
Em dark, elas gritam sobre o fundo escuro — viram superfície translúcida */
[data-theme="dark"] .bg-\[\#eef6fb\] { background-color: rgba(110, 213, 255, 0.08) !important; }
[data-theme="dark"] .bg-\[\#e0f4fb\] { background-color: rgba(110, 213, 255, 0.10) !important; }
[data-theme="dark"] .bg-\[\#eef1fb\],
[data-theme="dark"] .bg-\[\#EEF2FF\],
[data-theme="dark"] .bg-\[\#eef2ff\] { background-color: rgba(129, 140, 248, 0.10) !important; }
/* ════════════════════════════════════════════════════════════════════════
CALLOUTS COLORIDOS EM DARK MODE
Cards/badges/buttons que usam padrão "bg-{cor}-50/100/200 + text-{cor}-700"
precisam inverter: tinta escura translúcida de fundo + texto claro do tom.
Usamos rgba do tom -500 da paleta Tailwind para o fundo (12% de opacidade),
e o tom -300/-400 para o texto (luminosidade alta sobre fundo escuro).
════════════════════════════════════════════════════════════════════════ */
/* ── RED ── */
[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.07) !important; }
[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.14) !important; }
[data-theme="dark"] .bg-red-200 { background-color: rgba(239, 68, 68, 0.22) !important; }
[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.10) !important; }
[data-theme="dark"] .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.18) !important; }
[data-theme="dark"] .hover\:bg-red-200:hover { background-color: rgba(239, 68, 68, 0.26) !important; }
[data-theme="dark"] .text-red-500,
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-900 { color: #fca5a5 !important; }
[data-theme="dark"] .hover\:text-red-800:hover { color: #fecaca !important; }
[data-theme="dark"] .border-red-50,
[data-theme="dark"] .border-red-100,
[data-theme="dark"] .border-red-200,
[data-theme="dark"] .border-red-300 { border-color: rgba(239, 68, 68, 0.30) !important; }
[data-theme="dark"] .hover\:border-red-400:hover { border-color: rgba(239, 68, 68, 0.55) !important; }
/* ── ORANGE ── */
[data-theme="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, 0.07) !important; }
[data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.14) !important; }
[data-theme="dark"] .bg-orange-200 { background-color: rgba(249, 115, 22, 0.22) !important; }
[data-theme="dark"] .text-orange-500,
[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-orange-700,
[data-theme="dark"] .text-orange-800 { color: #fdba74 !important; }
[data-theme="dark"] .border-orange-100,
[data-theme="dark"] .border-orange-200,
[data-theme="dark"] .border-orange-300 { border-color: rgba(249, 115, 22, 0.32) !important; }
/* ── AMBER ── */
[data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.07) !important; }
[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.14) !important; }
[data-theme="dark"] .bg-amber-200 { background-color: rgba(245, 158, 11, 0.22) !important; }
[data-theme="dark"] .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.18) !important; }
[data-theme="dark"] .text-amber-500,
[data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-900 { color: #fcd34d !important; }
[data-theme="dark"] .border-amber-50,
[data-theme="dark"] .border-amber-100,
[data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-amber-300 { border-color: rgba(245, 158, 11, 0.32) !important; }
[data-theme="dark"] .hover\:border-amber-400:hover { border-color: rgba(245, 158, 11, 0.55) !important; }
/* ── YELLOW ── */
[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.07) !important; }
[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.14) !important; }
[data-theme="dark"] .bg-yellow-200 { background-color: rgba(234, 179, 8, 0.22) !important; }
[data-theme="dark"] .hover\:bg-yellow-200:hover { background-color: rgba(234, 179, 8, 0.26) !important; }
[data-theme="dark"] .text-yellow-500,
[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-700 { color: #fde047 !important; }
[data-theme="dark"] .border-yellow-200 { border-color: rgba(234, 179, 8, 0.32) !important; }
/* ── GREEN / EMERALD ── */
[data-theme="dark"] .bg-green-50 { background-color: rgba(34, 197, 94, 0.07) !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.07) !important; }
[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.14) !important; }
[data-theme="dark"] .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.22) !important; }
[data-theme="dark"] .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.18) !important; }
[data-theme="dark"] .text-green-500,
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-emerald-500,
[data-theme="dark"] .text-emerald-600,
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-800 { color: #6ee7b7 !important; }
[data-theme="dark"] .border-emerald-50,
[data-theme="dark"] .border-emerald-100,
[data-theme="dark"] .border-emerald-200,
[data-theme="dark"] .border-emerald-300 { border-color: rgba(16, 185, 129, 0.32) !important; }
[data-theme="dark"] .hover\:border-emerald-400:hover { border-color: rgba(16, 185, 129, 0.55) !important; }
/* ── BLUE / SKY / CYAN ── */
[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.08) !important; }
[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.16) !important; }
[data-theme="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, 0.08) !important; }
[data-theme="dark"] .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.08) !important; }
[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.12) !important; }
[data-theme="dark"] .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.20) !important; }
[data-theme="dark"] .text-blue-500,
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-sky-500,
[data-theme="dark"] .text-sky-600,
[data-theme="dark"] .text-sky-800,
[data-theme="dark"] .text-cyan-700,
[data-theme="dark"] .text-cyan-800 { color: #93c5fd !important; }
[data-theme="dark"] .border-blue-50,
[data-theme="dark"] .border-blue-100,
[data-theme="dark"] .border-blue-200,
[data-theme="dark"] .border-blue-300,
[data-theme="dark"] .border-sky-50,
[data-theme="dark"] .border-cyan-200 { border-color: rgba(59, 130, 246, 0.30) !important; }
[data-theme="dark"] .hover\:border-blue-400:hover { border-color: rgba(59, 130, 246, 0.55) !important; }
/* ── INDIGO ── */
[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.08) !important; }
[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.16) !important; }
[data-theme="dark"] .text-indigo-500,
[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-indigo-700 { color: #a5b4fc !important; }
[data-theme="dark"] .border-indigo-200 { border-color: rgba(99, 102, 241, 0.32) !important; }
/* ── VIOLET ── */
[data-theme="dark"] .bg-violet-50 { background-color: rgba(139, 92, 246, 0.08) !important; }
[data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, 0.16) !important; }
[data-theme="dark"] .text-violet-500,
[data-theme="dark"] .text-violet-600,
[data-theme="dark"] .text-violet-700,
[data-theme="dark"] .text-violet-800,
[data-theme="dark"] .text-violet-900 { color: #c4b5fd !important; }
[data-theme="dark"] .border-violet-50,
[data-theme="dark"] .border-violet-100,
[data-theme="dark"] .border-violet-200,
[data-theme="dark"] .border-violet-300 { border-color: rgba(139, 92, 246, 0.32) !important; }
/* ── PURPLE ── */
[data-theme="dark"] .bg-purple-50 { background-color: rgba(168, 85, 247, 0.08) !important; }
[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.16) !important; }
[data-theme="dark"] .text-purple-500,
[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-800 { color: #d8b4fe !important; }
[data-theme="dark"] .border-purple-200 { border-color: rgba(168, 85, 247, 0.32) !important; }
/* ── FUCHSIA / PINK / ROSE ── */
[data-theme="dark"] .bg-fuchsia-50 { background-color: rgba(217, 70, 239, 0.08) !important; }
[data-theme="dark"] .bg-rose-50 { background-color: rgba(244, 63, 94, 0.07) !important; }
[data-theme="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, 0.14) !important; }
[data-theme="dark"] .text-fuchsia-500,
[data-theme="dark"] .text-fuchsia-600 { color: #f0abfc !important; }
[data-theme="dark"] .text-rose-500,
[data-theme="dark"] .text-rose-600,
[data-theme="dark"] .text-rose-700 { color: #fda4af !important; }
[data-theme="dark"] .border-fuchsia-50,
[data-theme="dark"] .border-rose-50,
[data-theme="dark"] .border-rose-200 { border-color: rgba(244, 63, 94, 0.30) !important; }
/* ── TEAL ── */
[data-theme="dark"] .bg-teal-50 { background-color: rgba(20, 184, 166, 0.08) !important; }
[data-theme="dark"] .bg-teal-100 { background-color: rgba(20, 184, 166, 0.16) !important; }
[data-theme="dark"] .text-teal-500,
[data-theme="dark"] .text-teal-600,
[data-theme="dark"] .text-teal-700 { color: #5eead4 !important; }
[data-theme="dark"] .border-teal-50,
[data-theme="dark"] .border-teal-200 { border-color: rgba(20, 184, 166, 0.32) !important; }
/* ════════════════════════════════════════════════════════════════════════
HEX ARBITRÁRIOS (Tailwind arbitrary values) — overrides para dark
════════════════════════════════════════════════════════════════════════ */
/* Tons dourados (institucional CejurOS) ficam ilegíveis em fundo escuro */
[data-theme="dark"] [class*="text-[#b8961a]"],
[data-theme="dark"] [class*="text-[#8a6e10]"],
[data-theme="dark"] [class*="text-[#6b5209]"] { color: #fcd34d !important; }
[data-theme="dark"] [class*="border-[#b8961a]"] { border-color: rgba(245, 158, 11, 0.45) !important; }
/* Verde escuro institucional (selo "homologado") — manter destaque em dark */
[data-theme="dark"] [class*="border-[#1e6b4a]"] { border-color: rgba(52, 211, 153, 0.55) !important; }
[data-theme="dark"] [class*="bg-[#1e6b4a]"] { background-color: rgba(16, 185, 129, 0.20) !important; }
/* Indigo claro (#C7D2FE / similar) — borda translúcida em dark */
[data-theme="dark"] [class*="border-[#C7D2FE]"],
[data-theme="dark"] [class*="border-[#cfcfcf]"] { border-color: var(--border-color) !important; }
/* Ciano Cejur sólido (#0095c0 / #00ade2) — usado como bg de botão; em dark
precisa de texto preto para garantir contraste WCAG */
[data-theme="dark"] [class*="bg-[#00ade2]"],
[data-theme="dark"] [class*="bg-[#0095c0]"] { color: #0e1626 !important; }
[data-theme="dark"] [class*="bg-[#00ade2]"] *,
[data-theme="dark"] [class*="bg-[#0095c0]"] * { color: #0e1626 !important; }
/* #2b4b97 já vira ciano global (regra acima). Aqui apenas garantimos contraste
do texto sobre o fundo ciano (#00ade2) — em dark mantém legível. */
[class*="bg-[#2b4b97]"] { color: #ffffff !important; }
[class*="bg-[#2b4b97]"] * { color: #ffffff !important; }
[data-theme="dark"] [class*="text-[#2b4b97]"] { color: var(--brand-highlight) !important; }
/* Texto institucional sobre fundo escuro #0a1120 (modais "always-dark") */
[data-theme="dark"] [class*="bg-[#0f172a]"] [class*="text-[#"],
[data-theme="dark"] [class*="bg-[#0a1229]"] [class*="text-[#"] { color: #f8fafc !important; }
/* ════════════════════════════════════════════════════════════════════════
GRADIENTES TINTADOS (from-{cor}-50 / to-{cor}-100) — neutralizar em dark
Tailwind aplica gradientes via --tw-gradient-from / --tw-gradient-to.
Em dark, achatamos para superfície neutra do tema.
════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] [class*="from-blue-50"],
[data-theme="dark"] [class*="from-sky-50"],
[data-theme="dark"] [class*="from-cyan-50"],
[data-theme="dark"] [class*="from-indigo-50"],
[data-theme="dark"] [class*="from-violet-50"],
[data-theme="dark"] [class*="from-purple-50"],
[data-theme="dark"] [class*="from-amber-50"],
[data-theme="dark"] [class*="from-emerald-50"],
[data-theme="dark"] [class*="from-rose-50"],
[data-theme="dark"] [class*="from-orange-50"],
[data-theme="dark"] [class*="from-red-50"],
[data-theme="dark"] [class*="from-yellow-50"],
[data-theme="dark"] [class*="from-teal-50"] { --tw-gradient-from: var(--bg-panel) !important; }
[data-theme="dark"] [class*="to-blue-100"],
[data-theme="dark"] [class*="to-sky-100"],
[data-theme="dark"] [class*="to-cyan-100"],
[data-theme="dark"] [class*="to-indigo-100"],
[data-theme="dark"] [class*="to-violet-100"],
[data-theme="dark"] [class*="to-purple-100"],
[data-theme="dark"] [class*="to-amber-100"],
[data-theme="dark"] [class*="to-emerald-100"],
[data-theme="dark"] [class*="to-rose-100"],
[data-theme="dark"] [class*="to-orange-100"],
[data-theme="dark"] [class*="to-red-100"],
[data-theme="dark"] [class*="to-yellow-100"],
[data-theme="dark"] [class*="to-teal-100"] { --tw-gradient-to: var(--bg-hover) !important; }
/* ─── TROCA DE LOGO CLARO/ESCURO ─────────────────────────────────────── */
/* HTML deve ter 2 ![]()
com classes .logo-light e .logo-dark — esta regra esconde/mostra de acordo com o tema */
.logo-light { display: block; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
/* ─── DARK TOGGLE ÍCONES ─────────────────────────────────────────────── */
[data-theme="dark"] #darkToggle .dm-icon-moon { display: none; }
[data-theme="dark"] #darkToggle .dm-icon-sun { display: flex; }
[data-theme="light"] #darkToggle .dm-icon-moon { display: flex; }
[data-theme="light"] #darkToggle .dm-icon-sun { display: none; }
/* ─── COCKPIT DO ALUNO (index.html) ──────────────────────────────────── */
/* Cards do feed e de progresso herdam do token panel */
.feed-card, .prog-card {
background-color: var(--bg-panel) !important;
border-color: var(--border-color) !important;
color: var(--text-primary);
}
/* Input da Concierge / busca — fundo levemente mais baixo que o card */
.concierge-input, .concierge-input:not(:focus) {
background-color: var(--bg-app) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
transition: all .2s ease;
}
.concierge-input:focus {
border-color: var(--brand-highlight) !important;
box-shadow: 0 0 0 3px rgba(0, 173, 226, 0.18) !important;
}
/* Menu lateral do cockpit — ícones neutros, cor de marca só no ativo/hover */
.nav-item { color: var(--text-secondary); transition: all .15s ease; border-radius: 10px; }
.nav-item .nav-icon { color: #78788b !important; transition: color .2s ease; }
.nav-item:hover:not(.active) { background-color: var(--bg-hover); }
.nav-item:hover:not(.active) .nav-icon { color: var(--brand-highlight) !important; }
.nav-item.active {
background-color: var(--bg-hover) !important;
color: var(--brand-highlight) !important;
}
.nav-item.active .nav-icon { color: var(--brand-highlight) !important; }
.nav-item.active::before { background-color: var(--brand-highlight) !important; }
/* Drawer mobile e bottom-sheet */
#mobileDrawer, .bottom-sheet {
background-color: var(--bg-panel) !important;
border-color: var(--border-color) !important;
}
/* ─── Preservações (elementos que NÃO devem ser atingidos) ───────────── */
/* Sidebar admin: tem background inline com gradiente próprio — só garante contraste dos textos */
aside .text-slate-400, aside[class] .text-slate-400 {
/* sidebar fica escura em ambos modos — slate-400 precisa continuar claro sobre fundo azul-escuro */
color: #cbd5e1 !important;
}
/* Modais escurinhos (#1e2757, etc.) que já são "dark sempre" — mantém como estão */
[class*="bg-[#0f172a]"], [class*="bg-[#0a1229]"] {
background-color: #0a1120 !important;
color: #f8fafc !important;
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
* ║ FASE B — DARK MODE ADMIN — Refator Completo (28/04/2026) ║
* ║ Cobertura exaustiva: todos os tons slate + cores funcionais 50/100 ║
* ║ + inline styles comuns + cores arbitrárias hex. ║
* ║ Filosofia: claro vira escuro · escuro vira claro · contraste WCAG AA.║
* ╚═══════════════════════════════════════════════════════════════════════╝
*/
[data-theme="dark"] {
/* Re-define vars com paleta mais robusta pra refator B */
--bg-app: #0a1226;
--bg-panel: #131c36;
--bg-panel-2: #1a2444;
--bg-hover: #1f2a4d;
--bg-elevated: #243155;
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-disabled: #64748b;
--border-color: #2a3a66;
--border-strong: #3a4d80;
--brand-cyan: #38bdf8;
--brand-cyan-soft: rgba(56, 189, 248, 0.15);
}
/* ─── SLATE BACKGROUNDS — todos os tons claros viram superfícies escuras ── */
[data-theme="dark"] .bg-slate-50:not(body):not(html) { background-color: var(--bg-panel) !important; }
[data-theme="dark"] .bg-slate-100:not(body):not(html) { background-color: var(--bg-hover) !important; }
[data-theme="dark"] .bg-slate-200:not(body):not(html) { background-color: var(--bg-elevated) !important; }
[data-theme="dark"] .bg-slate-300 { background-color: var(--border-strong) !important; }
/* Slate escuros (já escuros em light) — sobem 1 tom pra contrastar com bg dark */
[data-theme="dark"] .bg-slate-700 { background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .bg-slate-800 { background-color: var(--bg-panel-2) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .bg-slate-900 { background-color: var(--bg-app) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .bg-white:not(body):not(html) { background-color: var(--bg-panel) !important; }
/* Sutilezas /80 /50 /60 (Tailwind opacity) */
[data-theme="dark"] [class*="bg-slate-50/"], [data-theme="dark"] [class*="bg-white/"] { background-color: var(--bg-panel) !important; }
[data-theme="dark"] [class*="bg-slate-100/"] { background-color: var(--bg-hover) !important; }
/* ─── SLATE TEXTS — clareiam pra dark (inverte luminosidade) ───────────── */
[data-theme="dark"] .text-slate-200, [data-theme="dark"] .text-slate-300 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-slate-400 { color: var(--text-muted) !important; }
[data-theme="dark"] .text-slate-500 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-slate-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-slate-900 { color: var(--text-primary) !important; }
/* ─── SLATE BORDERS — todos viram border-color sutil ───────────────────── */
[data-theme="dark"] .border-slate-50,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300 { border-color: var(--border-color) !important; }
[data-theme="dark"] .border-slate-500,
[data-theme="dark"] .border-slate-600,
[data-theme="dark"] .border-slate-700 { border-color: var(--border-strong) !important; }
[data-theme="dark"] .divide-slate-50 > * + *, [data-theme="dark"] .divide-slate-100 > * + *, [data-theme="dark"] .divide-slate-200 > * + * { border-color: var(--border-color) !important; }
/* ─── GRAY (alternativa a slate) — mesmas regras ───────────────────────── */
[data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background-color: var(--bg-hover) !important; }
[data-theme="dark"] .bg-gray-200 { background-color: var(--bg-elevated) !important; }
[data-theme="dark"] .text-gray-400 { color: var(--text-muted) !important; }
[data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-900 { color: var(--text-primary) !important; }
[data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-300 { border-color: var(--border-color) !important; }
/* ─── CORES FUNCIONAIS — bg-50/100 (badges/pills coloridos) ─────────────── */
/* Em dark, fundos coloridos claros viram tonalidades sutis com glow do hue */
[data-theme="dark"] .bg-red-50, [data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.12) !important; }
[data-theme="dark"] .bg-rose-50, [data-theme="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, 0.12) !important; }
[data-theme="dark"] .bg-orange-50, [data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.12) !important; }
[data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.12) !important; }
[data-theme="dark"] .bg-yellow-50, [data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.12) !important; }
[data-theme="dark"] .bg-emerald-50, [data-theme="dark"] .bg-emerald-100 { background-color: rgba(52, 211, 153, 0.12) !important; }
[data-theme="dark"] .bg-green-50, [data-theme="dark"] .bg-green-100 { background-color: rgba(34, 197, 94, 0.12) !important; }
[data-theme="dark"] .bg-teal-50, [data-theme="dark"] .bg-teal-100 { background-color: rgba(20, 184, 166, 0.12) !important; }
[data-theme="dark"] .bg-cyan-50, [data-theme="dark"] .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.12) !important; }
[data-theme="dark"] .bg-blue-50, [data-theme="dark"] .bg-blue-100 { background-color: rgba(56, 189, 248, 0.12) !important; }
[data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.12) !important; }
[data-theme="dark"] .bg-violet-50, [data-theme="dark"] .bg-violet-100 { background-color: rgba(167, 139, 250, 0.15) !important; }
[data-theme="dark"] .bg-purple-50, [data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.15) !important; }
[data-theme="dark"] .bg-pink-50, [data-theme="dark"] .bg-pink-100 { background-color: rgba(236, 72, 153, 0.12) !important; }
[data-theme="dark"] .bg-fuchsia-50, [data-theme="dark"] .bg-fuchsia-100 { background-color: rgba(217, 70, 239, 0.12) !important; }
/* TEXTS coloridos escuros (text-X-700/800/900) — clareiam pra ler em dark */
[data-theme="dark"] .text-red-700, [data-theme="dark"] .text-red-800 { color: #fca5a5 !important; }
[data-theme="dark"] .text-rose-700, [data-theme="dark"] .text-rose-800 { color: #fda4af !important; }
[data-theme="dark"] .text-orange-700, [data-theme="dark"] .text-orange-800 { color: #fdba74 !important; }
[data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-800 { color: #fcd34d !important; }
[data-theme="dark"] .text-yellow-700, [data-theme="dark"] .text-yellow-800 { color: #fde68a !important; }
[data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-emerald-800 { color: #6ee7b7 !important; }
[data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-800 { color: #86efac !important; }
[data-theme="dark"] .text-teal-700, [data-theme="dark"] .text-teal-800 { color: #5eead4 !important; }
[data-theme="dark"] .text-cyan-700, [data-theme="dark"] .text-cyan-800 { color: #67e8f9 !important; }
[data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-800 { color: #93c5fd !important; }
[data-theme="dark"] .text-indigo-700, [data-theme="dark"] .text-indigo-800 { color: #a5b4fc !important; }
[data-theme="dark"] .text-violet-700, [data-theme="dark"] .text-violet-800 { color: #c4b5fd !important; }
[data-theme="dark"] .text-purple-700, [data-theme="dark"] .text-purple-800 { color: #d8b4fe !important; }
[data-theme="dark"] .text-pink-700, [data-theme="dark"] .text-pink-800 { color: #f9a8d4 !important; }
/* BORDERS coloridas suaves */
[data-theme="dark"] .border-red-200, [data-theme="dark"] .border-red-100 { border-color: rgba(239, 68, 68, 0.30) !important; }
[data-theme="dark"] .border-orange-200, [data-theme="dark"] .border-orange-100 { border-color: rgba(249, 115, 22, 0.30) !important; }
[data-theme="dark"] .border-amber-200, [data-theme="dark"] .border-amber-100 { border-color: rgba(245, 158, 11, 0.30) !important; }
[data-theme="dark"] .border-emerald-200,[data-theme="dark"] .border-emerald-100{ border-color: rgba(52, 211, 153, 0.30) !important; }
[data-theme="dark"] .border-blue-200, [data-theme="dark"] .border-blue-100 { border-color: rgba(56, 189, 248, 0.30) !important; }
[data-theme="dark"] .border-violet-200, [data-theme="dark"] .border-violet-100 { border-color: rgba(167, 139, 250, 0.30) !important; }
[data-theme="dark"] .border-purple-200, [data-theme="dark"] .border-purple-100 { border-color: rgba(168, 85, 247, 0.30) !important; }
/* ─── INLINE STYLES — backgrounds/cores hex hardcoded em style="..." ───── */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background-color:#FFFFFF"] { background-color: var(--bg-panel) !important; }
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#1e2757"],
[data-theme="dark"] [style*="color: #1e2757"],
[data-theme="dark"] [style*="color:#172137"],
[data-theme="dark"] [style*="color:#0f172a"] { color: var(--text-primary) !important; }
/* Cards / modais com style inline branco (modal trocar senha, dropdown user, etc) */
[data-theme="dark"] [style*="background:#fff"][style*="border"],
[data-theme="dark"] [style*="background:#fff"][style*="box-shadow"] {
background-color: var(--bg-panel) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
/* ─── HOVER STATES de slate ────────────────────────────────────────────── */
[data-theme="dark"] .hover\:bg-slate-50:hover,
[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--bg-elevated) !important; }
[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--bg-elevated) !important; }
[data-theme="dark"] .hover\:text-slate-700:hover, [data-theme="dark"] .hover\:text-slate-800:hover { color: var(--text-primary) !important; }
/* ─── INPUTS / SELECT / TEXTAREA — fundo translúcido em dark ───────────── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
[data-theme="dark"] textarea, [data-theme="dark"] select {
background-color: var(--bg-app) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] select option { background-color: var(--bg-panel); color: var(--text-primary); }
/* ─── TABELAS ──────────────────────────────────────────────────────────── */
[data-theme="dark"] table { color: var(--text-primary); }
[data-theme="dark"] thead, [data-theme="dark"] th { background-color: var(--bg-hover) !important; color: var(--text-secondary) !important; }
[data-theme="dark"] tbody tr:hover { background-color: var(--bg-hover) !important; }
[data-theme="dark"] td, [data-theme="dark"] th { border-color: var(--border-color) !important; }
/* ─── CARDS COM GRADIENT ───────────────────────────────────────────────── */
[data-theme="dark"] [class*="from-slate-"], [data-theme="dark"] [class*="to-slate-"], [data-theme="dark"] [class*="via-slate-"] {
--tw-gradient-from: var(--bg-panel) !important;
--tw-gradient-to: var(--bg-hover) !important;
}
[data-theme="dark"] .bg-gradient-to-br, [data-theme="dark"] .bg-gradient-to-r, [data-theme="dark"] .bg-gradient-to-b { background: var(--bg-panel) !important; }
/* ─── SHADOWS — em dark, sombras precisam ser mais fortes pra serem visíveis ─ */
[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-md { box-shadow: 0 2px 8px rgba(0,0,0,.5) !important; }
[data-theme="dark"] .shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,.6) !important; }
[data-theme="dark"] .shadow-xl { box-shadow: 0 12px 36px rgba(0,0,0,.7) !important; }
[data-theme="dark"] .shadow-2xl { box-shadow: 0 20px 50px rgba(0,0,0,.8) !important; }
/* ─── PLACEHOLDERS / DICAS ─────────────────────────────────────────────── */
[data-theme="dark"] .text-slate-400::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-disabled) !important; opacity: 0.6; }
/* ─── BADGES E PILLS coloridos (ex: bg-emerald-50 + text-emerald-700) ─── */
/* Já cobertos acima nos blocos de bg-X-50/100 e text-X-700/800. */
/* ─── SELEÇÃO DE TEXTO ─────────────────────────────────────────────────── */
[data-theme="dark"] ::selection { background-color: var(--brand-cyan-soft); color: var(--text-primary); }
/* ─── HOVER DE BOTÕES coloridos em dark — escurecer mais pra distinção ── */
[data-theme="dark"] .hover\:bg-violet-50:hover { background-color: rgba(167, 139, 250, 0.20) !important; }
[data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: rgba(52, 211, 153, 0.20) !important; }
[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(56, 189, 248, 0.20) !important; }
[data-theme="dark"] .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.20) !important; }
[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.20) !important; }
/* ─── DETALHES: DROPDOWN/MENU CUSTOMIZADO (avatar admin etc) ───────────── */
[data-theme="dark"] #adminMenuDrop { background-color: var(--bg-panel) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] #adminMenuDrop button { color: var(--text-primary) !important; }
[data-theme="dark"] #adminMenuDrop button:hover { background-color: var(--bg-hover) !important; }
[data-theme="dark"] #modalTrocarSenha > div { background-color: var(--bg-panel) !important; color: var(--text-primary) !important; }
[data-theme="dark"] #modalTrocarSenha input { background-color: var(--bg-app) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
/* ─── CHECKBOX/RADIO em dark — bordas visíveis ─────────────────────────── */
[data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] {
accent-color: var(--brand-cyan);
}
/* ─── HR / DIVISORES ───────────────────────────────────────────────────── */
[data-theme="dark"] hr { border-color: var(--border-color) !important; }
/* ─── CODE / PRE — terminais leem melhor em dark ──────────────────────── */
[data-theme="dark"] code, [data-theme="dark"] pre {
background-color: var(--bg-app) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-color) !important;
}
/* ─── BG-OPACITY classes (Tailwind /N suffix) ─────────────────────────── */
[data-theme="dark"] [class*="bg-slate-50/"], [data-theme="dark"] .bg-slate-50\/50, [data-theme="dark"] .bg-slate-50\/80 { background-color: var(--bg-hover) !important; }
/* ─── FIM Fase B ───────────────────────────────────────────────────────── */
/* ─── REINFORÇO: SELECT com classes Tailwind explícitas em dark ────────── */
/* Browsers (especialmente Chromium) ignoram color em