/* ════════════════════════════════════════════════════════════════════════ MATRIX V84 — Theme Engine (light / dark) • Token-based: every theme-aware surface reads CSS variables. • [data-theme="dark"] on → flips entire palette. • System preference honored when [data-theme="auto"] (default). • Smooth 350ms transition on bg/color/border to avoid jarring flash. • Late-load — wins specificity over UPOS chrome via narrow selectors. ═════════════════════════════════════════════════════════════════════════ */ /* ── Light tokens (default + explicit) ──────────────────────────────────── */ :root, :root[data-theme="light"], :root[data-theme="auto"] { --fxl-bg-app: #f5f5f5; --fxl-bg-content: #ecf0f5; --fxl-bg-card: #ffffff; --fxl-bg-card-2: #f8fafc; --fxl-bg-sidebar: #ffffff; --fxl-bg-header: #ffffff; --fxl-bg-input: #ffffff; --fxl-bg-table: #ffffff; --fxl-bg-table-alt: #f8fafc; --fxl-bg-modal: #ffffff; --fxl-bg-tooltip: rgba(15,23,42,.96); --fxl-fg-1: #0f172a; --fxl-fg-2: #475569; --fxl-fg-3: #94a3b8; --fxl-fg-tooltip: #f1f5f9; --fxl-fg-link: #2563eb; --fxl-fg-on-card: #0f172a; --fxl-border: #e5e7eb; --fxl-border-strong: #cbd5e1; --fxl-border-soft: rgba(15,23,42,.06); --fxl-shadow-1: 0 1px 2px rgba(0,0,0,.04); --fxl-shadow-2: 0 6px 18px -6px rgba(15,23,42,.18); --fxl-shadow-pop: 0 14px 36px -10px rgba(15,23,42,.25); --fxl-accent: #6366f1; --fxl-accent-2: #ec4899; --fxl-success: #16a34a; --fxl-danger: #dc2626; --fxl-warning: #f59e0b; --fxl-fx-mesh-1: #6366f1; --fxl-fx-mesh-2: #ec4899; --fxl-fx-mesh-3: #10b981; --fxl-fx-mesh-opacity: 0.18; --fxl-fx-particle-light: 70%; color-scheme: light; } /* ── Dark tokens ────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --fxl-bg-app: #0b1221; --fxl-bg-content: #0e1626; --fxl-bg-card: #131a2b; --fxl-bg-card-2: #1a2238; --fxl-bg-sidebar: #0c1424; --fxl-bg-header: #0c1424; --fxl-bg-input: #1a2238; --fxl-bg-table: #131a2b; --fxl-bg-table-alt: #182040; --fxl-bg-modal: #131a2b; --fxl-bg-tooltip: rgba(248,250,252,.96); --fxl-fg-1: #e5edf7; --fxl-fg-2: #b1bccf; --fxl-fg-3: #6b7c98; --fxl-fg-tooltip: #0f172a; --fxl-fg-link: #93c5fd; --fxl-fg-on-card: #e5edf7; --fxl-border: rgba(255,255,255,.08); --fxl-border-strong: rgba(255,255,255,.18); --fxl-border-soft: rgba(255,255,255,.04); --fxl-shadow-1: 0 1px 2px rgba(0,0,0,.45); --fxl-shadow-2: 0 8px 20px -6px rgba(0,0,0,.5); --fxl-shadow-pop: 0 18px 40px -10px rgba(0,0,0,.6); --fxl-fx-mesh-opacity: 0.32; --fxl-fx-particle-light: 80%; color-scheme: dark; } /* ── System preference fallback when theme=auto ─────────────────────────── */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --fxl-bg-app: #0b1221; --fxl-bg-content: #0e1626; --fxl-bg-card: #131a2b; --fxl-bg-card-2: #1a2238; --fxl-bg-sidebar: #0c1424; --fxl-bg-header: #0c1424; --fxl-bg-input: #1a2238; --fxl-bg-table: #131a2b; --fxl-bg-table-alt: #182040; --fxl-bg-modal: #131a2b; --fxl-bg-tooltip: rgba(248,250,252,.96); --fxl-fg-1: #e5edf7; --fxl-fg-2: #b1bccf; --fxl-fg-3: #6b7c98; --fxl-fg-tooltip: #0f172a; --fxl-fg-link: #93c5fd; --fxl-fg-on-card: #e5edf7; --fxl-border: rgba(255,255,255,.08); --fxl-border-strong: rgba(255,255,255,.18); --fxl-border-soft: rgba(255,255,255,.04); --fxl-shadow-1: 0 1px 2px rgba(0,0,0,.45); --fxl-shadow-2: 0 8px 20px -6px rgba(0,0,0,.5); --fxl-shadow-pop: 0 18px 40px -10px rgba(0,0,0,.6); --fxl-fx-mesh-opacity: 0.32; --fxl-fx-particle-light: 80%; color-scheme: dark; } } /* ── Smooth global transition (limited to colors/borders) ───────────────── */ html, body, .box, .modal-content, .main-header, .main-sidebar, .content-wrapper, .info-box, .small-box, .nav-tabs > li > a, .panel, .table { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* ── Apply dark mode to UPOS legacy chrome ──────────────────────────────── */ :root[data-theme="dark"] body, :root[data-theme="auto"] body { /* paired with @media prefers-dark above */ /* falls back to light if user agent has no preference */ } :root[data-theme="dark"] body { background-color: var(--fxl-bg-app) !important; color: var(--fxl-fg-1); } :root[data-theme="dark"] .content-wrapper, :root[data-theme="dark"] .right-side { background-color: var(--fxl-bg-content) !important; } :root[data-theme="dark"] .main-header > .navbar, :root[data-theme="dark"] .main-header .logo { background-color: var(--fxl-bg-header) !important; color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .main-sidebar, :root[data-theme="dark"] .left-side { background-color: var(--fxl-bg-sidebar) !important; } :root[data-theme="dark"] .sidebar-menu > li > a, :root[data-theme="dark"] .sidebar a { color: var(--fxl-fg-2) !important; } :root[data-theme="dark"] .sidebar-menu > li:hover > a, :root[data-theme="dark"] .sidebar-menu > li.active > a { background-color: var(--fxl-bg-card-2) !important; color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .box, :root[data-theme="dark"] .info-box, :root[data-theme="dark"] .small-box, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .modal-content { background-color: var(--fxl-bg-card) !important; color: var(--fxl-fg-on-card) !important; border-color: var(--fxl-border) !important; box-shadow: var(--fxl-shadow-2) !important; } :root[data-theme="dark"] .box-header, :root[data-theme="dark"] .modal-header { background-color: var(--fxl-bg-card-2) !important; border-bottom-color: var(--fxl-border) !important; color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .box-header > .box-title { color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="tel"], :root[data-theme="dark"] input[type="url"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: var(--fxl-bg-input) !important; border-color: var(--fxl-border) !important; color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .form-control::placeholder { color: var(--fxl-fg-3) !important; } :root[data-theme="dark"] .form-control:focus { border-color: var(--fxl-accent) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important; } :root[data-theme="dark"] .table { background-color: var(--fxl-bg-table) !important; color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .table > thead > tr > th { background-color: var(--fxl-bg-card-2) !important; color: var(--fxl-fg-1) !important; border-bottom-color: var(--fxl-border) !important; } :root[data-theme="dark"] .table > tbody > tr > td, :root[data-theme="dark"] .table > tbody > tr > th { border-top-color: var(--fxl-border-soft) !important; color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--fxl-bg-table-alt) !important; } :root[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: rgba(99,102,241,.08) !important; } :root[data-theme="dark"] hr { border-top-color: var(--fxl-border-soft) !important; } :root[data-theme="dark"] a { color: var(--fxl-fg-link); } :root[data-theme="dark"] .nav-tabs > li > a { color: var(--fxl-fg-2) !important; background-color: transparent !important; } :root[data-theme="dark"] .nav-tabs > li.active > a { background-color: var(--fxl-bg-card) !important; color: var(--fxl-fg-1) !important; border-color: var(--fxl-border) var(--fxl-border) transparent !important; } :root[data-theme="dark"] .label-default, :root[data-theme="dark"] .badge { background-color: var(--fxl-bg-card-2) !important; color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .alert { border-color: var(--fxl-border) !important; background-color: var(--fxl-bg-card-2) !important; color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .pagination > li > a, :root[data-theme="dark"] .pagination > li > span { background-color: var(--fxl-bg-card) !important; border-color: var(--fxl-border) !important; color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .pagination > .active > a, :root[data-theme="dark"] .pagination > .active > span { background-color: var(--fxl-accent) !important; border-color: var(--fxl-accent) !important; color: #fff !important; } /* DataTables wrappers */ :root[data-theme="dark"] .dataTables_wrapper, :root[data-theme="dark"] .dataTables_info, :root[data-theme="dark"] .dataTables_paginate, :root[data-theme="dark"] .dataTables_length, :root[data-theme="dark"] .dataTables_filter { color: var(--fxl-fg-2) !important; } /* Tailwind-like surfaces */ :root[data-theme="dark"] .tw-bg-white { background-color: var(--fxl-bg-card) !important; } :root[data-theme="dark"] .tw-text-black { color: var(--fxl-fg-1) !important; } :root[data-theme="dark"] .tw-text-gray-700, :root[data-theme="dark"] .tw-text-gray-600, :root[data-theme="dark"] .tw-text-gray-500 { color: var(--fxl-fg-2) !important; } :root[data-theme="dark"] .tw-border-gray-200, :root[data-theme="dark"] .tw-border-gray-300 { border-color: var(--fxl-border) !important; } /* ── Theme toggle button (lives inside or next to the NIVEL FAB) ────────── */ .fxl-fab-theme { position: fixed; right: 20px; bottom: 86px; z-index: 9999; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--fxl-border); background: var(--fxl-bg-card); color: var(--fxl-fg-1); cursor: pointer; font-size: 16px; box-shadow: var(--fxl-shadow-2); transition: transform .2s, box-shadow .25s; will-change: transform; } .fxl-fab-theme:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--fxl-shadow-pop); } .fxl-fab-theme:active { transform: scale(.95); } .fxl-fab-theme[data-theme-state="dark"] i { color: #fbbf24; } /* sun-when-dark */ .fxl-fab-theme[data-theme-state="light"] i { color: #4338ca; } /* moon-when-light */ body[data-fxl-no-nivel="1"] .fxl-fab-theme { display: none !important; } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html, body, .box, .modal-content { transition: none !important; } .fxl-fab-theme { transition: none !important; } }