/* ─── Tema CLARO ────────────────────────────────────────────────────────────── Aplicado quando . O tema escuro (default) usa as classes Tailwind originais sem alteração. Estes overrides usam !important porque competem com utilitários Tailwind. */ [data-theme="claro"] body { background-color: #f3f4f6; color: #111827; } /* ── Backgrounds ── */ [data-theme="claro"] .bg-gray-950 { background-color: #f3f4f6 !important; } [data-theme="claro"] .bg-gray-900 { background-color: #f9fafb !important; } [data-theme="claro"] .bg-gray-800 { background-color: #ffffff !important; } [data-theme="claro"] .bg-gray-700 { background-color: #f3f4f6 !important; } [data-theme="claro"] .bg-gray-600 { background-color: #e5e7eb !important; } [data-theme="claro"] .bg-gray-800\/30 { background-color: rgba(243,244,246,0.5) !important; } [data-theme="claro"] .bg-gray-800\/50 { background-color: rgba(243,244,246,0.7) !important; } [data-theme="claro"] .bg-gray-700\/50 { background-color: rgba(229,231,235,0.5) !important; } /* hover backgrounds (todas as variantes encontradas no codigo) */ [data-theme="claro"] .hover\:bg-gray-700:hover { background-color: #e5e7eb !important; } [data-theme="claro"] .hover\:bg-gray-700\/30:hover { background-color: rgba(229,231,235,0.5) !important; } [data-theme="claro"] .hover\:bg-gray-700\/40:hover { background-color: rgba(229,231,235,0.6) !important; } [data-theme="claro"] .hover\:bg-gray-700\/50:hover { background-color: rgba(229,231,235,0.7) !important; } [data-theme="claro"] .hover\:bg-gray-700\/60:hover { background-color: rgba(229,231,235,0.8) !important; } [data-theme="claro"] .hover\:bg-gray-800:hover { background-color: #e5e7eb !important; } [data-theme="claro"] .hover\:bg-gray-800\/30:hover { background-color: rgba(229,231,235,0.5) !important; } [data-theme="claro"] .hover\:bg-gray-800\/40:hover { background-color: rgba(229,231,235,0.6) !important; } [data-theme="claro"] .hover\:bg-gray-800\/50:hover { background-color: rgba(229,231,235,0.7) !important; } [data-theme="claro"] .hover\:bg-gray-800\/60:hover { background-color: rgba(229,231,235,0.8) !important; } [data-theme="claro"] .hover\:bg-gray-900:hover { background-color: #e5e7eb !important; } [data-theme="claro"] .hover\:bg-gray-900\/30:hover { background-color: rgba(229,231,235,0.4) !important; } [data-theme="claro"] .hover\:bg-gray-900\/40:hover { background-color: rgba(229,231,235,0.5) !important; } [data-theme="claro"] .hover\:bg-gray-900\/50:hover { background-color: rgba(229,231,235,0.6) !important; } [data-theme="claro"] .hover\:bg-gray-900\/60:hover { background-color: rgba(229,231,235,0.8) !important; } /* bg-gray-* nao-padrao (gray-750, gray-850 etc usados em algumas telas) */ [data-theme="claro"] .bg-gray-850 { background-color: #f9fafb !important; } [data-theme="claro"] .bg-gray-750 { background-color: #f3f4f6 !important; } [data-theme="claro"] .hover\:bg-gray-750:hover { background-color: #e5e7eb !important; } /* bg-gray-700 com opacidade (estados nao-hover) */ [data-theme="claro"] .bg-gray-700\/30 { background-color: rgba(229,231,235,0.5) !important; } [data-theme="claro"] .bg-gray-700\/40 { background-color: rgba(229,231,235,0.6) !important; } [data-theme="claro"] .bg-gray-700\/50 { background-color: rgba(229,231,235,0.7) !important; } /* bg-gray-900 com opacidade */ [data-theme="claro"] .bg-gray-900\/30 { background-color: rgba(229,231,235,0.4) !important; } [data-theme="claro"] .bg-gray-900\/40 { background-color: rgba(229,231,235,0.5) !important; } [data-theme="claro"] .bg-gray-900\/50 { background-color: rgba(229,231,235,0.6) !important; } [data-theme="claro"] .bg-gray-900\/60 { background-color: rgba(229,231,235,0.8) !important; } /* bg-blue-950 (usado em SQLBuilder) */ [data-theme="claro"] .bg-blue-950\/40 { background-color: rgba(219,234,254,0.6) !important; } /* ── Texto ── */ [data-theme="claro"] .text-white { color: #111827 !important; } [data-theme="claro"] .text-gray-100 { color: #1f2937 !important; } [data-theme="claro"] .text-gray-200 { color: #1f2937 !important; } [data-theme="claro"] .text-gray-300 { color: #374151 !important; } [data-theme="claro"] .text-gray-400 { color: #6b7280 !important; } [data-theme="claro"] .text-gray-500 { color: #6b7280 !important; } [data-theme="claro"] .text-gray-600 { color: #9ca3af !important; } [data-theme="claro"] .text-gray-700 { color: #d1d5db !important; } /* hover text */ [data-theme="claro"] .hover\:text-white:hover { color: #111827 !important; } [data-theme="claro"] .hover\:text-gray-100:hover { color: #1f2937 !important; } [data-theme="claro"] .hover\:text-gray-200:hover { color: #1f2937 !important; } [data-theme="claro"] .hover\:text-gray-300:hover { color: #374151 !important; } /* placeholders */ [data-theme="claro"] .placeholder-gray-500::placeholder { color: #9ca3af !important; } [data-theme="claro"] .placeholder-gray-600::placeholder { color: #9ca3af !important; } /* ── Bordas ── */ [data-theme="claro"] .border-gray-600 { border-color: #d1d5db !important; } [data-theme="claro"] .border-gray-700 { border-color: #e5e7eb !important; } [data-theme="claro"] .border-gray-800 { border-color: #e5e7eb !important; } [data-theme="claro"] .border-gray-900 { border-color: #f3f4f6 !important; } [data-theme="claro"] .hover\:border-gray-500:hover { border-color: #9ca3af !important; } [data-theme="claro"] .hover\:border-gray-700:hover { border-color: #d1d5db !important; } /* divide */ [data-theme="claro"] .divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: #e5e7eb !important; } [data-theme="claro"] .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: #f3f4f6 !important; } /* ── Tags / chips com transparência (variantes /20 ate /70) ── */ [data-theme="claro"] .bg-red-900\/20, [data-theme="claro"] .bg-red-900\/30, [data-theme="claro"] .bg-red-900\/40 { background-color: #fee2e2 !important; } [data-theme="claro"] .bg-red-900\/50, [data-theme="claro"] .bg-red-900\/60, [data-theme="claro"] .bg-red-900\/70 { background-color: #fecaca !important; } [data-theme="claro"] .bg-green-900\/20, [data-theme="claro"] .bg-green-900\/30, [data-theme="claro"] .bg-green-900\/40 { background-color: #dcfce7 !important; } [data-theme="claro"] .bg-green-900\/50, [data-theme="claro"] .bg-green-900\/60, [data-theme="claro"] .bg-green-900\/70 { background-color: #bbf7d0 !important; } [data-theme="claro"] .bg-blue-900\/20, [data-theme="claro"] .bg-blue-900\/30, [data-theme="claro"] .bg-blue-900\/40 { background-color: #dbeafe !important; } [data-theme="claro"] .bg-blue-900\/50, [data-theme="claro"] .bg-blue-900\/60, [data-theme="claro"] .bg-blue-900\/70 { background-color: #bfdbfe !important; } [data-theme="claro"] .bg-purple-900\/20, [data-theme="claro"] .bg-purple-900\/30, [data-theme="claro"] .bg-purple-900\/40 { background-color: #f3e8ff !important; } [data-theme="claro"] .bg-purple-900\/50, [data-theme="claro"] .bg-purple-900\/60, [data-theme="claro"] .bg-purple-900\/70 { background-color: #e9d5ff !important; } [data-theme="claro"] .bg-orange-900\/20, [data-theme="claro"] .bg-orange-900\/30, [data-theme="claro"] .bg-orange-900\/40 { background-color: #ffedd5 !important; } [data-theme="claro"] .bg-orange-900\/50, [data-theme="claro"] .bg-orange-900\/60, [data-theme="claro"] .bg-orange-900\/70 { background-color: #fed7aa !important; } [data-theme="claro"] .bg-amber-900\/20, [data-theme="claro"] .bg-amber-900\/30, [data-theme="claro"] .bg-amber-900\/40 { background-color: #fef3c7 !important; } [data-theme="claro"] .bg-amber-900\/50, [data-theme="claro"] .bg-amber-900\/60, [data-theme="claro"] .bg-amber-900\/70 { background-color: #fde68a !important; } [data-theme="claro"] .bg-emerald-900\/20, [data-theme="claro"] .bg-emerald-900\/30, [data-theme="claro"] .bg-emerald-900\/40 { background-color: #d1fae5 !important; } [data-theme="claro"] .bg-emerald-900\/50, [data-theme="claro"] .bg-emerald-900\/60, [data-theme="claro"] .bg-emerald-900\/70 { background-color: #a7f3d0 !important; } [data-theme="claro"] .bg-yellow-900\/20, [data-theme="claro"] .bg-yellow-900\/30, [data-theme="claro"] .bg-yellow-900\/40 { background-color: #fef9c3 !important; } [data-theme="claro"] .bg-yellow-900\/50, [data-theme="claro"] .bg-yellow-900\/60, [data-theme="claro"] .bg-yellow-900\/70 { background-color: #fef08a !important; } [data-theme="claro"] .bg-cyan-900\/20, [data-theme="claro"] .bg-cyan-900\/30, [data-theme="claro"] .bg-cyan-900\/40 { background-color: #cffafe !important; } [data-theme="claro"] .bg-cyan-900\/50, [data-theme="claro"] .bg-cyan-900\/60, [data-theme="claro"] .bg-cyan-900\/70 { background-color: #a5f3fc !important; } [data-theme="claro"] .bg-indigo-900\/20, [data-theme="claro"] .bg-indigo-900\/30, [data-theme="claro"] .bg-indigo-900\/40 { background-color: #e0e7ff !important; } [data-theme="claro"] .bg-indigo-900\/50, [data-theme="claro"] .bg-indigo-900\/60, [data-theme="claro"] .bg-indigo-900\/70 { background-color: #c7d2fe !important; } [data-theme="claro"] .bg-teal-900\/20, [data-theme="claro"] .bg-teal-900\/30, [data-theme="claro"] .bg-teal-900\/40 { background-color: #ccfbf1 !important; } [data-theme="claro"] .bg-teal-900\/50, [data-theme="claro"] .bg-teal-900\/60, [data-theme="claro"] .bg-teal-900\/70 { background-color: #99f6e4 !important; } [data-theme="claro"] .bg-pink-900\/20, [data-theme="claro"] .bg-pink-900\/30, [data-theme="claro"] .bg-pink-900\/40 { background-color: #fce7f3 !important; } [data-theme="claro"] .bg-pink-900\/50, [data-theme="claro"] .bg-pink-900\/60, [data-theme="claro"] .bg-pink-900\/70 { background-color: #fbcfe8 !important; } /* Texto colorido em chips: cores escuras saturadas (X-900) para fundo claro pastel */ [data-theme="claro"] .text-red-300 { color: #7f1d1d !important; } [data-theme="claro"] .text-red-400 { color: #7f1d1d !important; } [data-theme="claro"] .text-green-300 { color: #14532d !important; } [data-theme="claro"] .text-green-400 { color: #14532d !important; } [data-theme="claro"] .text-blue-300 { color: #1e3a8a !important; } [data-theme="claro"] .text-blue-400 { color: #1e3a8a !important; } [data-theme="claro"] .text-purple-300 { color: #581c87 !important; } [data-theme="claro"] .text-purple-400 { color: #581c87 !important; } [data-theme="claro"] .text-orange-300 { color: #7c2d12 !important; } [data-theme="claro"] .text-orange-400 { color: #7c2d12 !important; } [data-theme="claro"] .text-amber-300 { color: #78350f !important; } [data-theme="claro"] .text-amber-400 { color: #78350f !important; } [data-theme="claro"] .text-emerald-300 { color: #064e3b !important; } [data-theme="claro"] .text-emerald-400 { color: #064e3b !important; } [data-theme="claro"] .text-yellow-300 { color: #713f12 !important; } [data-theme="claro"] .text-yellow-400 { color: #713f12 !important; } [data-theme="claro"] .text-cyan-300 { color: #164e63 !important; } [data-theme="claro"] .text-cyan-400 { color: #164e63 !important; } [data-theme="claro"] .text-indigo-300 { color: #312e81 !important; } [data-theme="claro"] .text-indigo-400 { color: #312e81 !important; } [data-theme="claro"] .text-teal-300 { color: #134e4a !important; } [data-theme="claro"] .text-teal-400 { color: #134e4a !important; } [data-theme="claro"] .text-pink-300 { color: #831843 !important; } [data-theme="claro"] .text-pink-400 { color: #831843 !important; } /* Cards com bg-X-900/50 + text-X-300 na mesma div: o text-X-300 herda nos filhos, deixando o conteúdo amber-em-amber. Forca cor neutra escura para o texto principal do card; badges com classe propria mantem cor. */ [data-theme="claro"] .bg-amber-900\/50.text-amber-300, [data-theme="claro"] .bg-amber-900\/40.text-amber-300, [data-theme="claro"] .bg-green-900\/50.text-green-300, [data-theme="claro"] .bg-green-900\/40.text-green-300, [data-theme="claro"] .bg-red-900\/50.text-red-300, [data-theme="claro"] .bg-red-900\/40.text-red-300, [data-theme="claro"] .bg-blue-900\/50.text-blue-300, [data-theme="claro"] .bg-purple-900\/50.text-purple-300, [data-theme="claro"] .bg-cyan-900\/50.text-cyan-300, [data-theme="claro"] .bg-emerald-900\/50.text-emerald-300, [data-theme="claro"] .bg-yellow-900\/50.text-yellow-300, [data-theme="claro"] .bg-orange-900\/50.text-orange-300, [data-theme="claro"] .bg-indigo-900\/50.text-indigo-300, [data-theme="claro"] .bg-teal-900\/50.text-teal-300, [data-theme="claro"] .bg-pink-900\/50.text-pink-300 { color: #1f2937 !important; } /* text-X-500: tons mais escuros para legibilidade no claro */ [data-theme="claro"] .text-red-500 { color: #b91c1c !important; } [data-theme="claro"] .text-green-500 { color: #15803d !important; } [data-theme="claro"] .text-blue-500 { color: #1d4ed8 !important; } [data-theme="claro"] .text-purple-500 { color: #7e22ce !important; } [data-theme="claro"] .text-orange-500 { color: #c2410c !important; } [data-theme="claro"] .text-amber-500 { color: #b45309 !important; } [data-theme="claro"] .text-emerald-500 { color: #047857 !important; } [data-theme="claro"] .text-yellow-500 { color: #a16207 !important; } [data-theme="claro"] .text-cyan-500 { color: #0e7490 !important; } [data-theme="claro"] .text-indigo-500 { color: #4338ca !important; } [data-theme="claro"] .text-teal-500 { color: #0f766e !important; } [data-theme="claro"] .text-pink-500 { color: #be185d !important; } /* text-X-600: tons levemente mais escuros */ [data-theme="claro"] .text-red-600 { color: #b91c1c !important; } [data-theme="claro"] .text-green-600 { color: #15803d !important; } [data-theme="claro"] .text-blue-600 { color: #1d4ed8 !important; } [data-theme="claro"] .text-purple-600 { color: #7e22ce !important; } [data-theme="claro"] .text-orange-600 { color: #c2410c !important; } [data-theme="claro"] .text-amber-600 { color: #b45309 !important; } [data-theme="claro"] .text-emerald-600 { color: #047857 !important; } /* ── Backgrounds X-900/950/800 SÓLIDOS (sem opacidade) ── Usados em botões/chips com fundo escuro saturado. No tema claro, viram pasteis claros. */ [data-theme="claro"] .bg-red-950, [data-theme="claro"] .bg-red-900 { background-color: #fee2e2 !important; } [data-theme="claro"] .bg-red-800 { background-color: #fecaca !important; } [data-theme="claro"] .bg-green-950, [data-theme="claro"] .bg-green-900 { background-color: #dcfce7 !important; } [data-theme="claro"] .bg-green-800 { background-color: #bbf7d0 !important; } [data-theme="claro"] .bg-blue-950, [data-theme="claro"] .bg-blue-900 { background-color: #dbeafe !important; } [data-theme="claro"] .bg-blue-800 { background-color: #bfdbfe !important; } [data-theme="claro"] .bg-purple-950, [data-theme="claro"] .bg-purple-900 { background-color: #f3e8ff !important; } [data-theme="claro"] .bg-purple-800 { background-color: #e9d5ff !important; } [data-theme="claro"] .bg-amber-950, [data-theme="claro"] .bg-amber-900 { background-color: #fef3c7 !important; } [data-theme="claro"] .bg-amber-800 { background-color: #fde68a !important; } [data-theme="claro"] .bg-emerald-950, [data-theme="claro"] .bg-emerald-900 { background-color: #d1fae5 !important; } [data-theme="claro"] .bg-emerald-800 { background-color: #a7f3d0 !important; } [data-theme="claro"] .bg-cyan-950, [data-theme="claro"] .bg-cyan-900 { background-color: #cffafe !important; } [data-theme="claro"] .bg-yellow-950, [data-theme="claro"] .bg-yellow-900 { background-color: #fef9c3 !important; } [data-theme="claro"] .bg-orange-950, [data-theme="claro"] .bg-orange-900 { background-color: #ffedd5 !important; } [data-theme="claro"] .bg-indigo-950, [data-theme="claro"] .bg-indigo-900 { background-color: #e0e7ff !important; } [data-theme="claro"] .bg-teal-950, [data-theme="claro"] .bg-teal-900 { background-color: #ccfbf1 !important; } [data-theme="claro"] .bg-pink-950, [data-theme="claro"] .bg-pink-900 { background-color: #fce7f3 !important; } /* hover variantes */ [data-theme="claro"] .hover\:bg-red-800:hover { background-color: #fecaca !important; } [data-theme="claro"] .hover\:bg-red-900:hover { background-color: #fee2e2 !important; } [data-theme="claro"] .hover\:bg-green-800:hover { background-color: #bbf7d0 !important; } [data-theme="claro"] .hover\:bg-green-900:hover { background-color: #dcfce7 !important; } [data-theme="claro"] .hover\:bg-blue-800:hover { background-color: #bfdbfe !important; } [data-theme="claro"] .hover\:bg-purple-800:hover { background-color: #e9d5ff !important; } [data-theme="claro"] .hover\:bg-amber-800:hover { background-color: #fde68a !important; } [data-theme="claro"] .hover\:bg-emerald-800:hover { background-color: #a7f3d0 !important; } /* ── Botões saturados (X-400 a X-700) com text-white: manter texto branco ── Especificidade .A.B (0,2,0) sobrescreve .text-white (0,1,0). Cobertura abrangente para todas as cores Tailwind comuns. */ [data-theme="claro"] .bg-red-400.text-white, [data-theme="claro"] .bg-red-500.text-white, [data-theme="claro"] .bg-red-600.text-white, [data-theme="claro"] .bg-red-700.text-white, [data-theme="claro"] .bg-orange-400.text-white, [data-theme="claro"] .bg-orange-500.text-white, [data-theme="claro"] .bg-orange-600.text-white, [data-theme="claro"] .bg-orange-700.text-white, [data-theme="claro"] .bg-amber-400.text-white, [data-theme="claro"] .bg-amber-500.text-white, [data-theme="claro"] .bg-amber-600.text-white, [data-theme="claro"] .bg-amber-700.text-white, [data-theme="claro"] .bg-yellow-400.text-white, [data-theme="claro"] .bg-yellow-500.text-white, [data-theme="claro"] .bg-yellow-600.text-white, [data-theme="claro"] .bg-yellow-700.text-white, [data-theme="claro"] .bg-lime-400.text-white, [data-theme="claro"] .bg-lime-500.text-white, [data-theme="claro"] .bg-lime-600.text-white, [data-theme="claro"] .bg-lime-700.text-white, [data-theme="claro"] .bg-green-400.text-white, [data-theme="claro"] .bg-green-500.text-white, [data-theme="claro"] .bg-green-600.text-white, [data-theme="claro"] .bg-green-700.text-white, [data-theme="claro"] .bg-emerald-400.text-white, [data-theme="claro"] .bg-emerald-500.text-white, [data-theme="claro"] .bg-emerald-600.text-white, [data-theme="claro"] .bg-emerald-700.text-white, [data-theme="claro"] .bg-teal-400.text-white, [data-theme="claro"] .bg-teal-500.text-white, [data-theme="claro"] .bg-teal-600.text-white, [data-theme="claro"] .bg-teal-700.text-white, [data-theme="claro"] .bg-cyan-400.text-white, [data-theme="claro"] .bg-cyan-500.text-white, [data-theme="claro"] .bg-cyan-600.text-white, [data-theme="claro"] .bg-cyan-700.text-white, [data-theme="claro"] .bg-sky-400.text-white, [data-theme="claro"] .bg-sky-500.text-white, [data-theme="claro"] .bg-sky-600.text-white, [data-theme="claro"] .bg-sky-700.text-white, [data-theme="claro"] .bg-blue-400.text-white, [data-theme="claro"] .bg-blue-500.text-white, [data-theme="claro"] .bg-blue-600.text-white, [data-theme="claro"] .bg-blue-700.text-white, [data-theme="claro"] .bg-indigo-400.text-white, [data-theme="claro"] .bg-indigo-500.text-white, [data-theme="claro"] .bg-indigo-600.text-white, [data-theme="claro"] .bg-indigo-700.text-white, [data-theme="claro"] .bg-violet-400.text-white, [data-theme="claro"] .bg-violet-500.text-white, [data-theme="claro"] .bg-violet-600.text-white, [data-theme="claro"] .bg-violet-700.text-white, [data-theme="claro"] .bg-purple-400.text-white, [data-theme="claro"] .bg-purple-500.text-white, [data-theme="claro"] .bg-purple-600.text-white, [data-theme="claro"] .bg-purple-700.text-white, [data-theme="claro"] .bg-fuchsia-400.text-white, [data-theme="claro"] .bg-fuchsia-500.text-white, [data-theme="claro"] .bg-fuchsia-600.text-white, [data-theme="claro"] .bg-fuchsia-700.text-white, [data-theme="claro"] .bg-pink-400.text-white, [data-theme="claro"] .bg-pink-500.text-white, [data-theme="claro"] .bg-pink-600.text-white, [data-theme="claro"] .bg-pink-700.text-white, [data-theme="claro"] .bg-rose-400.text-white, [data-theme="claro"] .bg-rose-500.text-white, [data-theme="claro"] .bg-rose-600.text-white, [data-theme="claro"] .bg-rose-700.text-white, [data-theme="claro"] .bg-slate-500.text-white, [data-theme="claro"] .bg-slate-600.text-white, [data-theme="claro"] .bg-slate-700.text-white, [data-theme="claro"] .bg-gray-500.text-white, [data-theme="claro"] .bg-gray-600.text-white, [data-theme="claro"] .bg-gray-700.text-white, [data-theme="claro"] .bg-zinc-500.text-white, [data-theme="claro"] .bg-zinc-600.text-white, [data-theme="claro"] .bg-zinc-700.text-white, [data-theme="claro"] .bg-neutral-500.text-white, [data-theme="claro"] .bg-neutral-600.text-white, [data-theme="claro"] .bg-neutral-700.text-white, [data-theme="claro"] .bg-stone-500.text-white, [data-theme="claro"] .bg-stone-600.text-white, [data-theme="claro"] .bg-stone-700.text-white { color: #ffffff !important; } /* Quando bg-X-800 está combinado com text-white: tratar como botão saturado (sobrescreve o pastel claro do bg-X-800 sólido aplicado acima). */ [data-theme="claro"] .bg-purple-800.text-white { background-color: #7e22ce !important; color: #fff !important; } [data-theme="claro"] .bg-blue-800.text-white { background-color: #1d4ed8 !important; color: #fff !important; } [data-theme="claro"] .bg-teal-800.text-white { background-color: #0f766e !important; color: #fff !important; } [data-theme="claro"] .bg-red-800.text-white { background-color: #b91c1c !important; color: #fff !important; } [data-theme="claro"] .bg-green-800.text-white { background-color: #15803d !important; color: #fff !important; } [data-theme="claro"] .bg-emerald-800.text-white { background-color: #047857 !important; color: #fff !important; } [data-theme="claro"] .bg-amber-800.text-white { background-color: #b45309 !important; color: #fff !important; } [data-theme="claro"] .bg-orange-800.text-white { background-color: #c2410c !important; color: #fff !important; } [data-theme="claro"] .bg-indigo-800.text-white { background-color: #4338ca !important; color: #fff !important; } [data-theme="claro"] .bg-cyan-800.text-white { background-color: #0e7490 !important; color: #fff !important; } [data-theme="claro"] .bg-pink-800.text-white { background-color: #be185d !important; color: #fff !important; } /* Quando o fundo é definido inline (style backgroundColor), text-white precisa continuar branco. Marcamos esses elementos com a classe .tema-fundo-fixo */ [data-theme="claro"] .tema-fundo-fixo, [data-theme="claro"] .tema-fundo-fixo .text-white { color: #ffffff !important; } /* Bordas coloridas em chips: clarear */ [data-theme="claro"] .border-red-700, [data-theme="claro"] .border-red-800 { border-color: #fca5a5 !important; } [data-theme="claro"] .border-green-700, [data-theme="claro"] .border-green-800 { border-color: #86efac !important; } [data-theme="claro"] .border-blue-700, [data-theme="claro"] .border-blue-800 { border-color: #93c5fd !important; } [data-theme="claro"] .border-purple-700, [data-theme="claro"] .border-purple-800 { border-color: #d8b4fe !important; } [data-theme="claro"] .border-orange-700, [data-theme="claro"] .border-orange-800 { border-color: #fdba74 !important; } [data-theme="claro"] .border-amber-700, [data-theme="claro"] .border-amber-800 { border-color: #fcd34d !important; } [data-theme="claro"] .border-emerald-700, [data-theme="claro"] .border-emerald-800 { border-color: #6ee7b7 !important; } [data-theme="claro"] .border-yellow-700, [data-theme="claro"] .border-yellow-800 { border-color: #fde047 !important; } [data-theme="claro"] .border-cyan-700 { border-color: #67e8f9 !important; } [data-theme="claro"] .border-indigo-700 { border-color: #a5b4fc !important; } [data-theme="claro"] .border-teal-700 { border-color: #5eead4 !important; } [data-theme="claro"] .border-pink-700 { border-color: #f9a8d4 !important; } /* ── Inputs/selects/textareas: força fundo branco e texto escuro ── */ [data-theme="claro"] input, [data-theme="claro"] select, [data-theme="claro"] textarea { color-scheme: light; } /* Evita scrollbar dark do Chrome em containers com overflow */ [data-theme="claro"] { color-scheme: light; } /* ── Sombras: levemente acentuadas no tema claro ── */ [data-theme="claro"] .shadow-2xl { box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; } [data-theme="claro"] .shadow-xl { box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important; } [data-theme="claro"] .shadow-lg { box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; } [data-theme="claro"] .shadow-md { box-shadow: 0 3px 10px rgba(0,0,0,0.05) !important; } [data-theme="claro"] .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; }