/* Mesa RF — Estilos complementares ao TailwindCSS */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Skeleton loader */ @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .skeleton { animation: skeleton-pulse 1.5s ease-in-out infinite; background-color: #e5e7eb; border-radius: 4px; } /* Modal overlay fade */ #modal-exclusao { transition: opacity 0.2s ease; } #modal-exclusao.hidden { display: none; } /* Spinner CEP */ .cep-spinner { display: none; width: 18px; height: 18px; border: 2px solid var(--brand-500); border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .cep-loading .cep-spinner { display: block; } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } /* Feedback de validação inline */ .field-valid .field-feedback-icon::after { content: '✓'; color: #16a34a; font-weight: bold; } .field-invalid .field-feedback-icon::after { content: '✗'; color: #dc2626; font-weight: bold; } /* Transição suave para campos que aparecem/somem (PF/PJ toggle) */ .campo-pj, .campo-pf { transition: opacity 0.15s ease; } /* Banner de sucesso fade-in */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .banner-sucesso { animation: fadeInDown 0.3s ease; } /* Scroll horizontal para tabela em mobile */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ═══════════════════════════════════════════════ */ /* DARK MODE — overrides globais */ /* Ativado pela classe "dark" no */ /* Usa !important para vencer o Tailwind Play CDN */ /* ═══════════════════════════════════════════════ */ html.dark { color-scheme: dark; } /* Transicao suave ao trocar de tema */ html.dark *, html * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease; } /* ── Fundos (cinza neutro, sem subtom azul) ── */ html.dark body { background-color: #0a0a0a !important; color: #f5f5f5 !important; } html.dark .bg-white { background-color: #171717 !important; } html.dark .bg-gray-50 { background-color: #0a0a0a !important; } html.dark .bg-gray-100 { background-color: #262626 !important; } html.dark .bg-gray-200 { background-color: #404040 !important; } /* Gradients (login panel, etc.) */ html.dark .from-white { --tw-gradient-from: #171717 !important; } html.dark .to-gray-50 { --tw-gradient-to: #0a0a0a !important; } html.dark .lg\:bg-white { background-color: #171717 !important; } /* ── Textos ── */ html.dark .text-gray-900 { color: #fafafa !important; } html.dark .text-gray-800 { color: #f5f5f5 !important; } html.dark .text-gray-700 { color: #e5e5e5 !important; } html.dark .text-gray-600 { color: #d4d4d4 !important; } html.dark .text-gray-500 { color: #a3a3a3 !important; } /* ── Bordas ── */ html.dark .border-gray-100 { border-color: #262626 !important; } html.dark .border-gray-200 { border-color: #262626 !important; } html.dark .border-gray-300 { border-color: #404040 !important; } /* ── Dividir ── */ html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #262626 !important; } /* ── Hovers ── */ html.dark .hover\:bg-gray-50:hover { background-color: #262626 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #262626 !important; } html.dark .hover\:bg-gray-200:hover { background-color: #404040 !important; } /* ── Inputs, selects, textareas ── */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.dark select, html.dark textarea { background-color: #171717 !important; border-color: #404040 !important; color: #f5f5f5 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #737373 !important; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { background-color: #171717 !important; } /* ── Navbar — escurecer usando variáveis do tema ── */ html.dark .bg-brand-600 { background-color: var(--brand-700) !important; } html.dark .bg-brand-800 { background-color: var(--brand-800) !important; } html.dark .hover\:bg-brand-700:hover { background-color: var(--brand-600) !important; } html.dark .hover\:bg-brand-800:hover { background-color: var(--brand-700) !important; } html.dark .border-brand-500 { border-color: var(--brand-600) !important; } /* ── Footer ── */ html.dark footer { background-color: #171717 !important; border-color: #262626 !important; } /* ── Badges coloridos ── */ html.dark .bg-green-50 { background-color: rgba(5, 46, 22, 0.4) !important; } html.dark .bg-green-100 { background-color: rgba(5, 46, 22, 0.4) !important; } html.dark .text-green-800 { color: #4ade80 !important; } html.dark .text-green-700 { color: #4ade80 !important; } html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; } html.dark .bg-yellow-50 { background-color: rgba(69, 26, 3, 0.4) !important; } html.dark .bg-yellow-100 { background-color: rgba(69, 26, 3, 0.4) !important; } html.dark .text-yellow-800 { color: #facc15 !important; } html.dark .text-yellow-700 { color: #facc15 !important; } html.dark .bg-red-50 { background-color: rgba(69, 10, 10, 0.4) !important; } html.dark .bg-red-100 { background-color: rgba(69, 10, 10, 0.4) !important; } html.dark .text-red-800 { color: #f87171 !important; } html.dark .text-red-700 { color: #f87171 !important; } html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; } html.dark .bg-blue-50 { background-color: rgba(7, 29, 61, 0.4) !important; } html.dark .bg-blue-100 { background-color: rgba(7, 29, 61, 0.4) !important; } html.dark .text-blue-800 { color: #60a5fa !important; } html.dark .text-blue-700 { color: #60a5fa !important; } html.dark .bg-brand-50 { background-color: color-mix(in srgb, var(--brand-500) 15%, transparent) !important; } html.dark .bg-brand-100 { background-color: color-mix(in srgb, var(--brand-500) 20%, transparent) !important; } html.dark .text-brand-700 { color: var(--brand-300) !important; } /* ── Shadows mais suaves ── */ html.dark .shadow-sm { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3) !important; } html.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3) !important; } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4) !important; } html.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important; } /* ── Skeleton loader ── */ html.dark .skeleton { background-color: #262626 !important; } /* ── Pill/tab backgrounds ── */ html.dark .bg-brand-500 { background-color: var(--brand-500) !important; }