/* CSS Global para Dark/Light Mode - Garantir que todos os templates funcionem perfeitamente */

/* Garantir que elementos nunca fiquem ocultos */
* {
    visibility: visible !important;
}

/* Garantir que textos tenham cor adequada em ambos os modos */
html.dark,
html.dark body {
    background-color: #111827 !important;
    color: #f9fafb !important;
}

html:not(.dark),
html:not(.dark) body {
    background-color: #f9fafb !important;
    color: #1f2937 !important;
}

/* Garantir que cards e containers sejam visíveis */
html.dark .bg-gray-900,
html.dark .bg-gray-900\/70,
html.dark .bg-gray-900\/50,
html.dark .bg-\[#14141c\] {
    background-color: rgba(17, 24, 39, 0.9) !important;
    color: #f9fafb !important;
}

html:not(.dark) .bg-gray-900,
html:not(.dark) .bg-gray-900\/70,
html:not(.dark) .bg-gray-900\/50,
html:not(.dark) .bg-\[#14141c\] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #1f2937 !important;
}

/* Garantir que textos brancos sejam visíveis em light mode */
html:not(.dark) .text-white {
    color: #1f2937 !important;
}

html.dark .text-white {
    color: #f9fafb !important;
}

/* Garantir que textos cinza sejam visíveis */
html.dark .text-gray-400 {
    color: #9ca3af !important;
}

html:not(.dark) .text-gray-400 {
    color: #6b7280 !important;
}

html.dark .text-gray-300 {
    color: #d1d5db !important;
}

html:not(.dark) .text-gray-300 {
    color: #4b5563 !important;
}

/* Garantir que bordas sejam visíveis */
html.dark .border-gray-700,
html.dark .border-gray-700\/50 {
    border-color: #374151 !important;
}

html:not(.dark) .border-gray-700,
html:not(.dark) .border-gray-700\/50 {
    border-color: #e5e7eb !important;
}

/* Garantir que inputs sejam visíveis */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

/* Garantir que modais sejam visíveis */
html.dark .modal,
html.dark [class*="modal"] {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
}

html:not(.dark) .modal,
html:not(.dark) [class*="modal"] {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

/* Garantir que elementos com cores específicas sejam visíveis */
html.dark [class*="bg-\[#"],
html:not(.dark) [class*="bg-\[#"] {
    /* Manter cores específicas, mas garantir contraste */
}

/* Garantir que elementos nunca fiquem com opacity 0 */
*:not(.hidden):not([style*="display: none"]) {
    opacity: 1 !important;
}

/* Garantir que elementos com display none fiquem ocultos apenas quando necessário */
.hidden {
    display: none !important;
}

/* Garantir que elementos não sejam ocultos por erro */
[class*="opacity-0"]:not(.hidden):not([style*="display: none"]) {
    opacity: 1 !important;
}