/* * Tokens de tema de Precix (claro/oscuro). * * Las vistas custom (kioskos, dashboards, modales) usan estos var(--px-*) en * sus estilos —incluso dentro de style="" inline, donde las clases dark: de * Tailwind no llegan— y el cambio de tema se reduce a la clase .dark que * Filament pone/quita en . El chrome de Filament trae su propio dark en * el CSS del vendor; este archivo cubre únicamente lo nuestro. * * Oscuro sobre paleta zinc (no negro puro), alineado con el gray Zinc que usa * Filament: superficies #18181b/#27272a, texto #fafafa→#71717a. Los fondos de * estado (success/danger/info/warning) en oscuro son translúcidos sobre zinc * con texto tono 300: se ven integrados, no "pastel invertido". */ :root { --px-surface: #ffffff; --px-surface-2: #f8fafc; --px-surface-3: #f1f5f9; --px-border: #e2e8f0; --px-border-strong: #cbd5e1; --px-text: #0f172a; --px-text-2: #334155; --px-text-muted: #64748b; --px-text-faint: #94a3b8; --px-primary: #2563eb; --px-primary-hover: #1d4ed8; --px-primary-soft: #eff6ff; --px-primary-text: #1e40af; /* Texto sobre botones/superficies azules: blanco en ambos modos. */ --px-on-primary: #ffffff; --px-success-bg: #dcfce7; --px-success-text: #166534; --px-success-border: #86efac; --px-danger-bg: #fee2e2; --px-danger-text: #991b1b; --px-danger-border: #fca5a5; --px-info-bg: #dbeafe; --px-info-text: #1e40af; --px-info-border: #93c5fd; --px-warning-bg: #fffbeb; --px-warning-text: #92400e; --px-warning-border: #fcd34d; --px-orange-bg: #fff7ed; --px-orange-text: #9a3412; --px-orange-border: #fed7aa; --px-purple-bg: #f5f3ff; --px-purple-text: #5b21b6; --px-purple-border: #c4b5fd; /* Botones sólidos de estado (texto blanco encima): mismo color en ambos modos — un verde/rojo/ámbar 600 se lee bien sobre claro y oscuro. */ --px-success-solid: #16a34a; --px-danger-solid: #dc2626; --px-warning-solid: #d97706; --px-overlay: rgba(15, 23, 42, 0.5); /* Velo translúcido sobre la página (overlay de carga): escarcha clara u oscura según el modo, siempre del color del fondo. */ --px-veil: rgba(255, 255, 255, 0.65); --px-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); /* Fondo de los códigos QR/barras: SIEMPRE blanco (escaneable e imprimible); no se redefine en oscuro. */ --px-qr-bg: #ffffff; } .dark { /* Widgets nativos (scrollbars, date pickers, selects) en oscuro. */ color-scheme: dark; --px-surface: #18181b; --px-surface-2: #27272a; --px-surface-3: #3f3f46; --px-border: #3f3f46; --px-border-strong: #52525b; --px-text: #fafafa; --px-text-2: #d4d4d8; --px-text-muted: #a1a1aa; --px-text-faint: #71717a; /* Azul un tono más claro para contraste sobre zinc. */ --px-primary: #3b82f6; --px-primary-hover: #60a5fa; --px-primary-soft: rgba(37, 99, 235, 0.16); --px-primary-text: #93c5fd; --px-success-bg: rgba(34, 197, 94, 0.14); --px-success-text: #86efac; --px-success-border: rgba(34, 197, 94, 0.4); --px-danger-bg: rgba(239, 68, 68, 0.14); --px-danger-text: #fca5a5; --px-danger-border: rgba(239, 68, 68, 0.4); --px-info-bg: rgba(59, 130, 246, 0.15); --px-info-text: #93c5fd; --px-info-border: rgba(59, 130, 246, 0.4); --px-warning-bg: rgba(245, 158, 11, 0.14); --px-warning-text: #fcd34d; --px-warning-border: rgba(245, 158, 11, 0.4); --px-orange-bg: rgba(234, 88, 12, 0.14); --px-orange-text: #fdba74; --px-orange-border: rgba(234, 88, 12, 0.4); --px-purple-bg: rgba(139, 92, 246, 0.15); --px-purple-text: #c4b5fd; --px-purple-border: rgba(139, 92, 246, 0.4); --px-overlay: rgba(0, 0, 0, 0.65); --px-veil: rgba(24, 24, 27, 0.7); --px-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* Scrollbars webkit acordes al modo (Chrome/Edge; Firefox ya obedece a color-scheme). Solo se estilizan en oscuro: en claro quedan nativos. */ .dark ::-webkit-scrollbar { width: 10px; height: 10px; } .dark ::-webkit-scrollbar-track { background: transparent; } .dark ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 6px; } .dark ::-webkit-scrollbar-thumb:hover { background: #52525b; }