/* Custom CSS for CobraZap */ /* Tailwind CSS será compilado aqui quando necessário */ /* Header da página principal sempre escuro (independente do tema) */ header.bg-gray-900 { background-color: #111827 !important; } /* Garantir que o header não mude de cor mesmo com tema claro */ .theme-dark header.bg-gray-900, header.bg-gray-900 { background-color: #111827 !important; } /* Links do header sempre claros */ header.bg-gray-900 a.text-gray-300, header.bg-gray-900 a.text-gray-700 { color: #d1d5db !important; /* gray-300 */ } header.bg-gray-900 a.text-gray-300:hover, header.bg-gray-900 a.text-gray-700:hover { color: #ffffff !important; } /* Animações personalizadas - Otimizadas para GPU */ @keyframes fadeIn { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .fade-in { animation: fadeIn 0.5s ease-out; will-change: opacity, transform; } /* Scroll suave - Apenas quando necessário */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Estilos para cards - Otimizado com GPU acceleration */ .card { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; will-change: transform; transform: translateZ(0); /* Force GPU acceleration */ } .card:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } /* Transições suaves de tema - Otimizadas para propriedades que não causam reflow */ /* Removido de elementos que não precisam de transição */ html, body { transition: background-color .25s ease, color .25s ease; } /* Transições apenas para elementos interativos */ a, button, input, select, textarea { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } /* Cards e elementos específicos */ .card, .shadow, .shadow-sm, .shadow-md, .shadow-lg { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; } /* Tema escuro (ativado adicionando .theme-dark na ) */ .theme-dark body { background-color: #0f172a; /* slate-900 */ color: #e5e7eb; /* gray-200 */ } /* Suporte para dark mode usando .theme-dark */ /* As classes dark: do Tailwind serão aplicadas quando .theme-dark estiver no html */ .theme-dark .bg-white { background-color: #1f2937 !important; /* gray-800 */ } .theme-dark .bg-gray-50 { background-color: #111827 !important; /* gray-900 */ } .theme-dark .text-gray-900 { color: #f9fafb !important; /* gray-50 */ } .theme-dark .text-gray-700 { color: #e5e7eb !important; /* gray-200 */ } .theme-dark .text-gray-600 { color: #d1d5db !important; /* gray-300 */ } .theme-dark .text-gray-500 { color: #9ca3af !important; /* gray-400 */ } .theme-dark .border-gray-200 { border-color: #374151 !important; /* gray-700 */ } .theme-dark .border-gray-300 { border-color: #4b5563 !important; /* gray-600 */ } /* Correções específicas para botões “secundários” no tema escuro */ /* Caso o botão tenha .bg-white + .text-white na mesma tag */ .theme-dark .bg-white.text-white, .theme-dark .bg-gray-50.text-white, .theme-dark .bg-gray-100.text-white { color: #e5e7eb !important; } /* Botões e elementos clicáveis herdarem cor legível no dark */ /* Nota: Botões com classes de cor específica (text-blue-600, text-red-600, etc) têm regras próprias abaixo */ .theme-dark button, .theme-dark .btn, .theme-dark [role="button"], .theme-dark .button { color: #e5e7eb; } /* Hovers claros ficam escuros no dark */ .theme-dark .hover\:bg-gray-50:hover, .theme-dark .hover\:bg-gray-100:hover { background-color: #0f172a !important; /* slate-900 */ } /* Botões e tags com fundo cinza-claro (ex.: Cancelar) no dark */ .theme-dark .bg-gray-300 { background-color: #374151 !important; /* gray-700 */ color: #e5e7eb !important; /* texto claro */ border-color: #4b5563 !important; /* gray-600 */ } .theme-dark .hover\:bg-gray-400:hover { background-color: #4b5563 !important; /* gray-600 */ color: #f3f4f6 !important; /* gray-100 */ } /* Botões com bg cinza ainda mais claro */ .theme-dark .bg-gray-200 { background-color: #374151 !important; /* gray-700 */ color: #e5e7eb !important; border-color: #4b5563 !important; } /* Exceção para toggle switches - devem manter fundo claro */ .theme-dark .toggle-switch-bg { background-color: #e5e7eb !important; /* gray-200 */ } /* Toggle switches quando ativados no tema escuro */ .theme-dark .peer:checked ~ .toggle-switch-bg[data-toggle-type="days_before"], .theme-dark .peer:checked ~ .toggle-switch-bg:not([data-toggle-type="on_day"]):not([data-toggle-type="overdue"]) { background-color: #3b82f6 !important; /* blue-500 */ } .theme-dark .peer:checked ~ .toggle-switch-bg[data-toggle-type="on_day"] { background-color: #eab308 !important; /* yellow-500 */ } .theme-dark .peer:checked ~ .toggle-switch-bg[data-toggle-type="overdue"] { background-color: #ef4444 !important; /* red-500 */ } .theme-dark .hover\:bg-gray-300:hover { background-color: #4b5563 !important; /* gray-600 */ color: #f3f4f6 !important; /* gray-100 */ } /* CKEditor tema escuro */ .theme-dark .ck-editor-dark .ck-editor__editable, .theme-dark .ck-editor-dark .ck-editor__editable_inline { background-color: #1f2937 !important; /* gray-800 */ color: #f9fafb !important; /* gray-50 */ border-color: #4b5563 !important; /* gray-600 */ } .theme-dark .ck-editor-dark .ck-toolbar { background-color: #374151 !important; /* gray-700 */ border-color: #4b5563 !important; /* gray-600 */ } .theme-dark .ck-editor-dark .ck-toolbar .ck-button { color: #f9fafb !important; /* gray-50 */ } .theme-dark .ck-editor-dark .ck-toolbar .ck-button:hover:not(.ck-disabled) { background-color: #4b5563 !important; /* gray-600 */ } .theme-dark .ck-editor-dark .ck-toolbar .ck-button.ck-on { background-color: #1e40af !important; /* blue-800 */ color: #ffffff !important; } .theme-dark .ck-editor-dark .ck-toolbar .ck-dropdown__panel { background-color: #374151 !important; /* gray-700 */ border-color: #4b5563 !important; /* gray-600 */ } .theme-dark .ck-editor-dark .ck-dropdown__panel .ck-button { color: #f9fafb !important; /* gray-50 */ } .theme-dark .ck-editor-dark .ck-dropdown__panel .ck-button:hover { background-color: #4b5563 !important; /* gray-600 */ } .theme-dark .ck-editor-dark .ck-toolbar__separator { background-color: #4b5563 !important; /* gray-600 */ } .theme-dark .ck-editor-dark .ck-editor__editable.ck-focused { border-color: #3b82f6 !important; /* blue-500 */ box-shadow: 0 0 0 1px #3b82f6 !important; } .theme-dark .ck-editor-dark .ck-placeholder { color: #9ca3af !important; /* gray-400 */ } .theme-dark .ck-editor-dark .ck-link-form { background-color: #374151 !important; /* gray-700 */ border-color: #4b5563 !important; /* gray-600 */ } .theme-dark .ck-editor-dark .ck-link-form input { background-color: #1f2937 !important; /* gray-800 */ color: #f9fafb !important; /* gray-50 */ border-color: #4b5563 !important; /* gray-600 */ } .theme-dark .ck-editor-dark .ck-balloon-panel { background-color: #374151 !important; /* gray-700 */ border-color: #4b5563 !important; /* gray-600 */ color: #f9fafb !important; /* gray-50 */ } .theme-dark .ck-editor-dark .ck-balloon-panel .ck-button { color: #f9fafb !important; /* gray-50 */ } .theme-dark .ck-editor-dark .ck-balloon-panel .ck-button:hover { background-color: #4b5563 !important; /* gray-600 */ } /* Sidebar e rodapé já escuros: reforça tons */ .theme-dark footer, .theme-dark .bg-gray-800 { background-color: #0b1220 !important; } .theme-dark .bg-gray-900 { background-color: #0a0f1a !important; } /* Bordas */ .theme-dark .border-gray-200, .theme-dark .border-gray-300 { border-color: #374151 !important; /* gray-700 */ } .theme-dark .border-gray-700, .theme-dark .border-gray-800, .theme-dark .border-gray-900 { border-color: #1f2937 !important; /* gray-800 */ } /* Tipografia base */ .theme-dark .text-gray-900, .theme-dark h1.text-gray-900, .theme-dark h2.text-gray-900, .theme-dark h3.text-gray-900, .theme-dark h4.text-gray-900, .theme-dark h5.text-gray-900, .theme-dark h6.text-gray-900 { color: #e5e7eb !important; /* gray-200 - claro para tema escuro */ } .theme-dark .text-gray-700, .theme-dark .text-gray-600, .theme-dark .text-gray-500 { color: #d1d5db !important; /* gray-300 */ } .theme-dark .text-gray-400 { color: #9ca3af !important; /* gray-400 */ } /* Correção de contraste do nome do cliente no tema escuro */ .theme-dark .client-name, .theme-dark .category-name, .theme-dark .invoice-name { color: #e5e7eb !important; /* gray-200 */ } /* Garantir visibilidade do nome da categoria no tema claro */ .category-name, .invoice-name { color: #111827 !important; /* gray-900 */ } /* Links */ .theme-dark a { color: #93c5fd; /* blue-300 */ } .theme-dark a:hover { color: #bfdbfe; /* blue-200 */ } /* Inputs e elementos de formulário */ .theme-dark input, .theme-dark select, .theme-dark textarea { background-color: #111827; color: #e5e7eb; border-color: #374151; } .theme-dark input::placeholder, .theme-dark textarea::placeholder { color: #9ca3af; } /* Cards/blocos */ .theme-dark .card, .theme-dark .shadow, .theme-dark .shadow-sm, .theme-dark .shadow-md, .theme-dark .shadow-lg { background-color: #111827; color: #e5e7eb; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important; } /* Toggle Switch customizado */ .toggle-switch { display: flex; align-items: center; gap: 12px; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-switch-slider { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; background-color: #d1d5db; transition: background-color .3s ease; border-radius: 24px; will-change: background-color; transform: translateZ(0); /* Force GPU acceleration */ } .toggle-switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: transform .3s ease; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); will-change: transform; transform: translateZ(0); /* Force GPU acceleration */ } .toggle-switch input:checked ~ .toggle-switch-slider { background-color: #16a34a; } .toggle-switch input:checked ~ .toggle-switch-slider:before { transform: translate3d(20px, 0, 0); } .toggle-switch input:focus ~ .toggle-switch-slider { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); } /* Tema escuro para toggle switch */ .theme-dark .toggle-switch-slider { background-color: #4b5563; } .theme-dark .toggle-switch input:checked ~ .toggle-switch-slider { background-color: #16a34a; } /* Modal no tema escuro */ .theme-dark #inviteLinkModal > div { background-color: #111827; color: #e5e7eb; } .theme-dark #inviteLinkModal .bg-gray-50 { background-color: #1f2937 !important; } /* Botões de ações no tema escuro - manter cores visíveis */ .theme-dark .text-blue-600 { color: #60a5fa !important; /* blue-400 - mais claro para tema escuro */ } .theme-dark .text-blue-600:hover, .theme-dark .hover\:text-blue-900:hover { color: #93c5fd !important; /* blue-300 - ainda mais claro no hover */ } .theme-dark .text-green-600 { color: #4ade80 !important; /* green-400 - mais claro para tema escuro */ } .theme-dark .text-green-600:hover, .theme-dark .hover\:text-green-900:hover { color: #86efac !important; /* green-300 - ainda mais claro no hover */ } .theme-dark .text-orange-600 { color: #fb923c !important; /* orange-400 - mais claro para tema escuro */ } .theme-dark .text-orange-600:hover, .theme-dark .hover\:text-orange-900:hover { color: #fdba74 !important; /* orange-300 - ainda mais claro no hover */ } .theme-dark .text-red-600 { color: #f87171 !important; /* red-400 - mais claro para tema escuro */ } .theme-dark .text-red-600:hover, .theme-dark .hover\:text-red-900:hover { color: #fca5a5 !important; /* red-300 - ainda mais claro no hover */ } /* Badge de deletado no tema escuro - fundo vermelho */ .theme-dark .bg-red-100 { background-color: #991b1b !important; /* red-800 - vermelho escuro */ } .theme-dark .text-red-800 { color: #fecaca !important; /* red-200 - vermelho claro para contraste */ } /* Botões verdes no tema escuro - forçar cor verde */ .theme-dark .bg-green-600, .theme-dark #btn-aprovar-acordo, .theme-dark button[onclick="abrirModalAprovarAcordo()"], .theme-dark button[onclick="confirmarAprovarAcordo()"] { background-color: #16a34a !important; /* green-600 */ color: #ffffff !important; /* white */ } .theme-dark .bg-green-600:hover, .theme-dark .hover\:bg-green-700:hover, .theme-dark #btn-aprovar-acordo:hover, .theme-dark button[onclick="abrirModalAprovarAcordo()"]:hover, .theme-dark button[onclick="confirmarAprovarAcordo()"]:hover { background-color: #15803d !important; /* green-700 */ } /* Hovers dos botões de ação no tema escuro */ .theme-dark .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.1) !important; } .theme-dark .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.1) !important; } .theme-dark .hover\:bg-orange-50:hover { background-color: rgba(249, 115, 22, 0.1) !important; } .theme-dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.1) !important; } /* Boxes informativos no tema escuro */ .theme-dark .bg-blue-50 { background-color: #1e3a5f !important; /* azul escuro */ color: #e0f2fe !important; /* azul claro para texto */ border-color: #3b82f6 !important; /* azul médio para borda */ } .theme-dark .bg-yellow-50 { background-color: #5c4a1f !important; /* amarelo escuro */ color: #fef3c7 !important; /* amarelo claro para texto */ border-color: #fbbf24 !important; /* amarelo médio para borda */ } .theme-dark .bg-green-50 { background-color: #1a4d2e !important; /* verde escuro */ color: #d1fae5 !important; /* verde claro para texto */ border-color: #10b981 !important; /* verde médio para borda */ } .theme-dark .bg-purple-50 { background-color: #4c1d4f !important; /* roxo escuro */ color: #e9d5ff !important; /* roxo claro para texto */ border-color: #a855f7 !important; /* roxo médio para borda */ } /* Texto dentro das boxes informativas no tema escuro */ .theme-dark .bg-blue-50 .text-gray-600, .theme-dark .bg-blue-50 .text-blue-600 { color: #e0f2fe !important; } .theme-dark .bg-yellow-50 .text-gray-600, .theme-dark .bg-yellow-50 .text-yellow-600 { color: #fef3c7 !important; } .theme-dark .bg-green-50 .text-gray-600, .theme-dark .bg-green-50 .text-green-600 { color: #d1fae5 !important; } .theme-dark .bg-purple-50 .text-gray-600, .theme-dark .bg-purple-50 .text-purple-600, .theme-dark .bg-purple-50 .text-purple-700 { color: #e9d5ff !important; } /* Links e texto strong dentro das boxes no tema escuro */ .theme-dark .bg-blue-50 strong { color: #93c5fd !important; /* azul mais claro para destaque */ } .theme-dark .bg-yellow-50 strong { color: #fde047 !important; /* amarelo mais claro para destaque */ } .theme-dark .bg-green-50 strong { color: #6ee7b7 !important; /* verde mais claro para destaque */ } .theme-dark .bg-purple-50 strong { color: #c084fc !important; /* roxo mais claro para destaque */ } /* ============================================ OTIMIZAÇÕES DE PERFORMANCE E RESPONSIVIDADE ============================================ */ /* Tabelas Responsivas - Melhorias para Mobile */ .table-responsive-wrapper { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Smooth scrolling no iOS */ scrollbar-width: thin; /* Firefox */ scrollbar-color: #cbd5e1 #f1f5f9; /* Firefox */ } .table-responsive-wrapper::-webkit-scrollbar { height: 8px; } .table-responsive-wrapper::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } .table-responsive-wrapper::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .table-responsive-wrapper::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Dark mode para scrollbar */ .theme-dark .table-responsive-wrapper { scrollbar-color: #475569 #1e293b; /* Firefox */ } .theme-dark .table-responsive-wrapper::-webkit-scrollbar-track { background: #1e293b; } .theme-dark .table-responsive-wrapper::-webkit-scrollbar-thumb { background: #475569; } .theme-dark .table-responsive-wrapper::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Melhorias para tabelas em mobile */ @media (max-width: 768px) { /* Reduzir padding em mobile */ .table-responsive-wrapper table th, .table-responsive-wrapper table td { padding: 0.75rem 0.5rem !important; font-size: 0.875rem; } /* Ocultar colunas menos importantes em mobile */ .table-responsive-wrapper table th.hide-mobile, .table-responsive-wrapper table td.hide-mobile { display: none; } /* Ajustar largura mínima das tabelas */ .table-responsive-wrapper table { min-width: 600px; /* Garante scroll horizontal quando necessário */ } } /* Modais Responsivos */ @media (max-width: 640px) { /* Modais em mobile ocupam quase toda a tela */ .modal-content { width: 95% !important; max-width: 95% !important; margin: 1rem auto !important; padding: 1rem !important; } /* Reduzir padding em modais mobile */ .modal-content .p-6 { padding: 1rem !important; } } /* Sidebar Mobile - Transições Otimizadas */ @media (max-width: 1024px) { /* Sidebar com transform otimizado */ .sidebar-mobile { transform: translate3d(-100%, 0, 0); transition: transform 0.3s ease-out; will-change: transform; } .sidebar-mobile.open { transform: translate3d(0, 0, 0); } } /* Otimizações de Hover - Apenas em dispositivos que suportam */ @media (hover: hover) { /* Hover effects apenas em dispositivos com mouse */ .hover-lift:hover { transform: translate3d(0, -2px, 0); transition: transform 0.2s ease-out; } } /* Reduzir animações para usuários que preferem menos movimento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Melhorias de Performance - Containment */ .table-container { contain: layout style paint; } .card-container { contain: layout style; } /* Otimização de Renderização */ .gpu-accelerated { transform: translateZ(0); will-change: transform; } /* Evitar repaint em elementos estáticos */ .static-element { will-change: auto; } /* Ícones dentro das boxes informativas no tema escuro */ .theme-dark .bg-blue-50 .fa-exclamation-circle, .theme-dark .bg-blue-50 i.text-blue-600 { color: #60a5fa !important; /* azul claro para ícones */ } .theme-dark .bg-yellow-50 .fa-exclamation-circle, .theme-dark .bg-yellow-50 i.text-yellow-600 { color: #fbbf24 !important; /* amarelo claro para ícones */ } .theme-dark .bg-green-50 .fa-exclamation-circle, .theme-dark .bg-green-50 i.text-green-600 { color: #34d399 !important; /* verde claro para ícones */ } .theme-dark .bg-purple-50 .fa-exclamation-circle, .theme-dark .bg-purple-50 i.text-purple-600 { color: #a855f7 !important; /* roxo claro para ícones */ } /* Textos específicos dentro das boxes azuis no tema escuro (Mercado Pago tutorial) */ .theme-dark .bg-blue-50 .text-blue-900, .theme-dark .bg-blue-50 h3.text-blue-900 { color: #e0f2fe !important; /* azul claro para títulos */ } .theme-dark .bg-blue-50 .text-blue-800 { color: #bfdbfe !important; /* azul mais claro para textos */ } .theme-dark .bg-blue-50 .text-blue-600, .theme-dark .bg-blue-50 span.text-blue-600, .theme-dark .bg-blue-50 a.text-blue-600 { color: #93c5fd !important; /* azul claro para links e números */ } .theme-dark .bg-blue-50 a.text-blue-600:hover { color: #60a5fa !important; /* azul mais claro no hover */ } .theme-dark .bg-blue-50 .text-green-700 { color: #6ee7b7 !important; /* verde claro para destaque */ } /* Textos específicos dentro das boxes amarelas no tema escuro (Webhook) */ .theme-dark .bg-yellow-50 .text-yellow-900, .theme-dark .bg-yellow-50 h4.text-yellow-900 { color: #fef3c7 !important; /* amarelo claro para títulos */ } .theme-dark .bg-yellow-50 .text-yellow-800 { color: #fde68a !important; /* amarelo claro para textos */ } .theme-dark .bg-yellow-50 code { background-color: #78350f !important; /* amarelo escuro para fundo do código */ color: #fef3c7 !important; /* amarelo claro para texto do código */ border: 1px solid #fbbf24 !important; } .theme-dark .bg-yellow-50 .bg-yellow-100 { background-color: #78350f !important; /* amarelo escuro para código */ color: #fef3c7 !important; } /* Badges de status na tabela de cobranças - tema escuro */ .theme-dark .bg-green-100 { background-color: #1a4d2e !important; /* verde escuro */ color: #6ee7b7 !important; /* verde claro */ } .theme-dark .bg-yellow-100 { background-color: #5c4a1f !important; /* amarelo escuro */ color: #fde047 !important; /* amarelo claro */ } .theme-dark .bg-blue-100 { background-color: #1e3a5f !important; /* azul escuro */ color: #93c5fd !important; /* azul claro */ } .theme-dark .bg-gray-100 { background-color: #374151 !important; /* cinza escuro */ color: #d1d5db !important; /* cinza claro */ } .theme-dark .bg-red-100 { background-color: #7f1d1d !important; /* vermelho escuro */ color: #fca5a5 !important; /* vermelho claro */ } .theme-dark .text-green-800 { color: #6ee7b7 !important; /* verde claro */ } .theme-dark .text-yellow-800 { color: #fde047 !important; /* amarelo claro */ } .theme-dark .text-blue-800 { color: #93c5fd !important; /* azul claro */ } .theme-dark .text-gray-800 { color: #d1d5db !important; /* cinza claro */ } .theme-dark .text-red-800 { color: #fca5a5 !important; /* vermelho claro */ }