/* =========================================================== SISTEMA POS - ESTILOS GLOBALES + DARK MODE =========================================================== */ body { font-family: 'Inter', sans-serif; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .dark ::-webkit-scrollbar-thumb { background: #334155; } .dark ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ---- Animations ---- */ .fade-in { animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---- Toast ---- */ .toast { transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .toast.hide { opacity: 0; transform: translateX(100%); } /* ---- Dark mode toggle animation ---- */ #dark-toggle svg { transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.2s; } /* =========================================================== DARK MODE — Variables y overrides globales Se aplican cuando tiene la clase "dark" =========================================================== */ /* Fondo principal de la app */ .dark body { background-color: #0F172A; color: #E2E8F0; } /* ---- Sidebar ---- */ .dark #sidebar { background-color: #1E293B; border-color: #334155; } .dark #sidebar .text-gray-900, .dark #sidebar .text-gray-700 { color: #E2E8F0; } .dark #sidebar .text-gray-500 { color: #94A3B8; } .dark #sidebar .text-gray-400 { color: #64748B; } .dark #sidebar .hover\:bg-gray-100:hover { background-color: #334155; } .dark #sidebar .hover\:bg-gray-50:hover { background-color: #1E293B; } .dark #sidebar .bg-blue-50 { background-color: rgba(59,130,246,0.15); } .dark #sidebar .text-blue-700 { color: #60A5FA; } .dark #sidebar .border-gray-200 { border-color: #334155; } .dark #sidebar .border-b { border-color: #334155; } .dark #sidebar .bg-blue-100 { background-color: rgba(59,130,246,0.2); } .dark #sidebar .text-blue-600 { color: #60A5FA; } .dark #sidebar .text-gray-900 { color: #F1F5F9; } /* Sidebar group button */ .dark button.group { color: #94A3B8; } .dark button.group:hover { background-color: #334155; } /* ---- Top Header ---- */ .dark header.bg-white { background-color: #1E293B; box-shadow: 0 1px 0 #334155; } .dark header .text-gray-800 { color: #E2E8F0; } .dark header .text-gray-700 { color: #CBD5E1; } .dark header .text-gray-500 { color: #94A3B8; } .dark header .hover\:bg-red-50:hover { background-color: rgba(239,68,68,0.1); } .dark header .border-gray-200 { border-color: #334155; } .dark header .bg-gray-50 { background-color: #334155; } .dark header select { background-color: #334155; border-color: #475569; color: #E2E8F0; } /* ---- Main content area ---- */ .dark main { background-color: #0F172A; } /* ---- Cards / Panels genéricos ---- */ .dark .bg-white { background-color: #1E293B !important; } .dark .bg-gray-50 { background-color: #0F172A !important; } .dark .bg-gray-100 { background-color: #1E293B !important; } .dark .bg-gray-200 { background-color: #334155 !important; } .dark .border-gray-100 { border-color: #334155 !important; } .dark .border-gray-200 { border-color: #334155 !important; } .dark .border-gray-300 { border-color: #475569 !important; } .dark .divide-gray-100 > * + * { border-color: #334155 !important; } .dark .divide-y > * + * { border-color: #334155 !important; } /* ---- Typography ---- */ .dark .text-gray-900 { color: #F1F5F9 !important; } .dark .text-gray-800 { color: #E2E8F0 !important; } .dark .text-gray-700 { color: #CBD5E1 !important; } .dark .text-gray-600 { color: #94A3B8 !important; } .dark .text-gray-500 { color: #64748B !important; } .dark .text-gray-400 { color: #475569 !important; } /* ---- Inputs, Select, Textarea ---- */ .dark input, .dark select, .dark textarea { background-color: #0F172A !important; border-color: #334155 !important; color: #E2E8F0 !important; } .dark input:focus, .dark select:focus, .dark textarea:focus { background-color: #1E293B !important; border-color: #3B82F6 !important; } .dark input::placeholder { color: #475569; } .dark label { color: #CBD5E1; } /* ---- Tables ---- */ .dark table { color: #CBD5E1; } .dark thead tr { background-color: #1E293B !important; } .dark tbody tr:hover { background-color: rgba(51,65,85,0.4) !important; } .dark th { color: #94A3B8 !important; background-color: #1E293B !important; } .dark td { color: #CBD5E1 !important; border-color: #334155 !important; } .dark .bg-gray-50\/50 { background-color: #1E293B !important; } /* ---- Buttons — keep colors vibrant in dark mode ---- */ .dark .bg-blue-600 { background-color: #2563EB !important; } .dark .hover\:bg-blue-700:hover { background-color: #1D4ED8 !important; } .dark .bg-green-600 { background-color: #16A34A !important; } .dark .hover\:bg-green-700:hover { background-color: #15803D !important; } .dark .bg-red-600 { background-color: #DC2626 !important; } .dark .hover\:bg-red-700:hover { background-color: #B91C1C !important; } .dark .bg-purple-600 { background-color: #9333EA !important; } .dark .hover\:bg-gray-100:hover { background-color: #334155 !important; } .dark .hover\:bg-gray-50:hover { background-color: #1E293B !important; } /* Outline buttons */ .dark .border-blue-500 { border-color: #3B82F6 !important; } .dark .text-blue-700 { color: #60A5FA !important; } .dark .text-blue-600 { color: #60A5FA !important; } .dark .text-green-600 { color: #4ADE80 !important; } .dark .text-green-700 { color: #4ADE80 !important; } .dark .text-red-600 { color: #F87171 !important; } .dark .text-purple-600 { color: #C084FC !important; } .dark .text-yellow-600 { color: #FCD34D !important; } .dark .text-orange-600 { color: #FB923C !important; } /* ---- Badges / Pills ---- */ .dark .bg-blue-100 { background-color: rgba(59,130,246,0.15) !important; } .dark .bg-green-100 { background-color: rgba(34,197,94,0.15) !important; } .dark .bg-red-100 { background-color: rgba(239,68,68,0.15) !important; } .dark .bg-yellow-100 { background-color: rgba(234,179,8,0.15) !important; } .dark .bg-purple-100 { background-color: rgba(168,85,247,0.15) !important; } .dark .bg-orange-100 { background-color: rgba(249,115,22,0.15) !important; } .dark .bg-indigo-100 { background-color: rgba(99,102,241,0.15) !important; } .dark .bg-teal-100 { background-color: rgba(20,184,166,0.15) !important; } .dark .bg-pink-100 { background-color: rgba(236,72,153,0.15) !important; } .dark .bg-blue-50 { background-color: rgba(59,130,246,0.1) !important; } .dark .bg-green-50 { background-color: rgba(34,197,94,0.1) !important; } .dark .bg-red-50 { background-color: rgba(239,68,68,0.1) !important; } .dark .bg-purple-50 { background-color: rgba(168,85,247,0.1) !important; } .dark .bg-indigo-50 { background-color: rgba(99,102,241,0.1) !important; } /* ---- Modals ---- */ .dark .bg-black\/50 { background-color: rgba(0,0,0,0.7) !important; } .dark .rounded-2xl.shadow-2xl { background-color: #1E293B; } /* ---- Stat/KPI cards ---- */ .dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .dark .shadow { box-shadow: 0 2px 6px rgba(0,0,0,0.5); } .dark .shadow-lg { box-shadow: 0 4px 15px rgba(0,0,0,0.5); } /* ---- Gradient text — keep visible in dark ---- */ .dark .bg-gradient-to-r.bg-clip-text { -webkit-text-fill-color: transparent; } /* ---- SweetAlert2 dark override ---- */ .dark .swal2-popup { background: #1E293B !important; color: #E2E8F0 !important; } .dark .swal2-title { color: #F1F5F9 !important; } .dark .swal2-content { color: #CBD5E1 !important; } .dark .swal2-html-container { color: #CBD5E1 !important; } /* ---- Pagination ---- */ .dark .border.border-gray-200.text-gray-600 { border-color: #334155 !important; color: #CBD5E1 !important; } /* ---- Dashboard index widgets ---- */ .dark .from-blue-600 { --tw-gradient-from: #1D4ED8; } .dark .to-purple-600 { --tw-gradient-to: #7C3AED; } /* ---- Sidebar scroll custom ---- */ .sidebar-scroll::-webkit-scrollbar { width: 4px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; } .dark .sidebar-scroll::-webkit-scrollbar-thumb { background: #334155; } /* ---- Dark mode toggle button ---- */ #dark-toggle { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; transition: background 0.2s; } #dark-toggle:hover { background-color: rgba(148,163,184,0.15); } .dark #dark-toggle:hover { background-color: rgba(255,255,255,0.08); }