/* ════════════════════════════════════════════════════════════════════════
   MATRIX V87.7 — UNIVERSAL CONTRAST + REAL THEME · CYBORG EDITION
   Loaded on EVERY admin page (after all other CSS — wins specificity).
   • Dark   → pure-black BG, pure-white text, cyan accent
   • Light  → pure-white BG, pure-black text, navy accent
   • Theme toggle ([data-theme-effective="dark"|"light"]) = real switch
   • Kills UltimatePOS blue (#3c8dbc / tw-primary) site-wide
   • Eliminates white scroll background
   • Icons keep their explicit colors (FA classes, inline style)
   • CSS-only · 0 perf cost · 0 JS additions
═════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   1. DARK TOKENS (CYBORG)
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"],
:root[data-theme-effective="dark"] {
  --fxl-bg-app:        #000000 !important;
  --fxl-bg-content:    #050a14 !important;
  --fxl-bg-card:       #0a1525 !important;
  --fxl-bg-card-2:     #101e3a !important;
  --fxl-bg-sidebar:    #000810 !important;
  --fxl-bg-header:     #000810 !important;
  --fxl-bg-input:      #0a1525 !important;
  --fxl-bg-table:      #0a1525 !important;
  --fxl-bg-table-alt:  #0f1c34 !important;
  --fxl-bg-modal:      #050a14 !important;
  --fxl-bg-tooltip:    rgba(0,0,0,0.96) !important;
  --fxl-fg-1:          #ffffff !important;
  --fxl-fg-2:          #ffffff !important;
  --fxl-fg-3:          #cbd5e1 !important;
  --fxl-fg-tooltip:    #ffffff !important;
  --fxl-fg-link:       #00e5ff !important;
  --fxl-fg-on-card:    #ffffff !important;
  --fxl-border:        rgba(0,229,255,0.18) !important;
  --fxl-border-strong: rgba(0,229,255,0.40) !important;
  --fxl-border-soft:   rgba(0,229,255,0.06) !important;
  --fxl-accent:        #00e5ff !important;
  --fxl-accent-2:      #00ff87 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   2. LIGHT TOKENS (Premium White)
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"],
:root[data-theme-effective="light"] {
  --fxl-bg-app:        #ffffff !important;
  --fxl-bg-content:    #fafbfc !important;
  --fxl-bg-card:       #ffffff !important;
  --fxl-bg-card-2:     #f4f6f9 !important;
  --fxl-bg-sidebar:    #ffffff !important;
  --fxl-bg-header:     #ffffff !important;
  --fxl-bg-input:      #ffffff !important;
  --fxl-bg-table:      #ffffff !important;
  --fxl-bg-table-alt:  #f4f6f9 !important;
  --fxl-bg-modal:      #ffffff !important;
  --fxl-bg-tooltip:    rgba(0,0,0,0.96) !important;
  --fxl-fg-1:          #000000 !important;
  --fxl-fg-2:          #000000 !important;
  --fxl-fg-3:          #4b5563 !important;
  --fxl-fg-tooltip:    #ffffff !important;
  --fxl-fg-link:       #0f172a !important;
  --fxl-fg-on-card:    #000000 !important;
  --fxl-border:        rgba(0,0,0,0.10) !important;
  --fxl-border-strong: rgba(0,0,0,0.25) !important;
  --fxl-border-soft:   rgba(0,0,0,0.05) !important;
  --fxl-accent:        #0f172a !important;
  --fxl-accent-2:      #ec4899 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   3. ROOT BACKGROUNDS — kill any white bleed on scroll
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"],
:root[data-theme-effective="dark"] html,
:root[data-theme-effective="dark"] body,
:root[data-theme-effective="dark"] .wrapper,
:root[data-theme-effective="dark"] .content-wrapper,
:root[data-theme-effective="dark"] .right-side,
:root[data-theme-effective="dark"] .main-footer {
  background-color: #000000 !important;
  background-image: none !important;
}
:root[data-theme-effective="light"],
:root[data-theme-effective="light"] html,
:root[data-theme-effective="light"] body,
:root[data-theme-effective="light"] .wrapper,
:root[data-theme-effective="light"] .content-wrapper,
:root[data-theme-effective="light"] .right-side,
:root[data-theme-effective="light"] .main-footer {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   4. UNIVERSAL TEXT CONTRAST — DARK MODE → WHITE
   Every text element gets pure white unless it has an explicit color class.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] body,
:root[data-theme-effective="dark"] p,
:root[data-theme-effective="dark"] span,
:root[data-theme-effective="dark"] li,
:root[data-theme-effective="dark"] td,
:root[data-theme-effective="dark"] th,
:root[data-theme-effective="dark"] label,
:root[data-theme-effective="dark"] div,
:root[data-theme-effective="dark"] dt,
:root[data-theme-effective="dark"] dd,
:root[data-theme-effective="dark"] small,
:root[data-theme-effective="dark"] strong,
:root[data-theme-effective="dark"] b,
:root[data-theme-effective="dark"] em,
:root[data-theme-effective="dark"] h1,
:root[data-theme-effective="dark"] h2,
:root[data-theme-effective="dark"] h3,
:root[data-theme-effective="dark"] h4,
:root[data-theme-effective="dark"] h5,
:root[data-theme-effective="dark"] h6,
:root[data-theme-effective="dark"] .form-control,
:root[data-theme-effective="dark"] .help-block,
:root[data-theme-effective="dark"] .control-label,
:root[data-theme-effective="dark"] .checkbox,
:root[data-theme-effective="dark"] .radio,
:root[data-theme-effective="dark"] caption,
:root[data-theme-effective="dark"] figcaption,
:root[data-theme-effective="dark"] blockquote {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── UNIVERSAL TEXT CONTRAST — LIGHT MODE → BLACK ───────────────────── */
:root[data-theme-effective="light"] body,
:root[data-theme-effective="light"] p,
:root[data-theme-effective="light"] span,
:root[data-theme-effective="light"] li,
:root[data-theme-effective="light"] td,
:root[data-theme-effective="light"] th,
:root[data-theme-effective="light"] label,
:root[data-theme-effective="light"] div,
:root[data-theme-effective="light"] dt,
:root[data-theme-effective="light"] dd,
:root[data-theme-effective="light"] small,
:root[data-theme-effective="light"] strong,
:root[data-theme-effective="light"] b,
:root[data-theme-effective="light"] em,
:root[data-theme-effective="light"] h1,
:root[data-theme-effective="light"] h2,
:root[data-theme-effective="light"] h3,
:root[data-theme-effective="light"] h4,
:root[data-theme-effective="light"] h5,
:root[data-theme-effective="light"] h6,
:root[data-theme-effective="light"] .form-control,
:root[data-theme-effective="light"] .help-block,
:root[data-theme-effective="light"] .control-label,
:root[data-theme-effective="light"] caption,
:root[data-theme-effective="light"] figcaption,
:root[data-theme-effective="light"] blockquote {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   5. ICONS — keep their explicit colors (FA + inline color stays)
   ══════════════════════════════════════════════════════════════════════ */
i[class*="fa-"],
[class*="fa-"]::before,
.fa, .fas, .far, .fab, .fal, .fad,
svg[class*="icon"],
svg[fill]:not([fill="none"]):not([fill="currentColor"]),
[style*="color:"] {
  /* They self-color — never override */
}

/* Status colors keep their semantic hue — DARK */
:root[data-theme-effective="dark"] .text-danger,
:root[data-theme-effective="dark"] .text-red,
:root[data-theme-effective="dark"] .text-error  { color: #ff5c5c !important; -webkit-text-fill-color: #ff5c5c !important; }
:root[data-theme-effective="dark"] .text-success,
:root[data-theme-effective="dark"] .text-green  { color: #00ff87 !important; -webkit-text-fill-color: #00ff87 !important; }
:root[data-theme-effective="dark"] .text-warning,
:root[data-theme-effective="dark"] .text-yellow { color: #ffe600 !important; -webkit-text-fill-color: #ffe600 !important; }
:root[data-theme-effective="dark"] .text-info,
:root[data-theme-effective="dark"] .text-aqua,
:root[data-theme-effective="dark"] .text-blue   { color: #00e5ff !important; -webkit-text-fill-color: #00e5ff !important; }
:root[data-theme-effective="dark"] .text-muted  { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; }

/* Status colors — LIGHT */
:root[data-theme-effective="light"] .text-danger  { color: #b91c1c !important; -webkit-text-fill-color: #b91c1c !important; }
:root[data-theme-effective="light"] .text-success { color: #15803d !important; -webkit-text-fill-color: #15803d !important; }
:root[data-theme-effective="light"] .text-warning { color: #b45309 !important; -webkit-text-fill-color: #b45309 !important; }
:root[data-theme-effective="light"] .text-info    { color: #0e7490 !important; -webkit-text-fill-color: #0e7490 !important; }
:root[data-theme-effective="light"] .text-muted   { color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important; }

/* ══════════════════════════════════════════════════════════════════════
   6. KILL THE BLUE — UPOS primary → cyborg accent
   USE [class~=...] (word match) to avoid catching hover/variant classes
   like `hover:tw-bg-primary-50` which are NOT meant to apply always.
   ══════════════════════════════════════════════════════════════════════ */
/* Tailwind primary — exact class only */
[class~="tw-bg-primary"],
[class~="tw-bg-info"] {
  background-color: var(--fxl-accent) !important;
}
[class~="tw-text-primary"],
[class~="tw-text-info"] {
  color: var(--fxl-accent) !important;
  -webkit-text-fill-color: var(--fxl-accent) !important;
}
[class~="tw-border-primary"] {
  border-color: var(--fxl-accent) !important;
}
/* Sky/blue UPOS heritage classes — EXCLUDES topbar (.no-print) so its
   icons stay readable on the dark themed background. */
:root[data-theme-effective="light"] [class*="tw-bg-sky"]:not(.no-print, .no-print *),
:root[data-theme-effective="light"] [class*="tw-bg-blue"]:not(.no-print, .no-print *),
:root[data-theme-effective="light"] [class*="tw-bg-info"]:not(.no-print, .no-print *) {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
}
:root[data-theme-effective="dark"] [class*="tw-bg-sky"]:not(.no-print, .no-print *),
:root[data-theme-effective="dark"] [class*="tw-bg-blue"]:not(.no-print, .no-print *) {
  background-color: #000810 !important;
  background-image: none !important;
}

/* AdminLTE skin-blue chrome */
.skin-blue .main-header > .navbar,
.skin-blue .main-header .logo {
  background-color: var(--fxl-bg-header) !important;
  border-color: transparent !important;
}
:root[data-theme-effective="light"] .skin-blue .main-header > .navbar,
:root[data-theme-effective="light"] .skin-blue .main-header .logo {
  border-bottom: 1px solid var(--fxl-border) !important;
}
.skin-blue .main-header .logo > b,
.skin-blue .main-header .navbar .nav > li > a {
  color: var(--fxl-fg-1) !important;
}

/* Bootstrap btn-primary, badge-primary, label-primary */
.btn-primary, .badge-primary, .label-primary {
  background-color: var(--fxl-accent) !important;
  border-color: var(--fxl-accent) !important;
  color: var(--fxl-bg-app) !important;
}
.bg-primary { background-color: var(--fxl-accent) !important; color: var(--fxl-bg-app) !important; }

/* ══════════════════════════════════════════════════════════════════════
   7. CARDS / BOXES — surface contrast
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] .box,
:root[data-theme-effective="dark"] .panel,
:root[data-theme-effective="dark"] .modal-content,
:root[data-theme-effective="dark"] .info-box,
:root[data-theme-effective="dark"] .small-box,
:root[data-theme-effective="dark"] [class*="tw-bg-white"],
:root[data-theme-effective="dark"] [class*="tw-bg-gray-50"],
:root[data-theme-effective="dark"] [class*="tw-bg-gray-100"] {
  background-color: var(--fxl-bg-card) !important;
  color: #ffffff !important;
  border-color: var(--fxl-border) !important;
}
:root[data-theme-effective="light"] .box,
:root[data-theme-effective="light"] .panel,
:root[data-theme-effective="light"] .modal-content,
:root[data-theme-effective="light"] .info-box,
:root[data-theme-effective="light"] .small-box {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   8. FORMS — inputs, selects, textareas
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] .form-control,
:root[data-theme-effective="dark"] input[type="text"],
:root[data-theme-effective="dark"] input[type="email"],
:root[data-theme-effective="dark"] input[type="number"],
:root[data-theme-effective="dark"] input[type="password"],
:root[data-theme-effective="dark"] input[type="tel"],
:root[data-theme-effective="dark"] input[type="url"],
:root[data-theme-effective="dark"] input[type="search"],
:root[data-theme-effective="dark"] input[type="date"],
:root[data-theme-effective="dark"] textarea,
:root[data-theme-effective="dark"] select {
  background-color: #0a1525 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(0,229,255,0.22) !important;
}
:root[data-theme-effective="dark"] .form-control::placeholder,
:root[data-theme-effective="dark"] input::placeholder,
:root[data-theme-effective="dark"] textarea::placeholder {
  color: rgba(255,255,255,0.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.45) !important;
}
:root[data-theme-effective="light"] .form-control,
:root[data-theme-effective="light"] input[type="text"],
:root[data-theme-effective="light"] input[type="email"],
:root[data-theme-effective="light"] input[type="number"],
:root[data-theme-effective="light"] input[type="password"],
:root[data-theme-effective="light"] textarea,
:root[data-theme-effective="light"] select {
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-color: rgba(0,0,0,0.18) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   9. TABLES
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] .table,
:root[data-theme-effective="dark"] table.dataTable {
  background-color: var(--fxl-bg-table) !important;
  color: #ffffff !important;
}
:root[data-theme-effective="dark"] .table > thead > tr > th,
:root[data-theme-effective="dark"] table.dataTable thead th {
  background-color: var(--fxl-bg-card-2) !important;
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
  border-bottom-color: rgba(0,229,255,0.22) !important;
}
:root[data-theme-effective="dark"] .table > tbody > tr > td,
:root[data-theme-effective="dark"] table.dataTable tbody td {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-top-color: rgba(0,229,255,0.06) !important;
}
:root[data-theme-effective="dark"] .table-striped > tbody > tr:nth-of-type(odd),
:root[data-theme-effective="dark"] table.dataTable tbody tr:nth-of-type(odd) {
  background-color: var(--fxl-bg-table-alt) !important;
}
:root[data-theme-effective="dark"] .table-hover > tbody > tr:hover,
:root[data-theme-effective="dark"] table.dataTable tbody tr:hover {
  background-color: rgba(0,229,255,0.08) !important;
}
:root[data-theme-effective="light"] .table > thead > tr > th,
:root[data-theme-effective="light"] table.dataTable thead th {
  background-color: #f4f6f9 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   10. SIDEBAR + TOPBAR
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] .main-sidebar,
:root[data-theme-effective="dark"] .left-side {
  background-color: #000810 !important;
}
:root[data-theme-effective="dark"] .sidebar-menu > li > a,
:root[data-theme-effective="dark"] .sidebar a,
:root[data-theme-effective="dark"] .sidebar-menu .treeview-menu > li > a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:root[data-theme-effective="dark"] .sidebar-menu > li:hover > a,
:root[data-theme-effective="dark"] .sidebar-menu > li.active > a {
  background-color: rgba(0,229,255,0.10) !important;
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   11. LINKS
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] a {
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
}
:root[data-theme-effective="dark"] a:hover {
  color: #66f1ff !important;
  -webkit-text-fill-color: #66f1ff !important;
}
:root[data-theme-effective="light"] a {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* ══════════════════════════════════════════════════════════════════════
   12. SAFEGUARD — DO NOT BREAK CHARTS
   Highcharts/Chartist/ECharts SVG paths must be untouched.
   ══════════════════════════════════════════════════════════════════════ */
.highcharts-graph,
.highcharts-point,
.highcharts-area,
.highcharts-series path,
.highcharts-series circle,
.highcharts-series rect,
.ct-line, .ct-point, .ct-area, .ct-bar, .ct-slice-pie,
svg[data-fxl-skip-contrast] *,
canvas {
  /* SVG/canvas data is NEVER overridden by contrast rules */
}
:root[data-theme-effective="dark"] .highcharts-root text,
:root[data-theme-effective="dark"] .highcharts-axis-labels text {
  fill: rgba(255,255,255,0.85) !important;
}
:root[data-theme-effective="light"] .highcharts-root text,
:root[data-theme-effective="light"] .highcharts-axis-labels text {
  fill: rgba(0,0,0,0.85) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   13. THEME TOGGLE FAB — visible on every page
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] .fxl-fab-theme {
  background: linear-gradient(135deg, #0a1525 0%, #101e3a 100%) !important;
  border: 1px solid rgba(0,229,255,0.40) !important;
  color: #00e5ff !important;
  box-shadow: 0 0 14px rgba(0,229,255,0.30), 0 4px 12px rgba(0,0,0,0.6) !important;
}
:root[data-theme-effective="dark"] .fxl-fab-theme i { color: #00e5ff !important; }
:root[data-theme-effective="dark"] .fxl-fab-theme:hover {
  box-shadow: 0 0 22px rgba(0,229,255,0.50), 0 8px 18px rgba(0,0,0,0.7) !important;
}
:root[data-theme-effective="light"] .fxl-fab-theme {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}
:root[data-theme-effective="light"] .fxl-fab-theme i { color: #0f172a !important; }

/* ══════════════════════════════════════════════════════════════════════
   14. MISC: badges, alerts, modals, breadcrumbs — keep readable
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] .badge,
:root[data-theme-effective="dark"] .label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:root[data-theme-effective="dark"] .alert {
  background-color: rgba(0,229,255,0.06) !important;
  color: #ffffff !important;
  border-color: rgba(0,229,255,0.22) !important;
}
:root[data-theme-effective="dark"] .breadcrumb {
  background-color: transparent !important;
  color: #ffffff !important;
}
:root[data-theme-effective="dark"] .breadcrumb a { color: #00e5ff !important; }
:root[data-theme-effective="dark"] .breadcrumb > .active { color: rgba(255,255,255,0.65) !important; }

/* ══════════════════════════════════════════════════════════════════════
   15. SCROLLBAR — CYBORG STYLE
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] ::-webkit-scrollbar {
  width: 10px; height: 10px;
}
:root[data-theme-effective="dark"] ::-webkit-scrollbar-track {
  background: #050a14;
}
:root[data-theme-effective="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,229,255,0.30), rgba(0,229,255,0.18));
  border-radius: 5px;
  border: 2px solid #050a14;
}
:root[data-theme-effective="dark"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0,229,255,0.50), rgba(0,229,255,0.30));
}

/* ══════════════════════════════════════════════════════════════════════
   16. SELECTION
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"] ::selection {
  background: rgba(0,229,255,0.32);
  color: #ffffff;
}
:root[data-theme-effective="light"] ::selection {
  background: rgba(0,0,0,0.18);
  color: #000000;
}

/* ══════════════════════════════════════════════════════════════════════
   17. LIGHT-MODE DASHBOARD REVERT — clean professional look
   When user toggles to light, the cyberpunk effects fade out and the
   dashboard becomes a clean white/black business view.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
}
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] p,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] span:not([class*="text-"]):not([style*="color"]),
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] td,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] th,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] label,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] h3,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] h4,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] h5 {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}
/* DataTable inside cards in LIGHT mode */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] table.dataTable thead th {
  background-color: #f4f6f9 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-bottom-color: rgba(0,0,0,0.10) !important;
}
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] table.dataTable tbody td {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-top-color: rgba(0,0,0,0.06) !important;
}
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] table.dataTable tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.02) !important;
}
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] table.dataTable tbody tr:hover {
  background: rgba(0,0,0,0.05) !important;
}
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] table.dataTable tbody tr:hover td {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
/* Pagination in LIGHT mode → standard look */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .dataTables_paginate .paginate_button {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: 0 !important;
}
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .dataTables_paginate .paginate_button.current {
  background: #0f172a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: none !important;
}
/* Export buttons LIGHT */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] [class*="tw-dw-btn-outline"],
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .buttons-csv,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .buttons-excel,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .buttons-print,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .buttons-pdf,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .buttons-collection {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}
/* Highcharts wrapper inner */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] [class*="tw-bg-gray-50"] {
  background-color: #fafbfc !important;
}
:root[data-theme-effective="light"] .highcharts-background { fill: #ffffff !important; }
:root[data-theme-effective="light"] .highcharts-root text,
:root[data-theme-effective="light"] .highcharts-axis-labels text,
:root[data-theme-effective="light"] .highcharts-legend-item text { fill: #000000 !important; }
:root[data-theme-effective="light"] .highcharts-axis-line,
:root[data-theme-effective="light"] .highcharts-tick { stroke: rgba(0,0,0,0.25) !important; }
:root[data-theme-effective="light"] .highcharts-grid-line { stroke: rgba(0,0,0,0.07) !important; }
:root[data-theme-effective="light"] .highcharts-graph { stroke: #0f172a !important; }
:root[data-theme-effective="light"] .highcharts-color-1 .highcharts-graph { stroke: #b45309 !important; }
:root[data-theme-effective="light"] .highcharts-color-2 .highcharts-graph { stroke: #15803d !important; }

/* Hide cyberpunk decorations in LIGHT mode */
:root[data-theme-effective="light"] body.fxl-v87 .fxl-scan-el,
:root[data-theme-effective="light"] body.fxl-v87 .fxl-brk,
:root[data-theme-effective="light"] body.fxl-v87 #fxl-universe-canvas,
:root[data-theme-effective="light"] body.fxl-v87 .fxl-fx-particles,
:root[data-theme-effective="light"] body.fxl-v87 .fxl-trail-dot,
:root[data-theme-effective="light"] body.fxl-v87 .fxl-cursor-outer,
:root[data-theme-effective="light"] body.fxl-v87 .fxl-cursor-inner,
:root[data-theme-effective="light"] body.fxl-v87 .fxl-cursor-lines,
:root[data-theme-effective="light"] body.fxl-v87 .fxl-orb,
:root[data-theme-effective="light"] body.fxl-v87 #fxl-hud-strip,
:root[data-theme-effective="light"] body.fxl-v87 .fxl-box-hud-badge {
  display: none !important;
}
/* Restore default cursor in light mode */
:root[data-theme-effective="light"] body.fxl-v87,
:root[data-theme-effective="light"] body.fxl-v87 * {
  cursor: auto !important;
}
:root[data-theme-effective="light"] body.fxl-v87 a,
:root[data-theme-effective="light"] body.fxl-v87 button { cursor: pointer !important; }

/* Title in LIGHT mode → clean black */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-title] {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #000000 !important;
}
/* Disable boot animation in light mode (instant render) */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   18. ICONS — explicit color preservation (icons keep their hue)
   ══════════════════════════════════════════════════════════════════════ */
i.fa, i.fas, i.far, i.fab, i.fal, i.fad,
[class*="fa-"]:not(button):not(a) {
  /* FA icons set their own colors via inline or class — never override here */
}

/* ══════════════════════════════════════════════════════════════════════
   19. WELCOME HEADER + TOPBAR — kill the cyan/sky gradient
   The UPOS welcome bar uses `tw-from-sky-800 tw-to-sky-900` → cyan band.
   Text/buttons on top get unreadable. Force theme-correct backgrounds.
   ══════════════════════════════════════════════════════════════════════ */

/* DARK mode: replace cyan gradient with deep navy/black —
   EXCLUDES .no-print (topbar) so the original UPOS dark sky gradient stays. */
:root[data-theme-effective="dark"] [class*="tw-from-sky"]:not(.no-print, .no-print *),
:root[data-theme-effective="dark"] [class*="tw-bg-gradient"][class*="tw-to-sky"]:not(.no-print, .no-print *),
:root[data-theme-effective="dark"] [data-fxl-header]:not(.no-print, .no-print *) {
  background-image: linear-gradient(160deg, #04070f 0%, #070d1f 55%, #04081a 100%) !important;
  background-color: #04070f !important;
}

/* LIGHT mode: kill the cyan, use clean white —
   EXCLUDES .no-print (topbar) so the original sky gradient + crisp white icons stay. */
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *),
:root[data-theme-effective="light"] [class*="tw-bg-gradient"][class*="tw-to-sky"]:not(.no-print, .no-print *),
:root[data-theme-effective="light"] [data-fxl-header]:not(.no-print, .no-print *) {
  background-image: none !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* All text inside these wrappers should be theme-correct (still excludes topbar) */
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) *,
:root[data-theme-effective="light"] [data-fxl-header]:not(.no-print, .no-print *) *,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) h1,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) h2,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) h3,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) span,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) p {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

/* Top action buttons inside non-topbar from-sky wrappers — light theme */
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) button,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) a {
  background-color: #f4f6f9 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) button:hover,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) a:hover {
  background-color: #e5e7eb !important;
}
/* Icons inside these buttons keep their hue */
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) button i,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) a i,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) button svg,
:root[data-theme-effective="light"] [class*="tw-from-sky"]:not(.no-print, .no-print *) a svg {
  color: inherit;
}

/* DARK mode: action buttons on dark header (still excludes topbar) */
:root[data-theme-effective="dark"] [class*="tw-from-sky"]:not(.no-print, .no-print *) button,
:root[data-theme-effective="dark"] [class*="tw-from-sky"]:not(.no-print, .no-print *) a {
  background-color: rgba(0,229,255,0.07) !important;
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
  border: 1px solid rgba(0,229,255,0.22) !important;
}
:root[data-theme-effective="dark"] [class*="tw-from-sky"]:not(.no-print, .no-print *) button:hover,
:root[data-theme-effective="dark"] [class*="tw-from-sky"]:not(.no-print, .no-print *) a:hover {
  background-color: rgba(0,229,255,0.15) !important;
  border-color: rgba(0,229,255,0.45) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   20. Daisy UI primary fix — `tw-bg-primary` text readable
   USE `[class~=...]` (word match) so we DON'T match `hover:tw-bg-primary-50`
   or any other prefix/suffix variants — only the actual primary class.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] [class~="tw-bg-primary"],
:root[data-theme-effective="light"] [class~="tw-bg-primary-content"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:root[data-theme-effective="dark"] [class~="tw-bg-primary"],
:root[data-theme-effective="dark"] [class~="tw-bg-primary-content"] {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* btn-primary & friends — Bootstrap legacy */
:root[data-theme-effective="light"] .btn-primary,
:root[data-theme-effective="light"] .btn-primary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #0f172a !important;
  border-color: #0f172a !important;
}
:root[data-theme-effective="light"] .btn-primary:hover {
  background-color: #1e293b !important;
}

/* ══════════════════════════════════════════════════════════════════════
   21. Sidebar text — readable in light mode (it stayed white)
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] .side-bar,
:root[data-theme-effective="light"] [class*="side-bar"],
:root[data-theme-effective="light"] [class*="tw-bg-white"][class*="side"],
:root[data-theme-effective="light"] aside,
:root[data-theme-effective="light"] .main-sidebar {
  background-color: #ffffff !important;
  color: #000000 !important;
}
:root[data-theme-effective="light"] .side-bar a,
:root[data-theme-effective="light"] .side-bar span,
:root[data-theme-effective="light"] .side-bar p,
:root[data-theme-effective="light"] aside a,
:root[data-theme-effective="light"] aside span,
:root[data-theme-effective="light"] aside p,
:root[data-theme-effective="light"] .fxl-child-link {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   22. KPI card labels — make sure they read in light mode
   The dashboard CSS uses `--fxl-label` which is the bright neon color
   per palette. Force black in light mode for the small descriptors.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] p,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] [class*="tw-text-sm"],
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] [class*="tw-text-xs"] {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  font-weight: 500;
}
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .tw-font-mono,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] [data-fxl-stat] {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 700 !important;
}

/* The label header (small ALL-CAPS text above the stat) */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] [class*="tw-uppercase"],
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] [class*="tw-tracking-wid"] {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   23. NIVEL FAB + theme FAB — visible in both themes
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] .fxl-fab-nivel {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #fbbf24 !important;
}
:root[data-theme-effective="light"] .fxl-fab-nivel i { color: #fbbf24 !important; }

/* ══════════════════════════════════════════════════════════════════════
   24. NotifIcation count badges — both themes
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] .badge,
:root[data-theme-effective="light"] .label-warning {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #ef4444 !important;
}
:root[data-theme-effective="light"] .label-success { background-color: #15803d !important; color: #ffffff !important; }
:root[data-theme-effective="light"] .label-info    { background-color: #0ea5e9 !important; color: #ffffff !important; }

/* ══════════════════════════════════════════════════════════════════════
   25. NUCLEAR LIGHT-MODE OVERRIDE for inputs/selects/dropdowns
   The dashboard V87.5 CSS made all inputs dark cyborg. Force them back
   to clean white/black in light mode — wins because it's later + more specific.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] body.fxl-v87 input,
:root[data-theme-effective="light"] body.fxl-v87 select,
:root[data-theme-effective="light"] body.fxl-v87 textarea,
:root[data-theme-effective="light"] body.fxl-v87 .form-control,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] input,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] select,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] textarea,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .form-control,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .dataTables_filter input,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .dataTables_length select,
:root[data-theme-effective="light"] body.fxl-v87 .dataTables_filter input,
:root[data-theme-effective="light"] body.fxl-v87 .dataTables_length select {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
}
:root[data-theme-effective="light"] body.fxl-v87 input::placeholder,
:root[data-theme-effective="light"] body.fxl-v87 textarea::placeholder,
:root[data-theme-effective="light"] body.fxl-v87 .form-control::placeholder {
  color: rgba(0,0,0,0.45) !important;
  -webkit-text-fill-color: rgba(0,0,0,0.45) !important;
}
:root[data-theme-effective="light"] body.fxl-v87 select option {
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Custom select arrow — make it black in light mode */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] select,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .dataTables_length select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(0%2C0%2C0%2C0.7)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
}

/* Pagination text shadow leftovers */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .dataTables_paginate .paginate_button {
  text-shadow: none !important;
}

/* DataTable wrapper texts */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .dataTables_info,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .dataTables_length label,
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] .dataTables_filter label {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
}

/* "No hay datos disponibles en la tabla" */
:root[data-theme-effective="light"] body.fxl-v87 [data-fxl-card] table.dataTable td.dataTables_empty {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   26. UNIVERSAL FALLBACK — any solid dark element in light mode
   gets clean text contrast. Catch-all safety net.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] [style*="background-color: rgb(2"],
:root[data-theme-effective="light"] [style*="background-color: rgb(0,"],
:root[data-theme-effective="light"] [style*="background-color:#0"],
:root[data-theme-effective="light"] [style*="background-color:rgb(2"] {
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* All buttons in light mode that have transparent or near-white BG should have black text */
:root[data-theme-effective="light"] button:not([class~="tw-bg-primary"]):not([class*="btn-primary"]),
:root[data-theme-effective="light"] a.btn:not([class~="tw-bg-primary"]):not([class*="btn-primary"]) {
  /* default safe contrast */
}

/* ══════════════════════════════════════════════════════════════════════
   27. HIGHCHARTS TOOLTIP — theme-aware
   Dashboard V87.5 set tooltip to dark navy. In light mode it becomes
   navy-bg + black-text = invisible. Fix per theme.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] .highcharts-tooltip-box {
  fill: #ffffff !important;
  stroke: rgba(0,0,0,0.18) !important;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.12)) !important;
}
:root[data-theme-effective="light"] .highcharts-tooltip text,
:root[data-theme-effective="light"] .highcharts-tooltip text tspan {
  fill: #000000 !important;
  color: #000000 !important;
}
:root[data-theme-effective="dark"] .highcharts-tooltip-box {
  fill: rgba(2,11,26,0.97) !important;
  stroke: #00e5ff !important;
}
:root[data-theme-effective="dark"] .highcharts-tooltip text,
:root[data-theme-effective="dark"] .highcharts-tooltip text tspan {
  fill: rgba(220,240,255,0.95) !important;
}

/* Highcharts plot-background — theme-correct */
:root[data-theme-effective="light"] .highcharts-plot-background {
  fill: #ffffff !important;
}
:root[data-theme-effective="dark"] .highcharts-plot-background {
  fill: rgb(2,11,26) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   28. NIVEL FAB TOOLTIP — the popover that appears when hovering crown
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] .fxl-fab-nivel-tooltip {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
}
:root[data-theme-effective="light"] .fxl-fab-nivel-tooltip *,
:root[data-theme-effective="light"] .fxl-fab-nivel-tooltip td,
:root[data-theme-effective="light"] .fxl-fab-nivel-tooltip th,
:root[data-theme-effective="light"] .fxl-fab-nivel-tooltip span,
:root[data-theme-effective="light"] .fxl-fab-nivel-tooltip div {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: transparent !important;
}
:root[data-theme-effective="light"] .fxl-fab-nivel-tooltip strong,
:root[data-theme-effective="light"] .fxl-fab-nivel-tooltip b,
:root[data-theme-effective="light"] .fxl-fab-nivel-tooltip [class*="title"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 700 !important;
}

/* Dark mode NIVEL tooltip — keep cyber aesthetic */
:root[data-theme-effective="dark"] .fxl-fab-nivel-tooltip {
  background: linear-gradient(135deg, rgba(2,11,26,0.97) 0%, rgba(10,21,37,0.97) 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(0,229,255,0.40) !important;
  box-shadow: 0 0 22px rgba(0,229,255,0.30), 0 8px 24px rgba(0,0,0,0.6) !important;
}
:root[data-theme-effective="dark"] .fxl-fab-nivel-tooltip *,
:root[data-theme-effective="dark"] .fxl-fab-nivel-tooltip td,
:root[data-theme-effective="dark"] .fxl-fab-nivel-tooltip th,
:root[data-theme-effective="dark"] .fxl-fab-nivel-tooltip span,
:root[data-theme-effective="dark"] .fxl-fab-nivel-tooltip div {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: transparent !important;
}
:root[data-theme-effective="dark"] .fxl-fab-nivel-tooltip strong,
:root[data-theme-effective="dark"] .fxl-fab-nivel-tooltip b,
:root[data-theme-effective="dark"] .fxl-fab-nivel-tooltip [class*="title"] {
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   29. NIVEL FAB BUTTON ITSELF — keep visible in both themes
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] .fxl-fab-nivel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06) !important;
}
:root[data-theme-effective="light"] .fxl-fab-nivel:hover {
  background: #f4f6f9 !important;
  background-color: #f4f6f9 !important;
  border-color: rgba(0,0,0,0.30) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.08) !important;
}
:root[data-theme-effective="light"] .fxl-fab-nivel i,
:root[data-theme-effective="light"] .fxl-fab-nivel svg,
:root[data-theme-effective="light"] .fxl-fab-nivel .fa-crown,
:root[data-theme-effective="light"] .fxl-fab-nivel i.fas,
:root[data-theme-effective="light"] .fxl-fab-nivel i.fa {
  color: #000000 !important;
  fill: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
:root[data-theme-effective="dark"] .fxl-fab-nivel {
  background: linear-gradient(135deg, #0a1525 0%, #101e3a 100%) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(0,229,255,0.45) !important;
  box-shadow: 0 0 18px rgba(0,229,255,0.28), 0 4px 14px rgba(0,0,0,0.6) !important;
}
:root[data-theme-effective="dark"] .fxl-fab-nivel i,
:root[data-theme-effective="dark"] .fxl-fab-nivel svg {
  color: #fbbf24 !important;
  fill: #fbbf24 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   30. Highcharts series colors — also override in light mode
   so the line is dark navy not cyan (cyan barely shows on white)
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="light"] .highcharts-graph {
  stroke: #0f172a !important;
}
:root[data-theme-effective="light"] .highcharts-series-0 .highcharts-point,
:root[data-theme-effective="light"] .highcharts-color-0.highcharts-point {
  fill: #0f172a !important;
  stroke: #ffffff !important;
}
:root[data-theme-effective="light"] .highcharts-color-1 .highcharts-graph { stroke: #b45309 !important; }
:root[data-theme-effective="light"] .highcharts-color-2 .highcharts-graph { stroke: #15803d !important; }
:root[data-theme-effective="light"] .highcharts-halo.highcharts-color-0 {
  fill: rgba(15,23,42,0.18) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   31. WHITE CURSOR for DARK mode (site-wide)
   The OS native cursor is black with thin outline → invisible on
   pure-black cyborg BG. Force a custom white SVG cursor everywhere
   in dark mode. CSS-only, 0 perf cost.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme-effective="dark"],
:root[data-theme-effective="dark"] body,
:root[data-theme-effective="dark"] div,
:root[data-theme-effective="dark"] main,
:root[data-theme-effective="dark"] section,
:root[data-theme-effective="dark"] header,
:root[data-theme-effective="dark"] footer,
:root[data-theme-effective="dark"] aside,
:root[data-theme-effective="dark"] nav,
:root[data-theme-effective="dark"] article,
:root[data-theme-effective="dark"] table,
:root[data-theme-effective="dark"] td,
:root[data-theme-effective="dark"] th,
:root[data-theme-effective="dark"] li,
:root[data-theme-effective="dark"] p,
:root[data-theme-effective="dark"] span,
:root[data-theme-effective="dark"] h1,
:root[data-theme-effective="dark"] h2,
:root[data-theme-effective="dark"] h3,
:root[data-theme-effective="dark"] h4,
:root[data-theme-effective="dark"] h5,
:root[data-theme-effective="dark"] h6 {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 2 L3 18 L7 14 L10 21 L13 20 L11 13 L17 13 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.2' stroke-linejoin='round'/></svg>") 3 2, default !important;
}

/* Pointer (hand) cursor for interactive elements — white with black outline */
:root[data-theme-effective="dark"] a,
:root[data-theme-effective="dark"] button,
:root[data-theme-effective="dark"] [role="button"],
:root[data-theme-effective="dark"] [onclick],
:root[data-theme-effective="dark"] label[for],
:root[data-theme-effective="dark"] summary,
:root[data-theme-effective="dark"] .clickable,
:root[data-theme-effective="dark"] [class*="cursor-pointer"],
:root[data-theme-effective="dark"] [class*="tw-cursor-pointer"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M11 3 L11 14 L8 14 L8 16 L9 22 L10 24 L21 24 L22 22 L22 13 L21 12 L17 12 L17 11 L16 10 L15 10 L15 9 L14 8 L13 8 L13 3 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.2' stroke-linejoin='round'/></svg>") 9 3, pointer !important;
}

/* Text I-beam cursor for inputs/textareas — white with black outline */
:root[data-theme-effective="dark"] input[type="text"],
:root[data-theme-effective="dark"] input[type="search"],
:root[data-theme-effective="dark"] input[type="email"],
:root[data-theme-effective="dark"] input[type="password"],
:root[data-theme-effective="dark"] input[type="number"],
:root[data-theme-effective="dark"] input[type="tel"],
:root[data-theme-effective="dark"] input[type="url"],
:root[data-theme-effective="dark"] input:not([type]),
:root[data-theme-effective="dark"] textarea,
:root[data-theme-effective="dark"] [contenteditable="true"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='22' viewBox='0 0 14 22'><path d='M3 1 L11 1 M3 3 L11 3 M7 2 L7 20 M3 19 L11 19 M3 21 L11 21' stroke='%23ffffff' stroke-width='2' fill='none'/><path d='M3 1 L11 1 M3 3 L11 3 M7 2 L7 20 M3 19 L11 19 M3 21 L11 21' stroke='%23000000' stroke-width='1' fill='none'/></svg>") 7 11, text !important;
}

/* Disabled cursor */
:root[data-theme-effective="dark"] [disabled],
:root[data-theme-effective="dark"] .disabled,
:root[data-theme-effective="dark"] :disabled {
  cursor: not-allowed !important;
}

/* Resize handles & charts → keep crosshair / move cursors as system defaults  */
:root[data-theme-effective="dark"] .highcharts-container,
:root[data-theme-effective="dark"] .highcharts-container *,
:root[data-theme-effective="dark"] svg.highcharts-root,
:root[data-theme-effective="dark"] svg.highcharts-root * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='10' cy='10' r='2' fill='%2300e5ff' stroke='%23000000' stroke-width='1'/><line x1='10' y1='0' x2='10' y2='6' stroke='%23ffffff' stroke-width='1.5'/><line x1='10' y1='14' x2='10' y2='20' stroke='%23ffffff' stroke-width='1.5'/><line x1='0' y1='10' x2='6' y2='10' stroke='%23ffffff' stroke-width='1.5'/><line x1='14' y1='10' x2='20' y2='10' stroke='%23ffffff' stroke-width='1.5'/></svg>") 10 10, crosshair !important;
}

/* ══════════════════════════════════════════════════════════════════════
   32. LAUNCHER (Centro de Mando) — theme-aware
   /launcher uses launcher.css with hardcoded dark gradient + colored
   blobs. Override per theme so light mode shows clean white surface.
   ══════════════════════════════════════════════════════════════════════ */

/* LIGHT MODE — clean white launcher */
:root[data-theme-effective="light"] .fxl-lc-root {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
/* Hide ambient color blobs in light mode (they create dark bg gradient) */
:root[data-theme-effective="light"] .fxl-lc-blob,
:root[data-theme-effective="light"] .fxl-lc-blob-1,
:root[data-theme-effective="light"] .fxl-lc-blob-2,
:root[data-theme-effective="light"] .fxl-lc-blob-3 {
  display: none !important;
}
/* Sidebar in light → already white, keep it */
:root[data-theme-effective="light"] .fxl-lc-sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
}
/* Main pane (the one showing selected module) */
:root[data-theme-effective="light"] .fxl-lc-pane {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
/* Module card backgrounds (only the OUTER card surface, NOT the icon wrap)
   Excluded with :not(): fxl-lc-mod-icon, fxl-lc-mod-shine, fxl-lc-cat-icon-wrap */
:root[data-theme-effective="light"] .fxl-lc-mod,
:root[data-theme-effective="light"] .fxl-lc-cat:not(.fxl-lc-cat-icon-wrap),
:root[data-theme-effective="light"] .fxl-lc-card,
:root[data-theme-effective="light"] .fxl-lc-tile,
:root[data-theme-effective="light"] .fxl-lc-sub {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
:root[data-theme-effective="light"] .fxl-lc-mod:hover,
:root[data-theme-effective="light"] .fxl-lc-cat:not(.fxl-lc-cat-icon-wrap):hover,
:root[data-theme-effective="light"] .fxl-lc-card:hover,
:root[data-theme-effective="light"] .fxl-lc-tile:hover,
:root[data-theme-effective="light"] .fxl-lc-sub:hover {
  background: #f4f6f9 !important;
  background-color: #f4f6f9 !important;
  border-color: rgba(0,0,0,0.20) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}
/* Active module card (currently selected — shown with a colored border) */
:root[data-theme-effective="light"] [class*="fxl-lc-mod"][class*="active"],
:root[data-theme-effective="light"] [class*="fxl-lc-mod"].is-active,
:root[data-theme-effective="light"] [class*="fxl-lc-cat"][class*="active"] {
  background: #ffffff !important;
  border: 2px solid #f59e0b !important;  /* amber for visual distinction */
  box-shadow: 0 0 0 4px rgba(245,158,11,0.12) !important;
}
/* Text inside launcher in light mode → black */
:root[data-theme-effective="light"] .fxl-lc-root,
:root[data-theme-effective="light"] .fxl-lc-root *,
:root[data-theme-effective="light"] .fxl-lc-root h1,
:root[data-theme-effective="light"] .fxl-lc-root h2,
:root[data-theme-effective="light"] .fxl-lc-root h3,
:root[data-theme-effective="light"] .fxl-lc-root h4,
:root[data-theme-effective="light"] .fxl-lc-root h5,
:root[data-theme-effective="light"] .fxl-lc-root p,
:root[data-theme-effective="light"] .fxl-lc-root span,
:root[data-theme-effective="light"] .fxl-lc-root label,
:root[data-theme-effective="light"] .fxl-lc-root div {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
/* Subtitle / description text */
:root[data-theme-effective="light"] .fxl-lc-root [class*="desc"],
:root[data-theme-effective="light"] .fxl-lc-root [class*="subtitle"],
:root[data-theme-effective="light"] .fxl-lc-root [class*="hint"],
:root[data-theme-effective="light"] .fxl-lc-root small {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
}
/* "MÓDULO" overline / category labels */
:root[data-theme-effective="light"] .fxl-lc-root [class*="overline"],
:root[data-theme-effective="light"] .fxl-lc-root [class*="kicker"],
:root[data-theme-effective="light"] .fxl-lc-root [class*="label"] {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}
/* Icons keep their colored gradient backgrounds (both wraps below) */
/* `.fxl-lc-cat-icon-wrap`  → categoría tiles (left sidebar of launcher) */
/* `.fxl-lc-mod-icon`       → module sub-cards (right pane) */
/* IMPORTANT: NO `background:unset` rules here — they would kill the
   per-category gradient defined in launcher.css. Just leave them alone. */

/* Force inner FA icon to WHITE in BOTH themes — high specificity so it
   beats the universal `:root[data-theme-effective="..."] body span` rule. */
:root[data-theme-effective="light"] .fxl-lc-cat-icon-wrap i,
:root[data-theme-effective="light"] .fxl-lc-cat-icon-wrap svg,
:root[data-theme-effective="light"] .fxl-lc-cat-icon-wrap .fas,
:root[data-theme-effective="light"] .fxl-lc-cat-icon-wrap .fa,
:root[data-theme-effective="light"] .fxl-lc-cat-icon-wrap .far,
:root[data-theme-effective="light"] .fxl-lc-mod-icon i,
:root[data-theme-effective="light"] .fxl-lc-mod-icon svg,
:root[data-theme-effective="light"] .fxl-lc-mod-icon .fas,
:root[data-theme-effective="light"] .fxl-lc-mod-icon .fa,
:root[data-theme-effective="light"] .fxl-lc-mod-icon .far,
:root[data-theme-effective="dark"]  .fxl-lc-cat-icon-wrap i,
:root[data-theme-effective="dark"]  .fxl-lc-cat-icon-wrap svg,
:root[data-theme-effective="dark"]  .fxl-lc-cat-icon-wrap .fas,
:root[data-theme-effective="dark"]  .fxl-lc-mod-icon i,
:root[data-theme-effective="dark"]  .fxl-lc-mod-icon svg,
:root[data-theme-effective="dark"]  .fxl-lc-mod-icon .fas {
  color: #ffffff !important;
  fill: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Sidebar dropdown icons (the small FA icons in expanded child links)  */
:root[data-theme-effective="light"] .sidebar-menu .fa,
:root[data-theme-effective="light"] .sidebar-menu .fas,
:root[data-theme-effective="light"] .sidebar-menu i[class*="fa-"],
:root[data-theme-effective="light"] aside .fa,
:root[data-theme-effective="light"] aside .fas,
:root[data-theme-effective="light"] aside i[class*="fa-"],
:root[data-theme-effective="light"] .fxl-child-link i,
:root[data-theme-effective="light"] .fxl-child-link .fa,
:root[data-theme-effective="light"] .fxl-child-link .fas {
  color: #4b5563 !important;
  fill: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
}
:root[data-theme-effective="dark"] .sidebar-menu .fa,
:root[data-theme-effective="dark"] .sidebar-menu .fas,
:root[data-theme-effective="dark"] .sidebar-menu i[class*="fa-"],
:root[data-theme-effective="dark"] aside .fa,
:root[data-theme-effective="dark"] aside .fas,
:root[data-theme-effective="dark"] aside i[class*="fa-"],
:root[data-theme-effective="dark"] .fxl-child-link i,
:root[data-theme-effective="dark"] .fxl-child-link .fa,
:root[data-theme-effective="dark"] .fxl-child-link .fas {
  color: #ffffff !important;
  fill: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Footer hint bar (changes category, opens module, ayuda) */
:root[data-theme-effective="light"] .fxl-lc-root [class*="footer"],
:root[data-theme-effective="light"] .fxl-lc-root [class*="hint-bar"] {
  background: rgba(0,0,0,0.03) !important;
  color: #4b5563 !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}
:root[data-theme-effective="light"] .fxl-lc-root kbd {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.20) !important;
  -webkit-text-fill-color: #000000 !important;
}

/* DARK MODE — keep cyber look but force readability  */
:root[data-theme-effective="dark"] .fxl-lc-root,
:root[data-theme-effective="dark"] .fxl-lc-root *:not(.fxl-lc-cat-icon-wrap):not(i):not(svg) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:root[data-theme-effective="dark"] .fxl-lc-root [class*="overline"],
:root[data-theme-effective="dark"] .fxl-lc-root [class*="kicker"],
:root[data-theme-effective="dark"] .fxl-lc-root small {
  color: rgba(255,255,255,0.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
}
:root[data-theme-effective="dark"] .fxl-lc-root kbd {
  background: rgba(0,229,255,0.10) !important;
  color: #00e5ff !important;
  border: 1px solid rgba(0,229,255,0.30) !important;
  -webkit-text-fill-color: #00e5ff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v904 · TOPBAR universal — contraste BULLETPROOF en ambos temas
   ══════════════════════════════════════════════════════════════════════
   El topbar (data-fxl-topbar="1") tiene un gradient Tailwind hardcoded
   (tw-from-primary-800 → tw-to-primary-900) que ignora el tema light/dark.
   Estas reglas lo reescriben según [data-theme-effective] del <html>:
     • LIGHT → fondo blanco + texto NEGRO + botones gris claro VISIBLES
     • DARK  → fondo glass navy + texto BLANCO + botones glass cyan VISIBLES
     • Sin atributo (pre-JS) → asume DARK (matchea el gradient hardcoded)
   Especificidad reforzada con html[…] para vencer a fxl-topbar-v86.css.
   Excepción: pills con bg colorido propio (verde POS, etc.) preservados.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Base — quita el gradient hardcoded del topbar ────────────────────── */
html [data-fxl-topbar="1"] {
  background-image: none !important;
  transition: background 240ms ease, color 240ms ease, box-shadow 240ms ease;
}

/* ── FALLBACK pre-JS (sin data-theme-effective) — usa prefers-color-scheme.
      Garantiza visibilidad mientras el JS aún no ha pintado el atributo. ── */
@media (prefers-color-scheme: light) {
  html:not([data-theme-effective]) [data-fxl-topbar="1"] {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  }
  html:not([data-theme-effective]) [data-fxl-topbar="1"] *,
  html:not([data-theme-effective]) [data-fxl-topbar="1"] svg [stroke="currentColor"],
  html:not([data-theme-effective]) [data-fxl-topbar="1"] svg [fill="currentColor"] {
    color: #0b0f1a !important;
    -webkit-text-fill-color: #0b0f1a !important;
    stroke: #0b0f1a !important;
    fill: #0b0f1a !important;
  }
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme-effective]) [data-fxl-topbar="1"] {
    background-color: rgba(4,5,11,0.96) !important;
    border-bottom: 1px solid rgba(0,229,255,0.22) !important;
  }
  html:not([data-theme-effective]) [data-fxl-topbar="1"] *,
  html:not([data-theme-effective]) [data-fxl-topbar="1"] svg [stroke="currentColor"],
  html:not([data-theme-effective]) [data-fxl-topbar="1"] svg [fill="currentColor"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
  }
}

/* ── LIGHT theme · fondo blanco + texto NEGRO ULTRA + botones VISIBLES ── */
html[data-theme-effective="light"] [data-fxl-topbar="1"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
html[data-theme-effective="light"] [data-fxl-topbar="1"] *,
html[data-theme-effective="light"] [data-fxl-topbar="1"] span,
html[data-theme-effective="light"] [data-fxl-topbar="1"] a,
html[data-theme-effective="light"] [data-fxl-topbar="1"] button,
html[data-theme-effective="light"] [data-fxl-topbar="1"] summary {
  color: #0b0f1a !important;
  -webkit-text-fill-color: #0b0f1a !important;
}
html[data-theme-effective="light"] [data-fxl-topbar="1"] svg,
html[data-theme-effective="light"] [data-fxl-topbar="1"] svg *,
html[data-theme-effective="light"] [data-fxl-topbar="1"] svg [stroke="currentColor"],
html[data-theme-effective="light"] [data-fxl-topbar="1"] svg [fill="currentColor"] {
  color: #0b0f1a !important;
  stroke: #0b0f1a !important;
  /* Solo forzar fill cuando es currentColor (preservar fill="none" de los íconos outline) */
}
html[data-theme-effective="light"] [data-fxl-topbar="1"] svg [fill="currentColor"] {
  fill: #0b0f1a !important;
}
/* Botones del topbar en LIGHT — fondo gris claro CLARAMENTE visible */
html[data-theme-effective="light"] [data-fxl-topbar="1"] button,
html[data-theme-effective="light"] [data-fxl-topbar="1"] a:not(.btn-success):not([class*="tw-bg-green"]):not([class*="tw-bg-emerald"]),
html[data-theme-effective="light"] [data-fxl-topbar="1"] summary {
  background: rgba(15, 23, 42, 0.08) !important;
  background-color: rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html[data-theme-effective="light"] [data-fxl-topbar="1"] button:hover,
html[data-theme-effective="light"] [data-fxl-topbar="1"] a:not(.btn-success):not([class*="tw-bg-green"]):not([class*="tw-bg-emerald"]):hover,
html[data-theme-effective="light"] [data-fxl-topbar="1"] summary:hover {
  background: rgba(2, 132, 199, 0.12) !important;
  background-color: rgba(2, 132, 199, 0.12) !important;
  border-color: rgba(2, 132, 199, 0.38) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.20) !important;
}

/* ── DARK theme · fondo glass navy + texto BLANCO ULTRA + botones VISIBLES */
html[data-theme-effective="dark"] [data-fxl-topbar="1"] {
  background: linear-gradient(180deg, rgba(4,5,11,0.96), rgba(10,13,31,0.92)) !important;
  background-color: rgba(4,5,11,0.96) !important;
  border-bottom: 1px solid rgba(0,229,255,0.22) !important;
  box-shadow: 0 2px 14px rgba(0,229,255,0.12);
}
html[data-theme-effective="dark"] [data-fxl-topbar="1"] *,
html[data-theme-effective="dark"] [data-fxl-topbar="1"] span,
html[data-theme-effective="dark"] [data-fxl-topbar="1"] a,
html[data-theme-effective="dark"] [data-fxl-topbar="1"] button,
html[data-theme-effective="dark"] [data-fxl-topbar="1"] summary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme-effective="dark"] [data-fxl-topbar="1"] svg,
html[data-theme-effective="dark"] [data-fxl-topbar="1"] svg *,
html[data-theme-effective="dark"] [data-fxl-topbar="1"] svg [stroke="currentColor"] {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
html[data-theme-effective="dark"] [data-fxl-topbar="1"] svg [fill="currentColor"] {
  fill: #ffffff !important;
}
/* Botones del topbar en DARK — glass cyan CLARAMENTE visible */
html[data-theme-effective="dark"] [data-fxl-topbar="1"] button,
html[data-theme-effective="dark"] [data-fxl-topbar="1"] a:not(.btn-success):not([class*="tw-bg-green"]):not([class*="tw-bg-emerald"]),
html[data-theme-effective="dark"] [data-fxl-topbar="1"] summary {
  background: rgba(0, 229, 255, 0.10) !important;
  background-color: rgba(0, 229, 255, 0.10) !important;
  border: 1px solid rgba(0, 229, 255, 0.36) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html[data-theme-effective="dark"] [data-fxl-topbar="1"] button:hover,
html[data-theme-effective="dark"] [data-fxl-topbar="1"] a:not(.btn-success):not([class*="tw-bg-green"]):not([class*="tw-bg-emerald"]):hover,
html[data-theme-effective="dark"] [data-fxl-topbar="1"] summary:hover {
  background: rgba(0, 229, 255, 0.22) !important;
  background-color: rgba(0, 229, 255, 0.22) !important;
  border-color: rgba(0, 229, 255, 0.65) !important;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.32) !important;
}

/* ── DATE pill (.tw-font-mono) — override defensivo (fxl-topbar-v86.css
      la pintaba con rgba(0,0,0,0.18), invisible sobre dark) ─────────── */
html[data-theme-effective="light"] [data-fxl-topbar="1"] button[class*="tw-font-mono"] {
  background: rgba(15, 23, 42, 0.10) !important;
  background-color: rgba(15, 23, 42, 0.10) !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
  color: #0b0f1a !important;
  -webkit-text-fill-color: #0b0f1a !important;
  font-weight: 600 !important;
}
html[data-theme-effective="dark"] [data-fxl-topbar="1"] button[class*="tw-font-mono"] {
  background: rgba(0, 229, 255, 0.14) !important;
  background-color: rgba(0, 229, 255, 0.14) !important;
  border-color: rgba(0, 229, 255, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.50);
}

/* ── EXCEPCIÓN: pills coloridos (POS verde, status verde) preservan su bg */
html [data-fxl-topbar="1"] .btn-success,
html [data-fxl-topbar="1"] a[class*="tw-bg-green"],
html [data-fxl-topbar="1"] a[class*="tw-bg-emerald"] {
  background: linear-gradient(120deg, #00ff87, #047857) !important;
  background-color: #047857 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.32) !important;
}
html [data-fxl-topbar="1"] .btn-success *,
html [data-fxl-topbar="1"] a[class*="tw-bg-green"] *,
html [data-fxl-topbar="1"] a[class*="tw-bg-emerald"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v886 · BUSINESS SETTINGS — formularios respetan tema (fas fa-moon)
   ══════════════════════════════════════════════════════════════════════
   La página /business/settings (Configuración de la empresa) usa Bootstrap
   .form-control + .list-group-item + .pos-tab-menu. Estas reglas hacen
   que TODO el formulario cambie de bg/letras al alternar el tema.
   ════════════════════════════════════════════════════════════════════════ */

/* LIGHT theme — formularios fondo blanco, todo el texto NEGRO ULTRA */
:root[data-theme-effective="light"] .pos-tab-container,
:root[data-theme-effective="light"] .pos-tab-menu,
:root[data-theme-effective="light"] .pos-tab-menu .list-group-item,
:root[data-theme-effective="light"] .nav-tabs-custom,
:root[data-theme-effective="light"] .form-control,
:root[data-theme-effective="light"] select.form-control,
:root[data-theme-effective="light"] textarea.form-control,
:root[data-theme-effective="light"] input.form-control,
[data-theme-effective="light"] .pos-tab-container,
[data-theme-effective="light"] .pos-tab-menu,
[data-theme-effective="light"] .pos-tab-menu .list-group-item,
[data-theme-effective="light"] .nav-tabs-custom,
[data-theme-effective="light"] .form-control,
[data-theme-effective="light"] select.form-control,
[data-theme-effective="light"] textarea.form-control,
[data-theme-effective="light"] input.form-control {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-color: rgba(0,0,0,0.15) !important;
}
:root[data-theme-effective="light"] .control-label,
:root[data-theme-effective="light"] label,
:root[data-theme-effective="light"] .pos-tab-menu .list-group-item,
[data-theme-effective="light"] .control-label,
[data-theme-effective="light"] label,
[data-theme-effective="light"] .pos-tab-menu .list-group-item {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
:root[data-theme-effective="light"] .pos-tab-menu .list-group-item.active,
[data-theme-effective="light"] .pos-tab-menu .list-group-item.active {
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-left: 3px solid #0284c7 !important;
}

/* DARK theme — formularios fondo glass, todo el texto BLANCO ULTRA */
:root[data-theme-effective="dark"] .pos-tab-container,
:root[data-theme-effective="dark"] .pos-tab-menu,
:root[data-theme-effective="dark"] .pos-tab-menu .list-group-item,
:root[data-theme-effective="dark"] .nav-tabs-custom,
[data-theme-effective="dark"] .pos-tab-container,
[data-theme-effective="dark"] .pos-tab-menu,
[data-theme-effective="dark"] .pos-tab-menu .list-group-item,
[data-theme-effective="dark"] .nav-tabs-custom {
  background: linear-gradient(160deg, rgba(10,13,31,0.85), rgba(18,21,48,0.78)) !important;
  background-color: rgba(10,13,31,0.85) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(0,229,255,0.18) !important;
}
:root[data-theme-effective="dark"] .form-control,
:root[data-theme-effective="dark"] select.form-control,
:root[data-theme-effective="dark"] textarea.form-control,
:root[data-theme-effective="dark"] input.form-control,
[data-theme-effective="dark"] .form-control,
[data-theme-effective="dark"] select.form-control,
[data-theme-effective="dark"] textarea.form-control,
[data-theme-effective="dark"] input.form-control {
  background: rgba(18,21,48,0.65) !important;
  background-color: rgba(18,21,48,0.65) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(0,229,255,0.30) !important;
}
:root[data-theme-effective="dark"] .control-label,
:root[data-theme-effective="dark"] label,
:root[data-theme-effective="dark"] .pos-tab-menu .list-group-item,
[data-theme-effective="dark"] .control-label,
[data-theme-effective="dark"] label,
[data-theme-effective="dark"] .pos-tab-menu .list-group-item {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:root[data-theme-effective="dark"] .pos-tab-menu .list-group-item.active,
[data-theme-effective="dark"] .pos-tab-menu .list-group-item.active {
  background: linear-gradient(120deg, rgba(0,229,255,0.18), rgba(124,58,237,0.16)) !important;
  background-color: rgba(0,229,255,0.18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-left: 3px solid #00e5ff !important;
}

/* "Configuración de la empresa" page header h1 — respeta tema */
:root[data-theme-effective="light"] .content-header h1,
:root[data-theme-effective="light"] .content-header h1 *,
[data-theme-effective="light"] .content-header h1,
[data-theme-effective="light"] .content-header h1 * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
:root[data-theme-effective="dark"] .content-header h1,
:root[data-theme-effective="dark"] .content-header h1 *,
[data-theme-effective="dark"] .content-header h1,
[data-theme-effective="dark"] .content-header h1 * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v887 · TOPBAR ULTRA-CONTRAST REINFORCEMENT
   Si las clases de Tailwind tw-text-white / tw-text-gray-* siguen ganando
   por inline o cascade order, esto las aplasta con MAX especificidad
   (html + body + atributo) + filter contrast/brightness para que iconos
   y letras "salten" del fondo sin opacidad fade ni gris muerto.
   ══════════════════════════════════════════════════════════════════════ */

/* ── LIGHT theme — ultra-NEGRO con boost de crispness en iconos ───────── */
html[data-theme-effective="light"] body [data-fxl-topbar="1"],
html[data-theme-effective="light"] body [data-fxl-topbar="1"] *,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
/* Texto bold en light para extra punch */
html[data-theme-effective="light"] body [data-fxl-topbar="1"] span:not(.tw-sr-only),
html[data-theme-effective="light"] body [data-fxl-topbar="1"] summary,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] a,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] span:not(.tw-sr-only),
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] summary,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] a {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
/* SVG icons en light — todo currentColor + atributos hex */
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg *,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg [stroke],
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg [fill],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg *,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg [stroke],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg [fill] {
  color: #000000 !important;
  stroke: #000000 !important;
  filter: contrast(1.4) drop-shadow(0 0 0.5px rgba(0,0,0,0.6));
  opacity: 1 !important;
}
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg [fill="none"],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg [fill="none"] {
  fill: none !important;   /* preservar el "outline only" de Tabler icons */
}
/* SVG con fill explícito (currentColor) → negro */
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg [fill="currentColor"],
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg [fill="white"],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg [fill="currentColor"],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg [fill="white"] {
  fill: #000000 !important;
}
/* FontAwesome explícito */
html[data-theme-effective="light"] body [data-fxl-topbar="1"] i.fa,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] i.fas,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] i.far,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] i.fab,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] i[class*=" fa-"],
html[data-theme-effective="light"] body [data-fxl-topbar="1"] i[class^="fa-"],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] i.fa,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] i.fas,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] i.far,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] i.fab,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] i[class*=" fa-"],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] i[class^="fa-"] {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: 0 0 1px rgba(0,0,0,0.4);
}

/* ── DARK theme — ultra-BLANCO con boost neón ─────────────────────────── */
html[data-theme-effective="dark"] body [data-fxl-topbar="1"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 0 1px rgba(255,255,255,0.85), 0 0 6px rgba(0,229,255,0.18);
}
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] span:not(.tw-sr-only),
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] summary,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] a {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg *,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg [stroke],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg [fill] {
  color: #ffffff !important;
  stroke: #ffffff !important;
  filter: contrast(1.3) drop-shadow(0 0 1px rgba(255,255,255,0.9));
  opacity: 1 !important;
}
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg [fill="none"] {
  fill: none !important;
}
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg [fill="currentColor"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg [fill="white"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg [fill="black"] {
  fill: #ffffff !important;
}
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] i.fa,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] i.fas,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] i.far,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] i.fab,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] i[class*=" fa-"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] i[class^="fa-"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 4px rgba(0,229,255,0.40);
}

/* ── Excepciones honradas: pills coloridos preservan sus colores ──────── */
html[data-theme-effective="light"] body [data-fxl-topbar="1"] .btn-success,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] .btn-success *,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] [class*="tw-bg-green"],
html[data-theme-effective="light"] body [data-fxl-topbar="1"] [class*="tw-bg-green"] *,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] [class*="tw-bg-emerald"],
html[data-theme-effective="light"] body [data-fxl-topbar="1"] [class*="tw-bg-emerald"] *,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] .btn-success,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] .btn-success *,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] [class*="tw-bg-green"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] [class*="tw-bg-green"] *,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] [class*="tw-bg-emerald"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] [class*="tw-bg-emerald"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  stroke: #ffffff !important;
  fill: #ffffff !important;
  text-shadow: none;
}
html[data-theme-effective="light"] body [data-fxl-topbar="1"] .btn-success svg [fill="none"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] .btn-success svg [fill="none"],
html[data-theme-effective="light"] body [data-fxl-topbar="1"] [class*="tw-bg-green"] svg [fill="none"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] [class*="tw-bg-green"] svg [fill="none"] {
  fill: none !important;
}

/* Status dot indicator (online/offline) preserva su color verde/rojo */
html[data-theme-effective="light"] body [data-fxl-topbar="1"] .status-dot,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] .status-dot {
  background-color: currentColor !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v888 · TOPBAR — FONDOS VISIBLES + STROKE GRUESO para iconos que SALTAN
   ══════════════════════════════════════════════════════════════════════
   El v887 ponía letras/iconos negros/blancos pero los botones del topbar
   tenían fondo casi transparente (4-6% opacity) → los iconos se "perdían"
   en el fondo del topbar. Ahora los botones tienen fondo SÓLIDO visible
   con borde definido, y el SVG tiene stroke-width forzado a 2.5px para
   que cada línea sea visible aunque sea pequeña.
   ══════════════════════════════════════════════════════════════════════ */

/* ── LIGHT theme — botones blancos GRIS-CLARO sólido + borde negro fino · iconos ULTRA NEGROS ─ */
html[data-theme-effective="light"] body [data-fxl-topbar="1"] button,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] a,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] summary,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] details > summary,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] button,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] a,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] summary,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] details > summary {
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  background-image: none !important;
  border: 1px solid rgba(0,0,0,0.20) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.04) !important;
}
html[data-theme-effective="light"] body [data-fxl-topbar="1"] button:hover,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] a:hover,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] summary:hover,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] button:hover,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] a:hover,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] summary:hover {
  background: #e5e7eb !important;
  background-color: #e5e7eb !important;
  border-color: rgba(0,0,0,0.35) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px);
}

/* ── DARK theme — botones glass cyan + borde neón · iconos ULTRA BLANCOS ─ */
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] button,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] a,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] summary,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] details > summary {
  background: rgba(0,229,255,0.10) !important;
  background-color: rgba(0,229,255,0.10) !important;
  background-image: none !important;
  border: 1px solid rgba(0,229,255,0.45) !important;
  box-shadow: 0 0 12px rgba(0,229,255,0.22), inset 0 0 6px rgba(0,229,255,0.10) !important;
}
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] button:hover,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] a:hover,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] summary:hover {
  background: rgba(0,229,255,0.20) !important;
  background-color: rgba(0,229,255,0.20) !important;
  border-color: rgba(0,229,255,0.75) !important;
  box-shadow: 0 0 22px rgba(0,229,255,0.45), inset 0 0 10px rgba(0,229,255,0.20) !important;
  transform: translateY(-1px);
}

/* ── SVG icons — STROKE GRUESO + COLOR PURO (gana sobre stroke-width="1.5") ── */
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg path,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg line,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg rect,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg circle,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] svg polyline,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg path,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg line,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg rect,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg circle,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] svg polyline {
  stroke: #000000 !important;
  stroke-width: 2.4 !important;
  color: #000000 !important;
  opacity: 1 !important;
}
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg path,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg line,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg rect,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg circle,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] svg polyline {
  stroke: #ffffff !important;
  stroke-width: 2.4 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* fill="none" preservado siempre — Tabler icons son outline-only */
[data-fxl-topbar="1"] svg [fill="none"],
[data-fxl-topbar="1"] svg path[fill="none"] {
  fill: none !important;
}

/* ── Excepción: pills de fondo colorido (POS verde) preservan su look ── */
html[data-theme-effective="light"] body [data-fxl-topbar="1"] .btn-success,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] [class*="tw-bg-green"],
html[data-theme-effective="light"] body [data-fxl-topbar="1"] [class*="tw-bg-emerald"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] .btn-success,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] [class*="tw-bg-green"],
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] [class*="tw-bg-emerald"],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] .btn-success,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] [class*="tw-bg-green"],
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] [class*="tw-bg-emerald"] {
  background: linear-gradient(120deg, #00ff87, #047857) !important;
  background-color: #00ff87 !important;
  background-image: linear-gradient(120deg, #00ff87, #047857) !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(0,255,135,0.30) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme-effective="light"] body [data-fxl-topbar="1"] .btn-success svg,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] .btn-success svg *,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] [class*="tw-bg-green"] svg,
html[data-theme-effective="light"] body [data-fxl-topbar="1"] [class*="tw-bg-green"] svg *,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] .btn-success svg,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] .btn-success svg *,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] [class*="tw-bg-green"] svg,
html[data-theme-effective="dark"] body [data-fxl-topbar="1"] [class*="tw-bg-green"] svg *,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] .btn-success svg,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] .btn-success svg *,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] [class*="tw-bg-green"] svg,
html:not([data-theme-effective="dark"]) body [data-fxl-topbar="1"] [class*="tw-bg-green"] svg * {
  stroke: #ffffff !important;
  fill: #ffffff !important;
  color: #ffffff !important;
}
[data-fxl-topbar="1"] .btn-success svg [fill="none"],
[data-fxl-topbar="1"] [class*="tw-bg-green"] svg [fill="none"] {
  fill: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v889 · POS / REMISION — fondos respetan el tema (fas fa-moon)
   ══════════════════════════════════════════════════════════════════════
   La vista POS (/pos/create, /pos/payment) y la de remisión
   (/remision/create) usan paneles con fondos hardcoded (tw-bg-white,
   box-body, pos-products, pos-items-totals, tw-bg-gradient topbar).
   En tema light esos paneles ya se ven blancos pero el texto puede
   quedar gris fade. En tema dark los paneles siguen blancos → texto
   negro sobre blanco no respeta el tema.

   Solución: reglas theme-aware con alta especificidad que reescriben
     • LIGHT → fondo blanco PURO + texto NEGRO ULTRA
     • DARK  → fondo glass oscuro + texto BLANCO ULTRA
   Excepción: pills/badges con bg colorido propio (verde, ámbar) y
   gradients de marca (purple "Agregar Egresos", green POS) preservan
   su look.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Selectores que cubren los paneles del POS/remision ──────────────── */

/* LIGHT theme — fondo blanco puro + texto negro ULTRA */
html[data-theme-effective="light"] body .pos-products,
html[data-theme-effective="light"] body .pos-items-totals,
html[data-theme-effective="light"] body pos-items-totals,
html[data-theme-effective="light"] body .pos-form-actions,
html[data-theme-effective="light"] body .product_table,
html[data-theme-effective="light"] body table#product_list,
html[data-theme-effective="light"] body .cart-section,
html[data-theme-effective="light"] body .cart-section .panel,
html[data-theme-effective="light"] body .pos-tab-container .tab-pane,
html[data-theme-effective="light"] body .box-body,
html[data-theme-effective="light"] body .modal-content,
html:not([data-theme-effective="dark"]) body .pos-products,
html:not([data-theme-effective="dark"]) body .pos-items-totals,
html:not([data-theme-effective="dark"]) body pos-items-totals,
html:not([data-theme-effective="dark"]) body .pos-form-actions,
html:not([data-theme-effective="dark"]) body .product_table,
html:not([data-theme-effective="dark"]) body table#product_list,
html:not([data-theme-effective="dark"]) body .cart-section,
html:not([data-theme-effective="dark"]) body .pos-tab-container .tab-pane,
html:not([data-theme-effective="dark"]) body .box-body,
html:not([data-theme-effective="dark"]) body .modal-content {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
/* Texto descendiente — fuerza negro ULTRA salvo en botones/pills coloridos */
html[data-theme-effective="light"] body .pos-products *:not(button):not(.btn):not(.label):not(.badge):not([class*="tw-bg-green"]):not([class*="tw-bg-purple"]):not([class*="tw-bg-blue"]):not([class*="tw-bg-red"]):not([class*="tw-bg-yellow"]):not([class*="tw-bg-indigo"]):not([class*="tw-bg-gradient"]):not(.pos-suspended-mini-btn):not(.pos-suspended-mini-btn *),
html[data-theme-effective="light"] body .pos-items-totals *:not(button):not(.btn):not(.label):not(.badge):not([class*="tw-bg-green"]):not([class*="tw-bg-purple"]):not([class*="tw-bg-blue"]):not([class*="tw-bg-red"]):not([class*="tw-bg-yellow"]):not([class*="tw-bg-indigo"]):not([class*="tw-bg-gradient"]):not(.pos-suspended-mini-btn):not(.pos-suspended-mini-btn *),
html:not([data-theme-effective="dark"]) body .pos-products *:not(button):not(.btn):not(.label):not(.badge):not([class*="tw-bg-green"]):not([class*="tw-bg-purple"]):not([class*="tw-bg-blue"]):not([class*="tw-bg-red"]):not([class*="tw-bg-yellow"]):not([class*="tw-bg-indigo"]):not([class*="tw-bg-gradient"]):not(.pos-suspended-mini-btn):not(.pos-suspended-mini-btn *),
html:not([data-theme-effective="dark"]) body .pos-items-totals *:not(button):not(.btn):not(.label):not(.badge):not([class*="tw-bg-green"]):not([class*="tw-bg-purple"]):not([class*="tw-bg-blue"]):not([class*="tw-bg-red"]):not([class*="tw-bg-yellow"]):not([class*="tw-bg-indigo"]):not([class*="tw-bg-gradient"]):not(.pos-suspended-mini-btn):not(.pos-suspended-mini-btn *) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
/* Tablas dentro del POS en light — headers tinte sky, hover row tinte */
html[data-theme-effective="light"] body .pos-products table thead th,
html[data-theme-effective="light"] body .product_table thead th,
html:not([data-theme-effective="dark"]) body .pos-products table thead th,
html:not([data-theme-effective="dark"]) body .product_table thead th {
  background: linear-gradient(180deg, rgba(2,132,199,0.10), rgba(2,132,199,0.02)) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-bottom: 1px solid rgba(0,0,0,0.10) !important;
}
html[data-theme-effective="light"] body .pos-products table tbody tr:hover td,
html[data-theme-effective="light"] body .product_table tbody tr:hover td,
html:not([data-theme-effective="dark"]) body .pos-products table tbody tr:hover td,
html:not([data-theme-effective="dark"]) body .product_table tbody tr:hover td {
  background: rgba(2,132,199,0.06) !important;
}
/* Inputs / selects en POS light */
html[data-theme-effective="light"] body .pos-products input.form-control,
html[data-theme-effective="light"] body .pos-products select.form-control,
html[data-theme-effective="light"] body .pos-items-totals input.form-control,
html[data-theme-effective="light"] body .pos-items-totals select.form-control,
html:not([data-theme-effective="dark"]) body .pos-products input.form-control,
html:not([data-theme-effective="dark"]) body .pos-products select.form-control,
html:not([data-theme-effective="dark"]) body .pos-items-totals input.form-control,
html:not([data-theme-effective="dark"]) body .pos-items-totals select.form-control {
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}

/* DARK theme — fondo glass oscuro + texto BLANCO ULTRA */
html[data-theme-effective="dark"] body .pos-products,
html[data-theme-effective="dark"] body .pos-items-totals,
html[data-theme-effective="dark"] body pos-items-totals,
html[data-theme-effective="dark"] body .pos-form-actions,
html[data-theme-effective="dark"] body .product_table,
html[data-theme-effective="dark"] body table#product_list,
html[data-theme-effective="dark"] body .cart-section,
html[data-theme-effective="dark"] body .cart-section .panel,
html[data-theme-effective="dark"] body .pos-tab-container .tab-pane,
html[data-theme-effective="dark"] body .box-body,
html[data-theme-effective="dark"] body .modal-content {
  background: linear-gradient(160deg, rgba(10,13,31,0.92), rgba(18,21,48,0.85)) !important;
  background-color: rgba(10,13,31,0.92) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(0,229,255,0.18);
}
html[data-theme-effective="dark"] body .pos-products *:not(button):not(.btn):not(.label):not(.badge):not([class*="tw-bg-green"]):not([class*="tw-bg-purple"]):not([class*="tw-bg-blue"]):not([class*="tw-bg-red"]):not([class*="tw-bg-yellow"]):not([class*="tw-bg-indigo"]):not([class*="tw-bg-gradient"]):not(.pos-suspended-mini-btn):not(.pos-suspended-mini-btn *),
html[data-theme-effective="dark"] body .pos-items-totals *:not(button):not(.btn):not(.label):not(.badge):not([class*="tw-bg-green"]):not([class*="tw-bg-purple"]):not([class*="tw-bg-blue"]):not([class*="tw-bg-red"]):not([class*="tw-bg-yellow"]):not([class*="tw-bg-indigo"]):not([class*="tw-bg-gradient"]):not(.pos-suspended-mini-btn):not(.pos-suspended-mini-btn *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme-effective="dark"] body .pos-products table thead th,
html[data-theme-effective="dark"] body .product_table thead th {
  background: linear-gradient(180deg, rgba(0,229,255,0.14), rgba(0,229,255,0.04)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-bottom: 1px solid rgba(0,229,255,0.30) !important;
}
html[data-theme-effective="dark"] body .pos-products table tbody tr:hover td,
html[data-theme-effective="dark"] body .product_table tbody tr:hover td {
  background: rgba(0,229,255,0.08) !important;
}
html[data-theme-effective="dark"] body .pos-products input.form-control,
html[data-theme-effective="dark"] body .pos-products select.form-control,
html[data-theme-effective="dark"] body .pos-items-totals input.form-control,
html[data-theme-effective="dark"] body .pos-items-totals select.form-control {
  background: rgba(18,21,48,0.65) !important;
  background-color: rgba(18,21,48,0.65) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(0,229,255,0.30) !important;
}
/* Placeholders en dark — más visibles */
html[data-theme-effective="dark"] body .pos-products input::placeholder,
html[data-theme-effective="dark"] body .pos-items-totals input::placeholder {
  color: rgba(255,255,255,0.55) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
}

/* ── Cabecera tipo "FAXILPOS Colombia / Punto de Venta" en el cart ────── */
/* En light queda blanca con texto negro; en dark vidrio oscuro con texto blanco */
html[data-theme-effective="light"] body .pos-items-totals .tw-bg-gradient-to-r,
html:not([data-theme-effective="dark"]) body .pos-items-totals .tw-bg-gradient-to-r {
  /* preserva el gradient pero asegura texto blanco encima */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Bloque "REMISION" verde del banner — preserva verde original ────── */
html[data-theme-effective="light"] body .v76-rm-bar,
html[data-theme-effective="light"] body .v76-rm-bar *,
html[data-theme-effective="dark"] body .v76-rm-bar,
html[data-theme-effective="dark"] body .v76-rm-bar * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Box-solid (cajas con titulares) ──────────────────────────────────── */
html[data-theme-effective="light"] body .box.box-solid,
html:not([data-theme-effective="dark"]) body .box.box-solid {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
html[data-theme-effective="light"] body .box.box-solid > .box-header,
html:not([data-theme-effective="dark"]) body .box.box-solid > .box-header {
  background: linear-gradient(180deg, rgba(2,132,199,0.06), transparent) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
html[data-theme-effective="dark"] body .box.box-solid {
  background: linear-gradient(160deg, rgba(10,13,31,0.90), rgba(18,21,48,0.82)) !important;
  border: 1px solid rgba(0,229,255,0.22) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), 0 0 18px rgba(0,229,255,0.12) !important;
}
html[data-theme-effective="dark"] body .box.box-solid > .box-header {
  background: linear-gradient(180deg, rgba(0,229,255,0.10), transparent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-bottom: 1px solid rgba(0,229,255,0.22) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v890 · DEBT BADGE + WARNING SIGNS — theme-aware
   ══════════════════════════════════════════════════════════════════════
   El letrero "⚠ DEBE $X" (.fxl-debt-badge) que aparece junto al cliente
   cuando tiene deuda, y los íconos sueltos fa-exclamation-triangle del
   POS, necesitan respetar el tema:
     • LIGHT → fondo blanco + texto/borde/ícono ROJO ULTRA
     • DARK  → fondo glass oscuro + borde/ícono rojo NEÓN BRILLANTE
              + texto BLANCO ULTRA para legibilidad
   ══════════════════════════════════════════════════════════════════════ */

/* ── LIGHT theme — badge con fondo blanco + rojo ULTRA ───────────────── */
html[data-theme-effective="light"] body .fxl-debt-badge,
html:not([data-theme-effective="dark"]) body .fxl-debt-badge {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  border: 1.5px solid #dc2626 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 1px 4px rgba(220,38,38,0.18);
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
html[data-theme-effective="light"] body .fxl-debt-badge i,
html[data-theme-effective="light"] body .fxl-debt-badge i.fa-exclamation-triangle,
html[data-theme-effective="light"] body .fxl-debt-badge .fxl-due-amount,
html:not([data-theme-effective="dark"]) body .fxl-debt-badge i,
html:not([data-theme-effective="dark"]) body .fxl-debt-badge i.fa-exclamation-triangle,
html:not([data-theme-effective="dark"]) body .fxl-debt-badge .fxl-due-amount {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  text-shadow: 0 0 2px rgba(220,38,38,0.40);
}
html[data-theme-effective="light"] body .fxl-debt-badge:hover,
html:not([data-theme-effective="dark"]) body .fxl-debt-badge:hover {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #b91c1c !important;
  box-shadow: 0 4px 14px rgba(220,38,38,0.42);
  text-shadow: 0 1px 0 rgba(0,0,0,0.30);
}
html[data-theme-effective="light"] body .fxl-debt-badge:hover i,
html[data-theme-effective="light"] body .fxl-debt-badge:hover .fxl-due-amount,
html:not([data-theme-effective="dark"]) body .fxl-debt-badge:hover i,
html:not([data-theme-effective="dark"]) body .fxl-debt-badge:hover .fxl-due-amount {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── DARK theme — badge glass + neón rojo + letras BLANCAS ───────────── */
html[data-theme-effective="dark"] body .fxl-debt-badge {
  background: linear-gradient(160deg, rgba(127,29,29,0.30), rgba(69,10,10,0.55)) !important;
  background-color: rgba(127,29,29,0.30) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1.5px solid #ef4444 !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  box-shadow:
    0 0 0 1px rgba(239,68,68,0.30) inset,
    0 0 12px rgba(239,68,68,0.45),
    0 0 24px rgba(239,68,68,0.25);
  text-shadow: 0 1px 0 rgba(0,0,0,0.65), 0 0 4px rgba(239,68,68,0.60);
  animation: fxl-debt-pulse 1.8s ease-in-out infinite;
}
html[data-theme-effective="dark"] body .fxl-debt-badge i,
html[data-theme-effective="dark"] body .fxl-debt-badge i.fa-exclamation-triangle {
  color: #ff6b6b !important;
  -webkit-text-fill-color: #ff6b6b !important;
  text-shadow: 0 0 6px rgba(255,107,107,0.85), 0 0 12px rgba(239,68,68,0.55);
}
html[data-theme-effective="dark"] body .fxl-debt-badge .fxl-due-amount {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55), 0 0 6px rgba(239,68,68,0.55);
}
html[data-theme-effective="dark"] body .fxl-debt-badge:hover {
  background: linear-gradient(160deg, rgba(239,68,68,0.55), rgba(220,38,38,0.75)) !important;
  background-color: rgba(220,38,38,0.75) !important;
  border-color: #fca5a5 !important;
  box-shadow:
    0 0 0 1px rgba(252,165,165,0.50) inset,
    0 0 22px rgba(239,68,68,0.75),
    0 0 44px rgba(239,68,68,0.45);
  transform: translateY(-1px);
}
@keyframes fxl-debt-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239,68,68,0.30) inset, 0 0 12px rgba(239,68,68,0.45), 0 0 24px rgba(239,68,68,0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(239,68,68,0.55) inset, 0 0 20px rgba(239,68,68,0.70), 0 0 36px rgba(239,68,68,0.45); }
}

/* ── Íconos fa-exclamation-triangle SUELTOS dentro del POS ─────────────
   (mensajes inline tipo "Faltan: $X", errores de carga de facturas) ── */
html[data-theme-effective="light"] body .pos-products i.fa-exclamation-triangle,
html[data-theme-effective="light"] body .pos-items-totals i.fa-exclamation-triangle,
html[data-theme-effective="light"] body .pos-form-actions i.fa-exclamation-triangle,
html[data-theme-effective="light"] body .text-danger i.fa-exclamation-triangle,
html:not([data-theme-effective="dark"]) body .pos-products i.fa-exclamation-triangle,
html:not([data-theme-effective="dark"]) body .pos-items-totals i.fa-exclamation-triangle,
html:not([data-theme-effective="dark"]) body .pos-form-actions i.fa-exclamation-triangle,
html:not([data-theme-effective="dark"]) body .text-danger i.fa-exclamation-triangle {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  text-shadow: 0 0 2px rgba(220,38,38,0.40);
}
html[data-theme-effective="dark"] body .pos-products i.fa-exclamation-triangle,
html[data-theme-effective="dark"] body .pos-items-totals i.fa-exclamation-triangle,
html[data-theme-effective="dark"] body .pos-form-actions i.fa-exclamation-triangle,
html[data-theme-effective="dark"] body .text-danger i.fa-exclamation-triangle {
  color: #ff6b6b !important;
  -webkit-text-fill-color: #ff6b6b !important;
  text-shadow: 0 0 6px rgba(255,107,107,0.85), 0 0 12px rgba(239,68,68,0.45);
}

/* ── Letreros de alerta tipo "info-box" o ".alert" ─────────────────────
   El POS muestra ocasionalmente cajas tipo info-box con triángulo de
   advertencia (ej. "denomination_mismatch", "could_not_load") — los
   pongo en glass dark con texto blanco en tema oscuro. ──────────────── */
html[data-theme-effective="dark"] body .alert.alert-warning,
html[data-theme-effective="dark"] body .alert.alert-danger,
html[data-theme-effective="dark"] body .info-box {
  background: linear-gradient(160deg, rgba(127,29,29,0.40), rgba(69,10,10,0.65)) !important;
  background-color: rgba(127,29,29,0.40) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(239,68,68,0.55) !important;
  box-shadow: 0 0 16px rgba(239,68,68,0.25);
}
html[data-theme-effective="dark"] body .alert.alert-warning *,
html[data-theme-effective="dark"] body .alert.alert-danger *,
html[data-theme-effective="dark"] body .info-box * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme-effective="dark"] body .alert.alert-info {
  background: linear-gradient(160deg, rgba(2,132,199,0.32), rgba(7,89,133,0.55)) !important;
  background-color: rgba(2,132,199,0.32) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(56,189,248,0.55) !important;
}
html[data-theme-effective="dark"] body .alert.alert-success {
  background: linear-gradient(160deg, rgba(22,163,74,0.35), rgba(20,83,45,0.60)) !important;
  background-color: rgba(22,163,74,0.35) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(74,222,128,0.55) !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-effective="dark"] body .fxl-debt-badge { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   v891 · POS-BTN-UNIFORM — paridad visual POS ↔ REMISIÓN
   ══════════════════════════════════════════════════════════════════════
   Los botones de acción de POS (FACTURA NUEVA, VER FACTURAS, CRÉDITO,
   CERRAR CAJA, ANULAR FACTURA…) y los de REMISIÓN (NUEVA REMISIÓN, VER
   REMISIONES, GUARDAR REMISIÓN, CANCELAR…) usan la misma clase
   .pos-btn-uniform. Esta capa fuerza letras + íconos ULTRA BLANCOS con
   sombra oscura nítida — independiente del background (verde, rojo,
   naranja, azul, gradient o sólido) — para que se lean idéntico en
   ambos módulos.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Botón completo ────────────────────────────────────────────────── */
body .pos-action-container .pos-btn-uniform,
body .pos-btn-uniform {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 3px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  /* Profundidad 3D: top highlight + inset bottom shadow para "click feel" */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -2px 0 rgba(0,0,0,0.20),
    0 2px 6px rgba(0,0,0,0.20) !important;
  transition: transform 160ms cubic-bezier(.22,1,.36,1), box-shadow 200ms ease, filter 200ms ease !important;
}
body .pos-btn-uniform:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 6px 14px rgba(0,0,0,0.28) !important;
  filter: brightness(1.06) saturate(1.08);
}
body .pos-btn-uniform:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

/* ── Label de texto (.btn-label-pos) ───────────────────────────────── */
body .pos-btn-uniform .btn-label-pos {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.70), 0 0 3px rgba(0,0,0,0.45) !important;
  opacity: 1 !important;
}

/* ── Icono FontAwesome dentro del botón ────────────────────────────── */
body .pos-btn-uniform i,
body .pos-btn-uniform i.fa,
body .pos-btn-uniform i.fas,
body .pos-btn-uniform i.far,
body .pos-btn-uniform i.fab {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65) !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.50));
  opacity: 1 !important;
}

/* ── EXCEPCIÓN: el botón "FACTURA 0107" tiene fondo BLANCO con número
      rojo — preserva su look porque es un display, no un CTA ─────── */
body .pos-btn-uniform#pos-factura-visual,
body #pos-factura-visual {
  color: #7f8c8d !important;
  -webkit-text-fill-color: #7f8c8d !important;
  text-shadow: none !important;
  background: #ffffff !important;
}
body #pos-factura-visual .live-factura-number,
body #pos-factura-visual .fxl-factura-num {
  color: #e74c3c !important;
  -webkit-text-fill-color: #e74c3c !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.50) !important;
}
/* DARK theme — el display de factura cambia a glass oscuro con números
   rojo neón para que respete el tema */
html[data-theme-effective="dark"] body #pos-factura-visual {
  background: linear-gradient(160deg, rgba(10,13,31,0.92), rgba(18,21,48,0.85)) !important;
  background-color: rgba(10,13,31,0.92) !important;
  color: rgba(255,255,255,0.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
  border-color: rgba(0,229,255,0.30) !important;
}
html[data-theme-effective="dark"] body #pos-factura-visual span:first-child {
  color: rgba(255,255,255,0.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
}
html[data-theme-effective="dark"] body #pos-factura-visual .live-factura-number,
html[data-theme-effective="dark"] body #pos-factura-visual .fxl-factura-num {
  color: #ff6b6b !important;
  -webkit-text-fill-color: #ff6b6b !important;
  text-shadow: 0 0 6px rgba(255,107,107,0.85), 0 0 14px rgba(239,68,68,0.50) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   V88.48 · Orphan select2 cleanup
   ──────────────────────────────────────────────────────────────────────
   Cuando dos elementos del DOM comparten el mismo id (caso: el
   <input type="hidden" id="invoice_layout_id"> de EDIT-MODE coexistiendo
   con el <select id="invoice_layout_id"> que vive dentro de
   #posSettingsModal), Select2 se inicializa sobre AMBOS — el SELECT real
   queda con su dropdown funcional dentro del modal, pero el INPUT hidden
   recibe un contenedor select2 "huérfano" que sólo renderiza un arrow
   vacío fuera de cualquier campo lógico. El usuario lo veía como una
   barra horizontal con flecha que no abría nada.
   Solución no-invasiva: hide cualquier .select2-container que sea
   sibling inmediato de un <input> hidden con select2-hidden-accessible.
   Mantenemos vivos todos los selects normales sin tocar JS ni el DOM
   server-side.
   ────────────────────────────────────────────────────────────────────── */
input[type="hidden"].select2-hidden-accessible + .select2-container {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v892 · POS-BTN-UNIFORM — Glass shine + glow uniforme POS↔Remisión
   ══════════════════════════════════════════════════════════════════════
   Refuerza el v891 con un layer ::before que dibuja un "shine" diagonal
   blanco translúcido sobre cada botón → efecto 3D vidrio premium
   idéntico en ambos módulos. Más text-shadow doble (negro nítido +
   color glow) para letras que SALTAN sin importar el background.
   ══════════════════════════════════════════════════════════════════════ */

body .pos-btn-uniform {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Top glass shine — luz diagonal blanca translúcida fija que da volumen */
body .pos-btn-uniform::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.06) 30%,
    rgba(255,255,255,0.00) 55%,
    rgba(0,0,0,0.12) 100%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
/* Sweep shine en hover — un haz blanco diagonal cruza el botón */
body .pos-btn-uniform::after {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0.30) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 600ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
body .pos-btn-uniform:hover::after {
  left: 150%;
}
/* El contenido del botón (icono + label) por encima de los overlays */
body .pos-btn-uniform > * {
  position: relative;
  z-index: 2;
}

/* Label + icono — text-shadow doble (negro nítido + glow leve) idéntico
   para que el contraste sea pixel-perfect entre POS y Remisión */
body .pos-btn-uniform .btn-label-pos {
  text-shadow:
    0 1px 1px rgba(0,0,0,0.75),
    0 0 3px rgba(0,0,0,0.50),
    0 0 6px rgba(255,255,255,0.15) !important;
}
body .pos-btn-uniform i,
body .pos-btn-uniform i.fa,
body .pos-btn-uniform i.fas {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.75),
    0 0 4px rgba(0,0,0,0.50) !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.60)) brightness(1.08) !important;
}

/* Hover global — más brightness/saturation para "popping" idéntico */
body .pos-btn-uniform:hover {
  filter: brightness(1.10) saturate(1.12) !important;
}

/* Excepción: el display #pos-factura-visual no tiene ni shine ni sweep */
body #pos-factura-visual::before,
body #pos-factura-visual::after { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   v893 · LETRERO LED MARQUEE — verde neón forzado con CRT glow real
   ══════════════════════════════════════════════════════════════════════
   El letrero scrolling "🚀 BIENVENIDO EQUIPO EL MAYORISTA 💥 HOY ROMPEMOS
   METAS DE VENTAS 🎯" del módulo PosCustom (`.fxl-marquee-neon` y
   `.valla-led-box`) debe lucir verde neón con glow CRT auténtico —
   independiente de qué color guardó el usuario en POS Settings.
   ══════════════════════════════════════════════════════════════════════ */

body .fxl-marquee-neon,
body .valla-led-box {
  color: #39ff14 !important;
  -webkit-text-fill-color: #39ff14 !important;
  background-color: #000000 !important;
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.85),
    inset 0 0 24px rgba(57,255,20,0.10),
    0 0 14px rgba(57,255,20,0.32),
    0 0 28px rgba(57,255,20,0.20) !important;
  border: 2px inset #1a3a0c !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
}

/* El texto interior (que es el que recibe el scroll animation) hereda
   el color pero le metemos un text-shadow brutal para que parezca
   verdaderamente un letrero LED de barrio */
body .fxl-marquee-neon > div,
body .fxl-marquee-neon *,
body .valla-led-box > div,
body .valla-led-box * {
  color: #39ff14 !important;
  -webkit-text-fill-color: #39ff14 !important;
  text-shadow:
    0 0 2px #ccffaa,
    0 0 5px #39ff14,
    0 0 10px #39ff14,
    0 0 18px rgba(57,255,20,0.95),
    0 0 30px rgba(57,255,20,0.65),
    0 0 50px rgba(57,255,20,0.35) !important;
  font-weight: 900 !important;
}

/* Subtle flicker animation — como un tubo de neón viejo
   (3% del tiempo se atenúa ligeramente, no es epiléptico) */
@keyframes fxl-neon-flicker {
  0%, 97%, 100% { opacity: 1; filter: brightness(1); }
  97.5%         { opacity: 0.82; filter: brightness(0.88); }
  98%           { opacity: 1;    filter: brightness(1.08); }
  98.5%         { opacity: 0.88; filter: brightness(0.92); }
  99%           { opacity: 1;    filter: brightness(1); }
}
body .fxl-marquee-neon,
body .valla-led-box {
  animation: fxl-neon-flicker 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body .fxl-marquee-neon,
  body .valla-led-box { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   v894 · POS BRANDING CARD + paneles internos — contraste real por tema
   ══════════════════════════════════════════════════════════════════════
   Targets identificados con grep en pos_form.blade.php:
     .fxl-brand-card        → contenedor "FAXIL.POS COLOMBIA / Punto de Venta"
     .fxl-brand-title       → "FAXIL.POS COLOMBIA"
     .fxl-brand-sub         → "Punto de Venta" / "EDICIÓN POS"
     .fxl-badge-matrix      → "Matrix V14"
     .fxl-customer-panel    → panel cliente expandible
     .dataTables_info       → "MOSTRANDO DE 1 AL 10 DE 4.712 REGISTROS"
     .dataTables_paginate   → paginación POS

   En LIGHT → preserva el look celeste original (#eaf0fb) + texto negro
   En DARK  → glass oscuro con texto blanco ULTRA + acento cyan
   ══════════════════════════════════════════════════════════════════════ */

/* ── LIGHT theme — preserva el celeste original, refuerza contraste ──── */
html[data-theme-effective="light"] body .fxl-brand-card,
html:not([data-theme-effective="dark"]) body .fxl-brand-card {
  background: #eaf0fb !important;
  border-color: #b2bec3 !important;
}
html[data-theme-effective="light"] body .fxl-brand-title,
html:not([data-theme-effective="dark"]) body .fxl-brand-title {
  color: #0a0f1c !important;
  -webkit-text-fill-color: #0a0f1c !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
html[data-theme-effective="light"] body .fxl-brand-sub,
html:not([data-theme-effective="dark"]) body .fxl-brand-sub {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}
html[data-theme-effective="light"] body .fxl-badge-matrix,
html:not([data-theme-effective="dark"]) body .fxl-badge-matrix {
  background: #1a252f !important;
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  text-shadow: 0 0 4px rgba(56,189,248,0.45);
}

/* ── DARK theme — glass oscuro + letras BLANCAS ULTRA ─────────────── */
html[data-theme-effective="dark"] body .fxl-brand-card {
  background: linear-gradient(160deg, rgba(10,13,31,0.92), rgba(18,21,48,0.85)) !important;
  background-color: rgba(10,13,31,0.92) !important;
  border: 1px solid rgba(0,229,255,0.30) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 18px rgba(0,229,255,0.12) !important;
}
html[data-theme-effective="dark"] body .fxl-brand-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0,229,255,0.45), 0 1px 1px rgba(0,0,0,0.55);
}
html[data-theme-effective="dark"] body .fxl-brand-sub {
  color: rgba(255,255,255,0.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 0 3px rgba(0,229,255,0.30);
}
html[data-theme-effective="dark"] body .fxl-badge-matrix {
  background: rgba(0,229,255,0.18) !important;
  color: #00e5ff !important;
  -webkit-text-fill-color: #00e5ff !important;
  border-color: rgba(0,229,255,0.65) !important;
  text-shadow: 0 0 6px rgba(0,229,255,0.85), 0 0 12px rgba(0,229,255,0.50);
}

/* ── DataTables pagination + info ("MOSTRANDO DE 1 AL 10...") ─────── */
html[data-theme-effective="light"] body .dataTables_info,
html[data-theme-effective="light"] body .dataTables_length label,
html[data-theme-effective="light"] body .dataTables_filter label,
html:not([data-theme-effective="dark"]) body .dataTables_info,
html:not([data-theme-effective="dark"]) body .dataTables_length label,
html:not([data-theme-effective="dark"]) body .dataTables_filter label {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 700 !important;
}
html[data-theme-effective="dark"] body .dataTables_info,
html[data-theme-effective="dark"] body .dataTables_length label,
html[data-theme-effective="dark"] body .dataTables_filter label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 3px rgba(0,229,255,0.30);
}

/* ── Tabla del POS: encabezados (CODIGO/DESCRIPCION/STOCK/PRECIO/...) ── */
html[data-theme-effective="light"] body .pos-products table.dataTable thead th,
html[data-theme-effective="light"] body table.product_table thead th,
html:not([data-theme-effective="dark"]) body .pos-products table.dataTable thead th,
html:not([data-theme-effective="dark"]) body table.product_table thead th {
  background: linear-gradient(180deg, #f3f4f6, #e5e7eb) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  border-bottom: 2px solid #94a3b8 !important;
}
html[data-theme-effective="dark"] body .pos-products table.dataTable thead th,
html[data-theme-effective="dark"] body table.product_table thead th {
  background: linear-gradient(180deg, rgba(0,229,255,0.18), rgba(0,229,255,0.06)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 4px rgba(0,229,255,0.55);
  border-bottom: 2px solid rgba(0,229,255,0.45) !important;
}

/* ── Filas del POS — celdas (texto del producto, código, precio…) ─── */
html[data-theme-effective="light"] body .pos-products table.dataTable tbody td,
html[data-theme-effective="light"] body table.product_table tbody td,
html:not([data-theme-effective="dark"]) body .pos-products table.dataTable tbody td,
html:not([data-theme-effective="dark"]) body table.product_table tbody td {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 600;
}
html[data-theme-effective="dark"] body .pos-products table.dataTable tbody td,
html[data-theme-effective="dark"] body table.product_table tbody td {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}

/* ── Botón "Anterior / Proximo" (paginación de la tabla del POS) ──── */
html[data-theme-effective="light"] body button:has(> :is(span):contains("Anterior")),
html[data-theme-effective="light"] body button:has(> :is(span):contains("Proximo")) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
/* (los :has + :contains no son universales — el siguiente bloque cubre
   los botones por clase más común) */
html[data-theme-effective="light"] body .paginate_button,
html:not([data-theme-effective="dark"]) body .paginate_button {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  font-weight: 700 !important;
}
html[data-theme-effective="light"] body .paginate_button.current,
html[data-theme-effective="light"] body .paginate_button:hover,
html:not([data-theme-effective="dark"]) body .paginate_button.current,
html:not([data-theme-effective="dark"]) body .paginate_button:hover {
  background: linear-gradient(120deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme-effective="dark"] body .paginate_button {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(18,21,48,0.65) !important;
  border: 1px solid rgba(0,229,255,0.30) !important;
  font-weight: 700 !important;
}
html[data-theme-effective="dark"] body .paginate_button.current,
html[data-theme-effective="dark"] body .paginate_button:hover {
  background: linear-gradient(120deg, #00e5ff, #7c3aed) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(0,229,255,0.45);
}

/* ── Etiquetas de cliente "NIT/CC:", "NOMBRE:" en la cart panel ───── */
html[data-theme-effective="light"] body .fxl-nit-row,
html[data-theme-effective="light"] body .fxl-nombre-row,
html[data-theme-effective="light"] body .fxl-nit-label,
html[data-theme-effective="light"] body .fxl-nombre-label,
html:not([data-theme-effective="dark"]) body .fxl-nit-row,
html:not([data-theme-effective="dark"]) body .fxl-nombre-row,
html:not([data-theme-effective="dark"]) body .fxl-nit-label,
html:not([data-theme-effective="dark"]) body .fxl-nombre-label {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
html[data-theme-effective="dark"] body .fxl-nit-row,
html[data-theme-effective="dark"] body .fxl-nombre-row,
html[data-theme-effective="dark"] body .fxl-nit-label,
html[data-theme-effective="dark"] body .fxl-nombre-label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55);
}

/* ── Línea "ASESOR · PH D RODOLFO" + "Mis Ventas" + "Alertas Stock Bajo" ─ */
html[data-theme-effective="light"] body #fxl-asesor-bar,
html[data-theme-effective="light"] body #fxl-asesor-bar *,
html:not([data-theme-effective="dark"]) body #fxl-asesor-bar,
html:not([data-theme-effective="dark"]) body #fxl-asesor-bar * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
html[data-theme-effective="dark"] body #fxl-asesor-bar,
html[data-theme-effective="dark"] body #fxl-asesor-bar * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v895 · THEME-TOGGLE FAB removido a pedido del usuario
   ══════════════════════════════════════════════════════════════════════
   "el tema para cambiar color no serve dejarlo asi" — usuario, 2026-05-10.
   El sistema queda en su estado actual perfecto. Esta regla refuerza
   la eliminación del FAB hecha en fxl-theme.js (belt + suspenders por
   si algún cache de navegador retiene el botón viejo).
   ══════════════════════════════════════════════════════════════════════ */
#fxl-fab-theme,
.fxl-fab-theme,
#fxl-theme-menu {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v896 · ÚLTIMA PASADA — refuerzo de contraste agresivo en sidebar POS
   ══════════════════════════════════════════════════════════════════════
   Cualquier label/badge/pill/small dentro del valla-wrapper o sobre la
   tarjeta cliente que se vea con texto fade. Garantiza letras visibles
   sin importar el background colorido.
   ══════════════════════════════════════════════════════════════════════ */

/* ── ASESOR bar (top de la cart panel) — letras ultra-visibles ─────── */
body #fxl-asesor-bar,
body #fxl-asesor-bar span,
body #fxl-asesor-bar a,
body #fxl-asesor-bar small,
body #fxl-asesor-bar i,
body .fxl-asesor-bar,
body .fxl-asesor-bar * {
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.55), 0 0 3px rgba(0,0,0,0.35) !important;
  opacity: 1 !important;
}
html[data-theme-effective="light"] body #fxl-asesor-bar,
html[data-theme-effective="light"] body #fxl-asesor-bar *,
html:not([data-theme-effective="dark"]) body #fxl-asesor-bar,
html:not([data-theme-effective="dark"]) body #fxl-asesor-bar * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 0 2px rgba(0,0,0,0.30) !important;
}
html[data-theme-effective="dark"] body #fxl-asesor-bar,
html[data-theme-effective="dark"] body #fxl-asesor-bar * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 3px rgba(0,229,255,0.45), 0 1px 1px rgba(0,0,0,0.65) !important;
}

/* ── Botón CAMBIAR del asesor bar — pill cyan visible ───────────── */
body #fxl-asesor-cambiar,
body .fxl-asesor-cambiar,
body button[onclick*="cambiarAsesor"],
body a[onclick*="cambiarAsesor"] {
  background: linear-gradient(120deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
  border: 0 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(2,132,199,0.35) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.50) !important;
}

/* ── Pills "0 Mis Ventas" + "Alertas Stock Bajo" del asesor bar ──── */
body #fxl-asesor-bar [class*="badge"],
body #fxl-asesor-bar [class*="label"],
body #fxl-asesor-bar .pill,
body .fxl-asesor-pill {
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.50) !important;
}

/* ── "Alertas Stock Bajo" icono warning — ámbar visible ────────── */
body #fxl-asesor-bar i.fa-exclamation-triangle,
body #fxl-asesor-bar .text-warning,
body #fxl-asesor-bar [style*="warning"],
body #fxl-asesor-bar [style*="orange"],
body #fxl-asesor-bar [style*="#ffa"],
body #fxl-asesor-bar [style*="#f39"] {
  color: #ffa500 !important;
  -webkit-text-fill-color: #ffa500 !important;
  text-shadow: 0 0 4px rgba(255,165,0,0.55), 0 1px 1px rgba(0,0,0,0.50) !important;
}

/* ── Cualquier label de status invisible (ej. pill "C00001" del NIT) ── */
body .fxl-nit-row span,
body .fxl-nit-row strong,
body #display_contact_id,
body .fxl-nombre-row strong,
body .fxl-nombre-row span {
  font-weight: 800 !important;
}
html[data-theme-effective="light"] body #display_contact_id,
html:not([data-theme-effective="dark"]) body #display_contact_id {
  color: #2e4053 !important;
  -webkit-text-fill-color: #2e4053 !important;
}
html[data-theme-effective="dark"] body #display_contact_id {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 4px rgba(0,229,255,0.55), 0 1px 1px rgba(0,0,0,0.55) !important;
}

/* ── Tooltip amarillo de las pills de venta suspendida (al hover) ── */
body .fxl-suspend-tooltip,
body [data-fxl-tooltip],
body .fxl-pos-tooltip {
  background: linear-gradient(160deg, rgba(254,243,199,0.98), rgba(252,211,77,0.92)) !important;
  color: #422006 !important;
  -webkit-text-fill-color: #422006 !important;
  font-weight: 700 !important;
  border: 1px solid #f59e0b !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.30) !important;
}
html[data-theme-effective="dark"] body .fxl-suspend-tooltip,
html[data-theme-effective="dark"] body [data-fxl-tooltip],
html[data-theme-effective="dark"] body .fxl-pos-tooltip {
  background: linear-gradient(160deg, rgba(120,53,15,0.95), rgba(69,26,3,0.96)) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #f59e0b !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.60), 0 0 14px rgba(245,158,11,0.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   v897 · PRODUCT-CATALOGUE admin — toolbars a la derecha + estilo neón
   ══════════════════════════════════════════════════════════════════════
   /product-catalogue/* admin pages (dashboard, banners, orders, reviews,
   coupons, settings, stock_alerts) tenían los CTA pegados a la izquierda.
   Esta capa alinea las filas de acción a la derecha (justify-content:
   flex-end) — consistente con /products toolbar — y les da el mismo
   neon CTA + glass shine + sticky-top.
   Scope: body.fxl-z-pc-admin (lo aplica el middleware en V89.12)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar principal: cualquier .d-flex.flex-wrap.gap-2 dentro de
      .box-body o directo en .row → alinear a la IZQUIERDA (V89.13:
      cambio de dirección a pedido del usuario "todo a la izquierda
      como los otros módulos"). ─────────────────────────────────────── */
body.fxl-z-pc-admin .container-fluid > .row > .col-12 > .box.box-solid > .box-body > .d-flex.flex-wrap.gap-2,
body.fxl-z-pc-admin .container-fluid > .row > .col-12 > .d-flex.flex-wrap.gap-2,
body.fxl-z-pc-admin .container-fluid .box-body > .d-flex.flex-wrap.gap-2,
body.fxl-z-pc-admin .container-fluid .d-flex.flex-wrap.gap-2 {
  justify-content: flex-start !important;
  align-items: center !important;
}

/* ── Single-button rows (Banners "Nuevo Banner", etc.) → izquierda ── */
body.fxl-z-pc-admin .container-fluid > .row.mb-3 > .col-12,
body.fxl-z-pc-admin .container-fluid > .row.mb-3 > [class*="col-"] {
  text-align: left !important;
}
/* Asegura que los <a class="btn"> sueltos también vayan a la izquierda */
body.fxl-z-pc-admin .container-fluid > .row.mb-3 > .col-12 > a.btn,
body.fxl-z-pc-admin .container-fluid > .row.mb-3 > .col-12 > button.btn {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ── Toolbar box wrapper — sticky + glass shine para premium feel ─── */
body.fxl-z-pc-admin .container-fluid > .row.mb-3 > .col-12 > .box.box-solid {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--sa-glass-bg-2, rgba(255,255,255,0.92)) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 6px 22px rgba(0,0,0,0.10), 0 0 18px rgba(2,132,199,0.08);
  animation: fxl-cat-reveal-up 0.55s cubic-bezier(.22,1,.36,1) 0.18s backwards;
}

/* ── Botones del marketplace admin — neon CTA consistente ─────────── */
body.fxl-z-pc-admin .btn.btn-primary,
body.fxl-z-pc-admin a.btn.btn-primary {
  background: linear-gradient(120deg, #0284c7, #0369a1) !important;
  background-image: linear-gradient(120deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(2,132,199,0.30), 0 0 12px rgba(99,102,241,0.20);
  transition: transform 180ms cubic-bezier(.22,1,.36,1), box-shadow 200ms ease;
}
body.fxl-z-pc-admin .btn.btn-primary:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 12px 26px rgba(2,132,199,0.45), 0 0 22px rgba(99,102,241,0.40);
  filter: brightness(1.08);
}
body.fxl-z-pc-admin .btn.btn-warning,
body.fxl-z-pc-admin a.btn.btn-warning {
  background: linear-gradient(120deg, #f59e0b, #ea580c) !important;
  background-image: linear-gradient(120deg, #f59e0b, #ea580c) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(245,158,11,0.30);
}
body.fxl-z-pc-admin .btn.btn-info,
body.fxl-z-pc-admin a.btn.btn-info {
  background: linear-gradient(120deg, #06b6d4, #0891b2) !important;
  background-image: linear-gradient(120deg, #06b6d4, #0891b2) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(6,182,212,0.30);
}
body.fxl-z-pc-admin .btn.btn-success,
body.fxl-z-pc-admin a.btn.btn-success {
  background: linear-gradient(120deg, #10b981, #059669) !important;
  background-image: linear-gradient(120deg, #10b981, #059669) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(16,185,129,0.30);
}
body.fxl-z-pc-admin .btn.btn-default,
body.fxl-z-pc-admin .btn.btn-secondary,
body.fxl-z-pc-admin a.btn.btn-default,
body.fxl-z-pc-admin a.btn.btn-secondary {
  background: linear-gradient(120deg, #64748b, #475569) !important;
  background-image: linear-gradient(120deg, #64748b, #475569) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(100,116,139,0.30);
}
body.fxl-z-pc-admin .btn.btn-danger,
body.fxl-z-pc-admin a.btn.btn-danger {
  background: linear-gradient(120deg, #ef4444, #b91c1c) !important;
  background-image: linear-gradient(120deg, #ef4444, #b91c1c) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(239,68,68,0.30);
}
body.fxl-z-pc-admin .btn:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.08);
}
body.fxl-z-pc-admin .btn:active {
  transform: scale(0.98);
}

/* ── Asegura que íconos dentro del btn estén blancos ───────────────── */
body.fxl-z-pc-admin .btn i,
body.fxl-z-pc-admin a.btn i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── h1 del page-header — peso 900 y letter-spacing para énfasis ───── */
body.fxl-z-pc-admin .content-header h1 {
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}

/* ── V89.14: elimina el margin-left:230px de AdminLTE legacy ──────────
   vendor.css tiene `.content-wrapper { margin-left: 230px }` heredado
   del AdminLTE original que asumía sidebar de 230px. El sidebar de
   FAXIL es Tailwind flex y ya ocupa su espacio en el layout — el 230px
   queda como hueco vacío a la izquierda. Lo reseteamos a 0. ──────── */
body.fxl-z-pc-admin .content-wrapper,
body.fxl-z-pc-admin .main-footer {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* Asegura que el container-fluid no añada padding-left excesivo */
body.fxl-z-pc-admin .content-wrapper .container-fluid {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
body.fxl-z-pc-admin .content-wrapper .content,
body.fxl-z-pc-admin .content-wrapper .content-header {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   END · MATRIX V87.7 (v897 toolbars · v89.14 content-wrapper gap fix)
   ══════════════════════════════════════════════════════════════════════ */