/* ═══════════════════════════════════════════════════════════════════
   CENTINELA DESIGN SYSTEM — v2.0
   Industrial Premium aesthetic. Anti-slop by design.
   Sources: Anthropic frontend-design, UI/UX Pro Max, Impeccable, Vercel.
   
   This file is loaded by ALL 22 templates. Changes here = global.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 0. TYPOGRAPHY: Google Fonts loaded via ux.js (not @import) ── */

/* ─── 1. DESIGN TOKENS OVERRIDE ──────────────────────────────── 
   Override system-ui/Inter fallbacks in ALL templates.
   Plus Jakarta Sans = geometric, premium, readable at small sizes.
   JetBrains Mono = data, REFs, technical values.
   ──────────────────────────────────────────────────────────────── */
:root {
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  /* Spacing scale (4px base) */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-2xl: 32px;
  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  /* Shadows (layered for depth) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.12);
  /* Transitions */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}

/* ─── 2. BASE RESETS & POLISH ────────────────────────────────── */
body {
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

/* Typography hierarchy */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Monospace for data values */
.kpi-val, .kpi-strip-val, .sem-val, .live-num,
td[style*="monospace"], [style*="font-family:monospace"],
.ref-link {
  font-family: var(--font-mono) !important;
}

/* Better links */
a { transition: color var(--duration-fast) var(--ease); }
a.ref-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
a.ref-link:hover { text-decoration: underline; }

/* ─── 3. ENHANCED TABLE STYLES ───────────────────────────────── */
table {
  font-variant-numeric: tabular-nums;
}
th {
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}
td {
  font-family: var(--font);
  transition: background var(--duration-fast) var(--ease);
}
tr:hover td {
  background: rgba(79, 143, 255, .03) !important;
}

/* ─── 4. CARD & PANEL POLISH ─────────────────────────────────── */
.panel, .sec, .shop-card, .mod-card, .kpi, .sem-card {
  transition: border-color var(--duration-normal) var(--ease),
              box-shadow var(--duration-normal) var(--ease),
              transform var(--duration-normal) var(--ease);
}
.panel:hover, .sec:hover {
  border-color: rgba(79, 143, 255, .15);
}

/* ─── 5. BUTTON REFINEMENT ───────────────────────────────────── */
button, .btn, [role="button"] {
  font-family: var(--font);
  transition: all var(--duration-fast) var(--ease);
}
button:active, .btn:active {
  transform: scale(0.97);
}

/* ─── 6. INPUT REFINEMENT ────────────────────────────────────── */
input, select, textarea {
  font-family: var(--font);
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent, #4f8fff) !important;
  box-shadow: 0 0 0 3px rgba(79, 143, 255, .1);
}

/* ─── 7. SCROLLBAR (subtle, dark-theme aware) ────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ─── 8. SELECTION ───────────────────────────────────────────── */
::selection { background: rgba(79, 143, 255, .25); color: inherit; }

/* ═══════════════════════════════════════════════════════════════════
   CENTINELA UX LAYER — v2.0 (research-backed enhancements below)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── EXISTING UX COMPONENTS BELOW ───────────────────────────── */
   References:
   - Miller (1956): 7±2 cognitive chunks
   - Fitts (1954): Touch target size ∝ accuracy
   - Doherty (1982): <400ms perceived responsiveness
   - Few (2006): Dashboard visual hierarchy
   - Nielsen (2006): Progressive disclosure
   - Healey (1996): Preattentive visual processing
   - Benedetto (2014): Medium-contrast fatigue reduction
   - Dyson (2004): Typography and reading comprehension
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. TYPOGRAPHY SYSTEM ────────────────────────────────────────
   Modular scale (ratio 1.25): 10 → 12.5 → 15.6 → 19.5 → 24.4 → 30.5
   8px baseline grid for vertical rhythm (Dyson 2004)
   ──────────────────────────────────────────────────────────────── */
:root {
  --ux-ts-xs: 10px;
  --ux-ts-sm: 11.5px;
  --ux-ts-base: 13px;
  --ux-ts-md: 15px;
  --ux-ts-lg: 19px;
  --ux-ts-xl: 24px;
  --ux-ts-xxl: 30px;
  --ux-lh-tight: 1.2;
  --ux-lh-base: 1.55;
  --ux-lh-relaxed: 1.7;
  --ux-space-unit: 8px;
  --ux-transition: .2s cubic-bezier(.4,0,.2,1);
  --ux-transition-slow: .35s cubic-bezier(.4,0,.2,1);
}

/* Base text rendering — sharper on all screens */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: var(--ux-lh-base);
}

/* ─── 2. SCROLL & FOCUS ──────────────────────────────────────────
   Smooth scroll reduces spatial disorientation (Nielsen 2000).
   Focus-visible: keyboard nav accessibility (WCAG 2.1 §2.4.7)
   ──────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth }

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
*:focus:not(:focus-visible) { outline: none }

/* ─── 3. TOUCH TARGETS ───────────────────────────────────────────
   Fitts's Law: min 44×44px for mobile (Apple HIG, Material 3).
   Applies to interactive elements globally.
   ──────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  a, button, select, [onclick], label[style*="cursor:pointer"],
  .sb-nav a, .mod-card, .alert-item, .top-btn, .sched-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Floating buttons have their own sizing — never deform them */
  #fnx-btn, .skin-picker-btn, .ux-break-btn,
  .n-input button, .skin-option, .skin-grid button {
    min-height: unset;
    display: flex;
  }
  select { min-height: 44px; padding: 8px 12px; font-size: 14px }
  .sb-nav a { padding: 10px 14px !important }
  input[type="text"], input[type="search"] { min-height: 48px; font-size: 16px !important }
}

/* ─── FLOATING NEXUS BUTTON (global) ─────────────────────────────
   Single source of truth for the floating Nexus AI button.
   Templates only need: <button id="fnx-btn" onclick="...">🧠</button>
   All visual styling is here — no inline CSS needed in templates.
   ──────────────────────────────────────────────────────────────── */
#fnx-btn {
  position: fixed; bottom: 20px; right: 20px;
  width: 48px; height: 48px; aspect-ratio: 1/1;
  border-radius: 50%; border: none; padding: 0;
  background: var(--accent-g);
  color: #fff; font-size: 20px;
  cursor: pointer; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
#fnx-btn:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(0,0,0,.35) }
#fnx-btn:active { transform: scale(.95) }

/* ─── FLOATING NEXUS PANEL (global) ──────────────────────────────
   Consistent Nexus chat panel styling across all modules.
   ──────────────────────────────────────────────────────────────── */
#fnx-panel {
  position: fixed; bottom: 80px; right: 20px;
  width: 380px; height: 500px;
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  z-index: 100;
  display: none; flex-direction: column; overflow: hidden;
}
#fnx-panel.open { display: flex }
.n-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.n-head h4 {
  font-size: 14px; background: var(--accent-g);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0;
}
.n-msgs { flex: 1; overflow-y: auto; padding: 14px }
.n-input {
  padding: 10px; border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}
.n-input input {
  flex: 1; padding: 8px 12px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text); font-size: 12px;
  font-family: var(--font);
}
.n-input button {
  padding: 8px 14px; background: var(--accent); border: none;
  border-radius: 6px; color: #fff; font-size: 12px;
  cursor: pointer; font-weight: 700; font-family: var(--font);
}
.n-msg {
  margin-bottom: 10px; padding: 8px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.6; max-width: 90%;
}
.n-msg.user { background: rgba(59,130,246,.1); margin-left: auto }
.n-msg.bot { background: var(--bg2) }
@media (max-width: 768px) {
  #fnx-panel { width: calc(100vw - 24px); right: 12px; height: 60vh }
}

/* ─── 4. KPI HIERARCHY ───────────────────────────────────────────
   Preattentive processing (Healey 1996): size > color > shape.
   KPI values should dominate; labels should recede.
   Dashboard best practice (Few 2006): numbers speak first.
   ──────────────────────────────────────────────────────────────── */
.kpi-val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: var(--ux-lh-tight);
}
.kpi-label {
  line-height: var(--ux-lh-base);
  margin-top: 6px;
}

/* Semantic KPI emphasis — critical values demand immediate attention */
.kpi.alert .kpi-val { font-weight: 900 }
.kpi.ok .kpi-val { font-weight: 800 }

/* ─── 5. CARD DEPTH SYSTEM ───────────────────────────────────────
   3-level depth creates visual hierarchy without borders.
   Cards "float" above surface; interactive cards rise on hover.
   Based on Material Design elevation system.
   ──────────────────────────────────────────────────────────────── */
.panel, .mod-card, .sem-card, .card, .alert-item,
.cross-panel, .alerts-panel, .kpi {
  transition: transform var(--ux-transition), 
              box-shadow var(--ux-transition-slow), 
              border-color var(--ux-transition);
}

/* Subtle depth on rest — panels feel "lifted" */
.panel, .cross-panel, .alerts-panel {
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}
:root:not(.light) .panel,
:root:not(.light) .cross-panel,
:root:not(.light) .alerts-panel {
  box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.15);
}

/* ─── 6. MICRO-INTERACTIONS ──────────────────────────────────────
   Doherty Threshold: feedback within 100ms feels instant.
   Active states provide confirmation of user action.
   ──────────────────────────────────────────────────────────────── */

/* Button press — tactile feedback */
.top-btn:active, button:active, .mod-card:active {
  transform: scale(.97) !important;
  transition-duration: .05s !important;
}

/* Sidebar nav: active state clarity */
.sb-nav a { 
  transition: all var(--ux-transition); 
  position: relative;
}
.sb-nav a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

/* Links: underline on hover for affordance clarity */
a:not(.mod-card):not(.ref-link):not(.alert-item):not(.sb-nav a):hover {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ─── 7. LOADING STATES ──────────────────────────────────────────
   Skeleton screens reduce perceived wait time by 15-20%
   vs spinners (Lazaris 2016). Pulse animation = "alive" signal.
   ──────────────────────────────────────────────────────────────── */
.kpi-loading, .sem-loading, .mod-loading {
  border-radius: 6px;
  opacity: .6;
}

/* ─── 8. ALERT HIERARCHY ─────────────────────────────────────────
   Traffic light principle (Healey 1996): red = act now,
   amber = monitor, blue = informational.
   Physical left-border weight signals urgency level.
   ──────────────────────────────────────────────────────────────── */
.alert-item {
  border-left: 4px solid transparent;
  transition: transform var(--ux-transition), background var(--ux-transition);
}
.alert-item.critical { border-left-color: var(--red) }
.alert-item.warning { border-left-color: var(--orange) }
.alert-item.info { border-left-color: var(--accent) }

.alert-item::before { display: none }

/* Alert arrow → indicates navigable */
.alert-item::after {
  content: '→';
  margin-left: auto;
  opacity: .3;
  transition: opacity var(--ux-transition), transform var(--ux-transition);
  flex-shrink: 0;
  font-size: 14px;
}
.alert-item:hover::after { opacity: .7; transform: translateX(3px) }

/* ─── 9. SECTION BREATHING ───────────────────────────────────────
   Gestalt proximity: related items need closeness, groups need
   separation. More whitespace between sections = clearer mental
   model of page structure. 
   ──────────────────────────────────────────────────────────────── */
.mod-group { margin-bottom: 36px }
.mod-group-header { margin-bottom: 18px }
.mod-group-label { font-size: 11px; letter-spacing: 2.5px }
.dash { margin-bottom: 32px }

/* ─── 10. SEMAPHORE IMPROVEMENT ──────────────────────────────────
   Status at a glance: the dot is the primary signal.
   Increase dot size for faster peripheral detection.
   ──────────────────────────────────────────────────────────────── */
.sem-dot { 
  width: 12px; height: 12px;
  transition: all .4s;
}
.sem-card[data-sem=red] .sem-dot {
  width: 14px; height: 14px;
}
.sem-label {
  font-size: var(--ux-ts-xs);
  letter-spacing: 1px;
}
.sem-val {
  font-variant-numeric: tabular-nums;
}

/* ─── 11. TABLE READABILITY ──────────────────────────────────────
   Zebra striping improves row tracking by 8-10% (Ling 2010).
   Row hover highlights scanning target.
   ──────────────────────────────────────────────────────────────── */
table tbody tr:nth-child(even) td {
  background: rgba(128,128,128,.03);
}
table tbody tr:hover td {
  background: rgba(128,128,128,.07) !important;
}
th {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── 12. SCROLLBAR ──────────────────────────────────────────────
   Thin scrollbar = more content visible.
   Auto-hiding reduces visual clutter.
   ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted) }
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent }

/* ─── 13. SELECTION ──────────────────────────────────────────────
   Brand-colored text selection feels intentional.
   ──────────────────────────────────────────────────────────────── */
::selection { background: rgba(59,130,246,.25); color: inherit }
.light ::selection { background: rgba(37,99,235,.2) }

/* ─── 14. REDUCED MOTION ─────────────────────────────────────────
   WCAG 2.1 §2.3.3: Users with vestibular disorders.
   Kill all non-essential animation.
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 15. PRINT ──────────────────────────────────────────────────
   Users do print dashboards. Make it readable.
   ──────────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important }
  .sidebar, #fnx-btn, #fnx-panel, .skin-picker-wrap, .top-btn,
  .sched-row, .cmd-footer, nav { display: none !important }
  .main, .cmd { margin: 0 !important; padding: 0 !important; max-width: 100% !important }
  .panel, .mod-card, .kpi, .sem-card, .card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .kpi-val { color: #000 !important }
  a { color: #000 !important; text-decoration: none !important }
  @page { margin: 1.5cm }
}

/* ─── 16. FOLD-SPECIFIC OPTIMIZATIONS ────────────────────────────
   Samsung Galaxy Fold outer: 320px, inner: 717px.
   Optimize for the in-between zone.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 768px) {
  .sems { grid-template-columns: repeat(2, 1fr) }
  .mod-grid { grid-template-columns: repeat(2, 1fr) }
  .dash { grid-template-columns: 1fr }
  .kpis { grid-template-columns: repeat(3, 1fr) }
  .cmd { padding: 20px 16px 40px }
}

/* ─── 17. SIDEBAR POLISH ─────────────────────────────────────────
   Better visual hierarchy in sidebar navigation.
   Active section has stronger contrast.
   ──────────────────────────────────────────────────────────────── */
.sidebar {
  transition: width var(--ux-transition-slow);
}
.sb-section {
  user-select: none;
  transition: background var(--ux-transition);
}
.sb-section:hover { background: rgba(128,128,128,.05) }

/* ─── 18. INPUT POLISH ───────────────────────────────────────────
   Clearer affordance: inputs look interactive.
   Focus state unambiguous.
   ──────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="search"],
textarea, select {
  transition: border-color var(--ux-transition), box-shadow var(--ux-transition);
}
input[type="text"]:hover,
input[type="search"]:hover,
textarea:hover, select:hover {
  border-color: var(--border2);
}
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

/* ─── 19. EMPTY STATES ───────────────────────────────────────────
   When data is absent, guide the user instead of showing "—".
   ──────────────────────────────────────────────────────────────── */
.kpi-val:empty::after,
.sem-val:empty::after {
  content: '—';
  color: var(--dim);
  opacity: .5;
}

/* ─── 20. MODULE CARD REFINEMENT ─────────────────────────────────
   Better content hierarchy within module cards.
   Icon → Name → Description → Status (scannable flow).
   ──────────────────────────────────────────────────────────────── */
.mod-card {
  display: flex;
  flex-direction: column;
}
.mod-icon { transition: transform var(--ux-transition-slow) }
.mod-card:hover .mod-icon { transform: scale(1.08) }
.mod-name { line-height: var(--ux-lh-tight) }
.mod-desc {
  line-height: var(--ux-lh-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── 21. TOOLTIP SYSTEM ─────────────────────────────────────────
   Native tooltip enhancement via title attribute.
   ──────────────────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid var(--border2);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  z-index: 1000;
  pointer-events: none;
  animation: ux-tooltip-in .15s ease;
}
@keyframes ux-tooltip-in { from { opacity: 0; transform: translateX(-50%) translateY(4px) } }

/* ─── 22. NEXUS CHAT POLISH ──────────────────────────────────────
   Chat panel feels more conversational.
   ──────────────────────────────────────────────────────────────── */
#fnx-panel {
  transition: opacity .2s, transform .2s;
}
#fnx-panel.open {
  animation: ux-panel-up .25s ease;
}
@keyframes ux-panel-up {
  from { opacity: 0; transform: translateY(12px) }
  to { opacity: 1; transform: translateY(0) }
}
.n-msg {
  animation: ux-msg-in .2s ease;
}
@keyframes ux-msg-in {
  from { opacity: 0; transform: translateY(6px) }
  to { opacity: 1; transform: translateY(0) }
}

/* ─── 23. VISUAL POLISH: SUBTLE GRAIN ────────────────────────────
   Noise texture adds organic feel to flat surfaces.
   Almost imperceptible but removes "dead screen" feeling.
   ──────────────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: .015;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
}
@media print { body::after { display: none } }

/* ─── SCROLL REVEAL (used by ux.js IntersectionObserver) ─────── */
.ux-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.ux-reveal.ux-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .ux-reveal { opacity: 1; transform: none }
}

/* ─── 24. QUICK MODULE SWITCHER ──────────────────────────────────
   Spotlight-style navigation. Ctrl+M to open.
   Fuzzy search, keyboard nav, current module indicator.
   ──────────────────────────────────────────────────────────────── */
#ux-switcher { display: none; position: fixed; inset: 0; z-index: 10001 }
#ux-switcher.open { display: block }
.ux-sw-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: ux-fade-in .15s ease;
}
@keyframes ux-fade-in { from { opacity: 0 } }
.ux-sw-panel {
  position: absolute; top: min(20%, 140px); left: 50%; transform: translateX(-50%);
  width: 480px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.4);
  overflow: hidden;
  animation: ux-panel-down .2s cubic-bezier(.2,0,.13,1);
}
@keyframes ux-panel-down { from { opacity: 0; transform: translateX(-50%) translateY(-12px) } }
.ux-sw-input {
  width: 100%; padding: 16px 20px;
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 16px; font-family: var(--font);
  outline: none;
}
.ux-sw-input::placeholder { color: var(--dim) }
.ux-sw-list {
  max-height: 400px; overflow-y: auto;
  padding: 8px;
}
.ux-sw-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  text-decoration: none; color: var(--text2);
  transition: background .1s;
  cursor: pointer;
}
.ux-sw-item:hover, .ux-sw-item.selected { background: var(--bg2) }
.ux-sw-item.selected { color: var(--text) }
.ux-sw-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0 }
.ux-sw-name { font-size: 14px; font-weight: 700; flex-shrink: 0 }
.ux-sw-desc { font-size: 11px; color: var(--dim); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ux-sw-current {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--accent); background: rgba(59,130,246,.1);
  padding: 2px 8px; border-radius: 4px; flex-shrink: 0;
}
.ux-sw-item.current { opacity: .6 }
.ux-sw-hint {
  padding: 10px 20px; border-top: 1px solid var(--border);
  font-size: 10px; color: var(--dim); text-align: center;
  letter-spacing: .3px;
}
@media (max-width: 480px) {
  .ux-sw-panel { top: 8px; border-radius: 12px }
  .ux-sw-item { padding: 12px 12px }
}

/* ─── 25. TOAST NOTIFICATIONS ────────────────────────────────────
   Non-intrusive stacking notifications with auto-dismiss.
   ──────────────────────────────────────────────────────────────── */
.ux-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border2);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  font-size: 13px; color: var(--text);
  pointer-events: auto;
  animation: ux-toast-in .3s cubic-bezier(.2,0,.13,1);
  position: relative; overflow: hidden;
  transition: opacity .25s, transform .25s;
}
@keyframes ux-toast-in { from { opacity: 0; transform: translateX(20px) } }
.ux-toast-icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.ux-toast-success .ux-toast-icon { background: rgba(16,185,129,.15); color: var(--green) }
.ux-toast-error .ux-toast-icon { background: rgba(239,68,68,.15); color: var(--red) }
.ux-toast-warning .ux-toast-icon { background: rgba(245,158,11,.15); color: var(--orange) }
.ux-toast-info .ux-toast-icon { background: rgba(59,130,246,.15); color: var(--accent) }
.ux-toast-msg { flex: 1; line-height: 1.4 }
.ux-toast-close {
  background: none; border: none; color: var(--dim); font-size: 18px;
  cursor: pointer; padding: 0 4px; flex-shrink: 0; line-height: 1;
}
.ux-toast-close:hover { color: var(--text) }
.ux-toast-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(128,128,128,.1);
}
.ux-toast-bar {
  height: 100%; width: 100%; border-radius: 0 0 12px 12px;
}
.ux-toast-success .ux-toast-bar { background: var(--green) }
.ux-toast-error .ux-toast-bar { background: var(--red) }
.ux-toast-warning .ux-toast-bar { background: var(--orange) }
.ux-toast-info .ux-toast-bar { background: var(--accent) }
@media print { #ux-toast-container, #ux-switcher { display: none !important } }

/* ─── 26. UNIFIED MOBILE SIDEBAR ─────────────────────────────────
   Auto-injected by ux.js for all sidebar-based modules.
   Overrides per-module mobile implementations with one standard.
   Slide-in drawer with backdrop, 44px hamburger, auto-close on nav.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important; bottom: 0 !important;
    width: 260px !important;
    z-index: 1001 !important;
    transition: left .28s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
  }
  .sidebar.ux-open {
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.3) !important;
  }
  .main, .layout > div:not(.sidebar), [style*="margin-left:220px"], [style*="margin-left:200px"], [style*="margin-left:240px"] {
    margin-left: 0 !important;
  }
  /* Prevent scroll when sidebar open */
  body.ux-sidebar-open { overflow: hidden }
}

/* Hamburger button — always available on mobile */
#ux-hamburger {
  display: none;
  position: fixed; top: 10px; left: 10px; z-index: 1000;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border2);
  color: var(--text); font-size: 20px;
  cursor: pointer; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  transition: background .2s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
#ux-hamburger:active { transform: scale(.92) }
@media (max-width: 768px) {
  #ux-hamburger { display: flex }
}

/* Backdrop */
#ux-sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  z-index: 1000;
  opacity: 0; transition: opacity .25s;
}
#ux-sidebar-backdrop.ux-show {
  display: block; opacity: 1;
}

/* ─── 27. BREADCRUMB / LOCATION INDICATOR ────────────────────────
   Shows current position: Hub > Module > View.
   Injected by ux.js at top of main content area.
   ──────────────────────────────────────────────────────────────── */
.ux-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--dim);
  padding: 0 0 12px; margin-bottom: 0;
}
.ux-breadcrumb a {
  color: var(--muted); text-decoration: none;
  transition: color .15s;
}
.ux-breadcrumb a:hover { color: var(--accent) }
.ux-breadcrumb .ux-bc-sep { opacity: .4; font-size: 9px }
.ux-breadcrumb .ux-bc-current {
  color: var(--text2); font-weight: 600;
}
/* On mobile, breadcrumb shifts right to make room for hamburger */
@media (max-width: 768px) {
  .ux-breadcrumb { padding-left: 50px }
}
/* Hide breadcrumb on hub (it IS the hub) */
body[data-ux-module="hub"] .ux-breadcrumb { display: none }

/* ─── 28. CHART THEME VARIABLES ──────────────────────────────────
   CSS vars that Chart.js adapter reads via getComputedStyle.
   Each skin can override these. Defaults match the base skin.
   ──────────────────────────────────────────────────────────────── */
:root {
  --chart-text: var(--muted);
  --chart-grid: rgba(128,128,128,.08);
  --chart-blue: var(--accent);
  --chart-green: var(--green);
  --chart-red: var(--red);
  --chart-orange: var(--orange);
  --chart-cyan: var(--cyan);
  --chart-purple: var(--purple);
  --chart-pink: #ec4899;
  --chart-series: var(--accent), var(--green), var(--orange), var(--cyan), var(--purple), var(--red);
}

/* ─── 29. DENSITY SYSTEM ─────────────────────────────────────────
   Three density modes: compact, default (comfortable), spacious.
   Controls padding, gap, font-size at the component level.
   Stored in localStorage('centinela-density').
   ──────────────────────────────────────────────────────────────── */

/* Compact: more data on screen, less breathing room */
html[data-density="compact"] {
  --ux-space-unit: 6px;
  font-size: 12.5px;
}
html[data-density="compact"] .kpi { padding: 10px 6px }
html[data-density="compact"] .kpi-val { font-size: 18px }
html[data-density="compact"] .kpi-label { font-size: 9px; margin-top: 2px }
html[data-density="compact"] .panel { padding: 14px }
html[data-density="compact"] .mod-card { padding: 16px }
html[data-density="compact"] .mod-icon { font-size: 24px; margin-bottom: 6px }
html[data-density="compact"] .mod-name { font-size: 14px }
html[data-density="compact"] .mod-desc { font-size: 10.5px; -webkit-line-clamp: 2 }
html[data-density="compact"] .mod-grid { gap: 10px }
html[data-density="compact"] .sems { gap: 10px }
html[data-density="compact"] .sem-card { padding: 12px 14px }
html[data-density="compact"] .dash { gap: 12px }
html[data-density="compact"] .sb-nav a { padding: 6px 12px; font-size: 11px }
html[data-density="compact"] table td { padding: 4px 8px }
html[data-density="compact"] table th { padding: 5px 8px }
html[data-density="compact"] .card-h { padding: 10px 14px }
html[data-density="compact"] .card-b { padding: 12px 14px }
html[data-density="compact"] .alert-item { padding: 8px 12px; font-size: 11px }

/* Spacious: more breathing room, less density */
html[data-density="spacious"] {
  --ux-space-unit: 10px;
  font-size: 14px;
}
html[data-density="spacious"] .kpi { padding: 18px 12px }
html[data-density="spacious"] .kpi-val { font-size: 26px }
html[data-density="spacious"] .kpi-label { font-size: 11px; margin-top: 6px }
html[data-density="spacious"] .panel { padding: 24px }
html[data-density="spacious"] .mod-card { padding: 26px }
html[data-density="spacious"] .mod-icon { font-size: 36px; margin-bottom: 14px }
html[data-density="spacious"] .mod-name { font-size: 19px }
html[data-density="spacious"] .mod-grid { gap: 18px }
html[data-density="spacious"] .sems { gap: 18px }
html[data-density="spacious"] .sem-card { padding: 22px 24px }
html[data-density="spacious"] .dash { gap: 20px; margin-bottom: 36px }
html[data-density="spacious"] .sb-nav a { padding: 10px 16px; font-size: 13px }
html[data-density="spacious"] table td { padding: 10px 12px }
html[data-density="spacious"] table th { padding: 10px 12px }
html[data-density="spacious"] .alert-item { padding: 14px 20px; font-size: 13px }

/* ─── 30. STATUS BAR ─────────────────────────────────────────────
   Persistent bottom bar: version, connection, last scan, shortcuts hint.
   Sits above the fold on all pages. Minimal visual weight.
   ──────────────────────────────────────────────────────────────── */
#ux-statusbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 28px; z-index: 99;
  background: var(--card); border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 12px; gap: 16px;
  font-size: 10px; color: var(--dim);
  opacity: .85; transition: opacity .2s;
}
#ux-statusbar:hover { opacity: 1 }
.ux-sb-item { display: flex; align-items: center; gap: 4px; white-space: nowrap }
.ux-sb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0 }
.ux-sb-dot.ok { background: var(--green) }
.ux-sb-dot.warn { background: var(--orange) }
.ux-sb-dot.err { background: var(--red) }
.ux-sb-sep { width: 1px; height: 12px; background: var(--border); flex-shrink: 0 }
.ux-sb-right { margin-left: auto; display: flex; align-items: center; gap: 12px }
.ux-sb-kbd {
  display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer; opacity: .6; transition: opacity .15s;
}
.ux-sb-kbd:hover { opacity: 1; color: var(--accent) }
.ux-fb-trigger { color: var(--orange) !important; opacity: .8 }
.ux-fb-trigger:hover { color: var(--accent) !important; opacity: 1 }
.ux-sb-kbd kbd {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  background: var(--bg2); border: 1px solid var(--border2);
  font-family: var(--mono); font-size: 9px; line-height: 1.4;
}
/* Hide on very small screens */
@media (max-width: 480px) { #ux-statusbar { display: none } }
/* Sidebar pages: shift left to clear sidebar */
@media (min-width: 769px) {
  body:has(.sidebar) #ux-statusbar { left: 220px }
}
@media print { #ux-statusbar { display: none !important } }

/* Ensure body has enough bottom padding to not overlap content */
body { padding-bottom: 32px !important }

/* ─── 31. KEYBOARD SHORTCUT GUIDE ────────────────────────────────
   Modal overlay showing all available shortcuts.
   Triggered by ? key or statusbar hint click.
   ──────────────────────────────────────────────────────────────── */
#ux-kbd-guide {
  display: none; position: fixed; inset: 0; z-index: 10003;
}
#ux-kbd-guide.open { display: flex; align-items: center; justify-content: center }
.ux-kbd-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ux-kbd-panel {
  position: relative; z-index: 1;
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 16px; padding: 24px 28px;
  width: 420px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px); overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  animation: ux-panel-down .2s cubic-bezier(.2,0,.13,1);
}
.ux-kbd-title {
  font-size: 16px; font-weight: 800; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.ux-kbd-section {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--dim); margin: 16px 0 8px;
}
.ux-kbd-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text2);
}
.ux-kbd-row:last-child { border-bottom: none }
.ux-kbd-keys { display: flex; gap: 4px; flex-shrink: 0 }
.ux-kbd-keys kbd {
  display: inline-block; padding: 3px 8px; border-radius: 5px;
  background: var(--bg2); border: 1px solid var(--border2);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--text); min-width: 24px; text-align: center;
}

/* ─── 32. CLICK-TO-COPY ─────────────────────────────────────────
   Visual feedback when user copies a KPI or data value.
   Subtle flash + "Copiado" tooltip.
   ──────────────────────────────────────────────────────────────── */
.ux-copyable { cursor: copy; position: relative }
.ux-copyable:hover { opacity: .85 }
.ux-copyable:active { transform: scale(.97) }
.ux-copied-tip {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; z-index: 100;
  animation: ux-copy-pop .6s ease forwards;
}
@keyframes ux-copy-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(4px) }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) }
  80% { opacity: 1 }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px) }
}

/* ─── 33. OFFLINE BANNER ─────────────────────────────────────────
   Shows when connection is lost, auto-hides on reconnect.
   ──────────────────────────────────────────────────────────────── */
#ux-offline-banner {
  display: none; position: fixed; top: 0; left: 0; right: 0;
  z-index: 10010; height: 36px;
  background: var(--red); color: #fff;
  font-size: 12px; font-weight: 700;
  align-items: center; justify-content: center; gap: 8px;
  animation: ux-slide-down .3s ease;
}
#ux-offline-banner.show { display: flex }
@keyframes ux-slide-down { from { transform: translateY(-100%) } to { transform: translateY(0) } }

/* ─── 34. FAVORITES STAR IN QUICK SWITCHER ───────────────────── */
.ux-sw-star {
  font-size: 14px; cursor: pointer; flex-shrink: 0;
  opacity: .3; transition: .15s; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.ux-sw-star:hover { opacity: .7 }
.ux-sw-star.fav { opacity: 1; color: #fbbf24 }
.ux-sw-fav-divider {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--dim); padding: 8px 14px 4px;
}

/* ─── 35. TAB RETURN INDICATOR ───────────────────────────────────
   Subtle pulse on status bar dot when user returns to tab.
   ──────────────────────────────────────────────────────────────── */
@keyframes ux-return-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5) }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0) }
}
.ux-sb-dot.returning { animation: ux-return-pulse .8s ease 2 }

/* ─── 36. TABLE SCROLL INDICATORS ────────────────────────────────
   On narrow screens, tables overflow. Shadows indicate scroll.
   Left/right gradient fades show "more content" direction.
   ──────────────────────────────────────────────────────────────── */
.ux-table-wrap {
  position: relative; overflow: hidden;
}
.ux-table-wrap .ux-table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ux-table-wrap::before,
.ux-table-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 24px;
  pointer-events: none; z-index: 2; opacity: 0;
  transition: opacity .2s;
}
.ux-table-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--card), transparent);
}
.ux-table-wrap::after {
  right: 0;
  background: linear-gradient(-90deg, var(--card), transparent);
}
.ux-table-wrap.scroll-left::before { opacity: 1 }
.ux-table-wrap.scroll-right::after { opacity: 1 }

/* ─── 37. SESSION TIMER ──────────────────────────────────────────
   Unobtrusive timer in status bar. Shows session duration.
   Break reminder at 90min (ultradian rhythm — Peretz, Lavie 1998).
   ──────────────────────────────────────────────────────────────── */
.ux-session-timer {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3px;
}
.ux-session-timer.warn { color: var(--orange) }
.ux-session-timer.rest { color: var(--red) }

#ux-break-reminder {
  display: none; position: fixed; bottom: 40px; right: 16px;
  z-index: 9999;
  background: var(--card); border: 1px solid rgba(245,158,11,.3);
  border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  max-width: 280px;
  animation: ux-toast-in .3s ease;
}
#ux-break-reminder.show { display: block }
.ux-break-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--orange) }
.ux-break-msg { font-size: 11px; color: var(--text2); line-height: 1.5; margin-bottom: 10px }
.ux-break-actions { display: flex; gap: 8px }
.ux-break-btn {
  padding: 6px 14px; border-radius: 8px; font-size: 11px;
  font-weight: 600; cursor: pointer; border: none; font-family: var(--font);
  transition: .15s;
}
.ux-break-btn.primary { background: var(--accent); color: #fff }
.ux-break-btn.primary:hover { opacity: .9 }
.ux-break-btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border2) }

/* ─── 38. COMMAND PALETTE ACTIONS ────────────────────────────────
   Actions section in Quick Switcher below modules.
   ──────────────────────────────────────────────────────────────── */
.ux-sw-action {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  text-decoration: none; color: var(--muted);
  transition: background .1s; cursor: pointer;
  border: none; background: none; width: 100%;
  font-family: var(--font); font-size: 13px; text-align: left;
}
.ux-sw-action:hover { background: var(--bg2); color: var(--text) }
.ux-sw-action-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  background: rgba(128,128,128,.08);
}
.ux-sw-action-label { font-weight: 600 }
.ux-sw-action-hint { font-size: 10px; color: var(--dim) }

/* ─── 39. PROGRESSIVE DISCLOSURE SYSTEM ─────────────────────────
   Shared collapsible sections, table limits, insight cards.
   Used by Hub, Vendor, Supply, Market, Finance, etc.
   ──────────────────────────────────────────────────────────────── */

/* Collapsible sections */
.ux-collapse{margin-bottom:12px}
.ux-collapse-hdr{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);transition:.15s;user-select:none}
.ux-collapse-hdr:hover{color:var(--text);border-color:var(--border2)}
.ux-collapse-hdr .ux-arrow{transition:transform .2s;font-size:9px;opacity:.5}
.ux-collapse-hdr.open .ux-arrow{transform:rotate(90deg)}
.ux-collapse-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.ux-collapse-body.open{max-height:9999px;overflow:visible;padding-top:8px}

/* Table row limiter */
.ux-table-limited tbody tr:nth-child(n+11){display:none}
.ux-table-limited.expanded tbody tr{display:table-row}
.ux-table-show-more{text-align:center;padding:8px;font-size:11px;color:var(--accent);cursor:pointer;font-weight:600;border-top:1px dashed var(--border);margin-top:-1px}
.ux-table-show-more:hover{color:var(--text)}

/* Insight mini-cards (for module dashboards) */
.ux-insights{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-bottom:16px}
.ux-insight{padding:12px 14px;border-radius:10px;display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);transition:.15s;text-decoration:none;cursor:pointer}
.ux-insight:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.ux-insight.red{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.15)}
.ux-insight.amber{background:rgba(249,115,22,.04);border-color:rgba(249,115,22,.12)}
.ux-insight.green{background:rgba(52,211,153,.04);border-color:rgba(52,211,153,.12)}
.ux-insight.blue{background:rgba(99,102,241,.04);border-color:rgba(99,102,241,.12)}
.ux-insight-icon{font-size:18px;flex-shrink:0}
.ux-insight-body{flex:1;min-width:0}
.ux-insight-title{font-size:12px;font-weight:700;line-height:1.4}
.ux-insight-sub{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.3}
.ux-insight.red .ux-insight-title{color:var(--red)}
.ux-insight.amber .ux-insight-title{color:var(--orange)}
.ux-insight.green .ux-insight-title{color:var(--green)}
.ux-insight.blue .ux-insight-title{color:var(--accent)}

/* Skeleton loading */
.ux-skeleton{background:linear-gradient(90deg,var(--bg2) 25%,var(--card) 50%,var(--bg2) 75%);background-size:200% 100%;animation:ux-shimmer 1.5s infinite;border-radius:6px;height:16px;margin:4px 0}
.ux-skeleton.lg{height:40px;border-radius:10px}
.ux-skeleton.md{height:24px}
@keyframes ux-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* View header with subtitle */
.ux-view-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.ux-view-hdr h3{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px;margin:0}
.ux-view-hdr .ux-subtitle{font-size:11px;color:var(--muted)}

/* ─── 40. MODULE DOCK ───────────────────────────────────────────
   Compact horizontal navigation strip for modules.
   Replaces large card grid — everything in 1-2 rows.
   ──────────────────────────────────────────────────────────────── */
.mod-dock{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0;justify-content:center}
.mod-dock-item{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;text-decoration:none;color:var(--text2);background:var(--card);border:1px solid var(--border);font-size:12px;font-weight:600;transition:.15s;white-space:nowrap}
.mod-dock-item:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.mod-dock-item .dock-icon{font-size:16px}
.mod-dock-item.pri{background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.2);color:var(--text);font-weight:700}
.mod-dock-item.pri:hover{background:rgba(99,102,241,.12);border-color:var(--accent)}
.mod-dock-sep{width:1px;height:24px;background:var(--border);align-self:center;margin:0 4px}
@media(max-width:768px){.mod-dock-item{padding:6px 10px;font-size:11px}.mod-dock-item .dock-icon{font-size:14px}}

/* ─── 41. APP GRID (replaces dock) ──────────────────────────────
   Module icons like iOS/Android home screen.
   ──────────────────────────────────────────────────────────────── */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;padding:8px 0;max-width:900px;margin:0 auto}
.app-icon{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;border-radius:16px;text-decoration:none;color:var(--text2);background:var(--card);border:1px solid var(--border);transition:.2s;cursor:pointer;text-align:center}
.app-icon:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.2);border-color:var(--border2);color:var(--text)}
.app-icon:active{transform:scale(.95)}
.app-icon .app-emoji{font-size:28px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.app-icon .app-label{font-size:10px;font-weight:600;line-height:1.2;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-icon.pri{background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.05));border-color:rgba(99,102,241,.2)}
.app-icon.pri:hover{border-color:var(--accent);background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.08))}
.app-icon.pri .app-label{color:var(--accent)}
@media(max-width:768px){.app-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}.app-icon{padding:10px 4px 8px}.app-icon .app-emoji{font-size:24px}.app-icon .app-label{font-size:9px}}

/* ─── 42. KPI STRIP (compact single row) ────────────────────────
   Top 4-5 KPIs in a slim horizontal row, always visible.
   ──────────────────────────────────────────────────────────────── */
.kpi-strip{display:flex;gap:2px;margin-bottom:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.kpi-strip-item{flex:1;padding:10px 8px;text-align:center;border-right:1px solid var(--border);min-width:0}
.kpi-strip-item:last-child{border-right:none}
.kpi-strip-val{font-size:16px;font-weight:800;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-strip-label{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-strip-item.alert .kpi-strip-val{color:var(--red)}
.kpi-strip-item.ok .kpi-strip-val{color:var(--green)}
@media(max-width:600px){.kpi-strip-val{font-size:13px}.kpi-strip-label{font-size:7px}.kpi-strip-item{padding:8px 4px}}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2.0 — COMPONENT OVERRIDES
   These override template-level CSS to enforce consistent premium look.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── SIDEBAR: Glass + subtle gradient ───────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #0f1629 0%, #0a0f1a 100%) !important;
  border-right: 1px solid rgba(79,143,255,.08) !important;
  backdrop-filter: blur(12px);
}
.sb-brand {
  padding: 20px 18px 16px !important;
  border-bottom: 1px solid rgba(79,143,255,.06) !important;
}
.sb-brand h2 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: -0.02em !important;
}
.sb-nav a {
  font-family: var(--font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: 0 8px 8px 0 !important;
  margin-right: 8px !important;
  transition: all var(--duration-normal) var(--ease) !important;
}
.sb-nav a:hover {
  background: rgba(79,143,255,.06) !important;
  color: var(--text) !important;
}
.sb-nav a.active {
  background: rgba(79,143,255,.1) !important;
  color: var(--accent, #4f8fff) !important;
  font-weight: 700 !important;
  border-left-color: var(--accent, #4f8fff) !important;
  box-shadow: inset 3px 0 0 var(--accent, #4f8fff);
}
.sb-section {
  font-family: var(--font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
}

/* ─── KPI CARDS: Glass morphism + accent top border ──────────── */
.kpi {
  background: linear-gradient(135deg, rgba(21,29,48,.8), rgba(15,22,41,.6)) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 14px !important;
  padding: 18px 14px !important;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(79,143,255,.3), transparent);
  border-radius: 0 0 2px 2px;
}
.kpi:hover {
  border-color: rgba(79,143,255,.12) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kpi-val {
  font-family: var(--font-mono) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1;
}
.kpi-label {
  font-family: var(--font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--muted) !important;
  margin-top: 6px !important;
}
.kpi.alert .kpi-val { color: var(--red, #f87171) !important; }
.kpi.ok .kpi-val { color: var(--green, #34d399) !important; }

/* ─── TABLE HEADERS: Industrial, bold ────────────────────────── */
table thead th {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 10px !important;
  color: var(--muted, #7d8da6) !important;
  padding: 10px !important;
  border-bottom: 2px solid rgba(79,143,255,.1) !important;
  white-space: nowrap;
}

/* Zebra striping (very subtle) */
table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,.01);
}

/* ─── SECTION CARDS (.sec pattern) ───────────────────────────── */
.sec {
  background: var(--card, #151d30) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: border-color var(--duration-normal) var(--ease);
}
.sec:hover {
  border-color: rgba(79,143,255,.1);
}
.sec-t {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ─── PAGE TITLES ────────────────────────────────────────────── */
h3.vt, .vt {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* ─── BADGE / TAG POLISH ─────────────────────────────────────── */
.mod-badge, .badge {
  font-family: var(--font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

/* ─── LOADING: Skeleton shimmer (replaces spinners) ──────────── */
@keyframes cx-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: .8; }
}
.mod-loading, .kpi-loading, .sem-loading {
  animation: cx-pulse 1.5s infinite ease-in-out;
}

/* ─── MAIN CONTENT AREA: subtle texture ──────────────────────── */
.main {
  background: radial-gradient(ellipse at 20% 0%, rgba(79,143,255,.02) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 100%, rgba(124,92,252,.02) 0%, transparent 50%),
              var(--bg, #0a0f1a) !important;
}

/* ─── ALERT ITEMS: better styling ────────────────────────────── */
.alert-item {
  font-family: var(--font) !important;
  border-radius: 12px !important;
  transition: transform var(--duration-fast) var(--ease) !important;
}

/* ─── KPI STRIP: glass effect ────────────────────────────────── */
.kpi-strip {
  background: linear-gradient(135deg, rgba(21,29,48,.9), rgba(15,22,41,.7)) !important;
  border: 1px solid rgba(79,143,255,.06) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(8px);
}
.kpi-strip-val {
  font-family: var(--font-mono) !important;
}
.kpi-strip-label {
  font-family: var(--font) !important;
}

/* ─── APP GRID: glass cards ──────────────────────────────────── */
.app-icon {
  background: linear-gradient(135deg, rgba(21,29,48,.8), rgba(15,22,41,.5)) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}
.app-icon:hover {
  background: linear-gradient(135deg, rgba(21,29,48,.95), rgba(15,22,41,.8)) !important;
  border-color: rgba(79,143,255,.15) !important;
  box-shadow: var(--shadow-lg) !important;
}
.app-icon.pri {
  background: linear-gradient(135deg, rgba(79,143,255,.08), rgba(124,92,252,.04)) !important;
  border-color: rgba(79,143,255,.12) !important;
}
.app-icon.pri:hover {
  background: linear-gradient(135deg, rgba(79,143,255,.15), rgba(124,92,252,.08)) !important;
  border-color: rgba(79,143,255,.25) !important;
}
.app-label {
  font-family: var(--font) !important;
}

/* ─── ATTENTION CARDS: Glass + glow ──────────────────────────── */
.attn-card {
  backdrop-filter: blur(6px);
  border-radius: 14px !important;
}
.attn-card:hover {
  box-shadow: var(--shadow-lg) !important;
}
.attn-title {
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em;
}

/* ─── LIGHT MODE OVERRIDES ───────────────────────────────────── */
html:not(.dark) .sidebar {
  background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%) !important;
  border-right-color: rgba(0,0,0,.06) !important;
}
html:not(.dark) .kpi {
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(248,249,252,.7)) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html:not(.dark) .kpi::before {
  background: linear-gradient(90deg, transparent, rgba(79,143,255,.2), transparent);
}
html:not(.dark) .sec {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.06) !important;
}
html:not(.dark) .main {
  background: radial-gradient(ellipse at 20% 0%, rgba(79,143,255,.03) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 100%, rgba(124,92,252,.02) 0%, transparent 50%),
              var(--bg, #f0f2f7) !important;
}
html:not(.dark) .kpi-strip {
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,249,252,.8)) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html:not(.dark) .app-icon {
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(248,249,252,.6)) !important;
  border-color: rgba(0,0,0,.05) !important;
}
html:not(.dark) table tbody tr:nth-child(even) td {
  background: rgba(0,0,0,.015);
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2.0 — ADVANCED POLISH
   Page transitions, toast system, status dots, loading skeletons.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── PAGE ENTRY ANIMATION ───────────────────────────────────── 
   Content fades + slides up on page load. Staggered by depth.
   ──────────────────────────────────────────────────────────────── */
@keyframes cx-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.main > *:not(script):not(style) {
  animation: cx-fadeUp 0.4s var(--ease) both;
}
.main > *:nth-child(1) { animation-delay: 0s; }
.main > *:nth-child(2) { animation-delay: 0.05s; }
.main > *:nth-child(3) { animation-delay: 0.1s; }
.main > *:nth-child(4) { animation-delay: 0.15s; }
.main > *:nth-child(5) { animation-delay: 0.2s; }
.main > *:nth-child(n+6) { animation-delay: 0.25s; }

/* Hub hero area */
.hero, .topbar { animation: cx-fadeUp 0.3s var(--ease) both; }

/* Sidebar nav items stagger */
.sb-nav a {
  animation: cx-fadeUp 0.3s var(--ease) both;
}
.sb-nav a:nth-child(1) { animation-delay: 0.05s; }
.sb-nav a:nth-child(2) { animation-delay: 0.08s; }
.sb-nav a:nth-child(3) { animation-delay: 0.11s; }
.sb-nav a:nth-child(4) { animation-delay: 0.14s; }
.sb-nav a:nth-child(5) { animation-delay: 0.17s; }
.sb-nav a:nth-child(n+6) { animation-delay: 0.2s; }

/* KPI cards stagger */
.kpi-row .kpi, .kpi-strip-item {
  animation: cx-fadeUp 0.35s var(--ease) both;
}
.kpi-row .kpi:nth-child(1) { animation-delay: 0.1s; }
.kpi-row .kpi:nth-child(2) { animation-delay: 0.15s; }
.kpi-row .kpi:nth-child(3) { animation-delay: 0.2s; }
.kpi-row .kpi:nth-child(4) { animation-delay: 0.25s; }
.kpi-row .kpi:nth-child(n+5) { animation-delay: 0.3s; }

/* ─── GLOBAL TOAST SYSTEM ────────────────────────────────────── */
.cx-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.cx-toast {
  padding: 12px 18px;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: cx-toastIn 0.3s var(--ease) both;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}
.cx-toast.success { background: rgba(52,211,153,.9); }
.cx-toast.error { background: rgba(239,68,68,.9); }
.cx-toast.warning { background: rgba(249,115,22,.9); }
.cx-toast.info { background: rgba(79,143,255,.9); }
.cx-toast.out { animation: cx-toastOut 0.25s var(--ease) both; }
@keyframes cx-toastIn {
  from { opacity: 0; transform: translateX(30px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes cx-toastOut {
  to { opacity: 0; transform: translateX(30px) scale(0.95); }
}

/* ─── STATUS DOTS (replaces emoji ●) ─────────────────────────── */
.cx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.cx-dot.ok { background: var(--green, #34d399); box-shadow: 0 0 6px rgba(52,211,153,.4); }
.cx-dot.warn { background: var(--orange, #fb923c); box-shadow: 0 0 6px rgba(249,115,22,.4); }
.cx-dot.err { background: var(--red, #f87171); box-shadow: 0 0 6px rgba(248,113,113,.4); }
.cx-dot.wait { background: var(--muted, #7d8da6); }
.cx-dot.pulse {
  animation: cx-dotPulse 2s infinite;
}
@keyframes cx-dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(0.85); }
}

/* ─── EMPTY STATES ───────────────────────────────────────────── */
.cx-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.cx-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: .4;
  filter: grayscale(.3);
}
.cx-empty-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.cx-empty-sub {
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}
.cx-empty-action {
  margin-top: 14px;
}
.cx-empty-action a, .cx-empty-action button {
  padding: 8px 18px;
  border-radius: 10px;
  background: rgba(79,143,255,.1);
  border: 1px solid rgba(79,143,255,.2);
  color: var(--accent, #4f8fff);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease);
}
.cx-empty-action a:hover, .cx-empty-action button:hover {
  background: rgba(79,143,255,.15);
  transform: translateY(-1px);
}

/* ─── SKELETON LOADING (enhanced) ────────────────────────────── */
.cx-skel {
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
  animation: cx-shimmer 1.5s infinite;
  border-radius: 8px;
}
.cx-skel-line { height: 14px; margin: 6px 0; border-radius: 4px; }
.cx-skel-line.w75 { width: 75%; }
.cx-skel-line.w50 { width: 50%; }
.cx-skel-line.w90 { width: 90%; }
.cx-skel-card { height: 80px; border-radius: 12px; margin-bottom: 10px; }
.cx-skel-kpi { height: 64px; border-radius: 12px; }
@keyframes cx-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
html:not(.dark) .cx-skel {
  background: linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.07) 50%, rgba(0,0,0,.04) 75%);
  background-size: 200% 100%;
}

/* ─── VIEW TRANSITION (for sidebar view switches) ────────────── */
.view {
  animation: cx-fadeUp 0.3s var(--ease) both;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2.1 — BOLD VISUAL IMPACT
   More visible changes. Less subtle, more striking.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── KPI CARDS: Stronger glass + bigger glow ────────────────── */
.kpi {
  background: linear-gradient(145deg, rgba(25,35,60,.9), rgba(12,18,35,.7)) !important;
  border: 1px solid rgba(79,143,255,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.kpi::before {
  left: 10% !important; right: 10% !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, rgba(79,143,255,.5), transparent) !important;
}
.kpi:hover {
  box-shadow: 0 8px 32px rgba(79,143,255,.12), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.kpi-val {
  font-size: 26px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--text, #e8edf5), rgba(79,143,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.kpi.alert .kpi-val {
  background: linear-gradient(135deg, #f87171, #fca5a5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.kpi.ok .kpi-val {
  background: linear-gradient(135deg, #34d399, #6ee7b7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ─── KPI STRIP: Glass bar with glow ─────────────────────────── */
.kpi-strip {
  background: linear-gradient(135deg, rgba(25,35,60,.95), rgba(12,18,35,.8)) !important;
  border: 1px solid rgba(79,143,255,.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.kpi-strip-val {
  font-weight: 800 !important;
  font-size: 17px !important;
}

/* ─── SIDEBAR: Active glow more visible ──────────────────────── */
.sb-nav a.active {
  background: rgba(79,143,255,.12) !important;
  border-left: 3px solid var(--accent, #4f8fff) !important;
  box-shadow: inset 4px 0 12px rgba(79,143,255,.15) !important;
}

/* ─── APP GRID: Stronger glass + glow on hover ──────────────── */
.app-icon {
  background: linear-gradient(145deg, rgba(25,35,60,.85), rgba(12,18,35,.5)) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}
.app-icon:hover {
  border-color: rgba(79,143,255,.2) !important;
  box-shadow: 0 8px 30px rgba(79,143,255,.15), 0 0 60px rgba(79,143,255,.05) !important;
}
.app-icon .app-emoji {
  filter: drop-shadow(0 2px 8px rgba(79,143,255,.2)) !important;
}
.app-icon.pri {
  border-color: rgba(79,143,255,.15) !important;
  box-shadow: 0 2px 12px rgba(79,143,255,.1), inset 0 0 20px rgba(79,143,255,.03) !important;
}

/* ─── ATTENTION CARDS: Stronger accent borders ───────────────── */
.attn-card.red { border-left: 4px solid var(--red, #f87171) !important; }
.attn-card.amber { border-left: 4px solid var(--orange, #fb923c) !important; }
.attn-card.green { border-left: 4px solid var(--green, #34d399) !important; }
.attn-card.blue { border-left: 4px solid var(--accent, #4f8fff) !important; }

/* ─── TABLE: Stronger row hover + header bottom glow ─────────── */
table thead th {
  border-bottom: 2px solid rgba(79,143,255,.15) !important;
  padding: 12px 10px !important;
}
table tbody tr:hover td {
  background: rgba(79,143,255,.05) !important;
}

/* ─── MAIN BACKGROUND: More visible atmospheric gradients ────── */
.main {
  background: radial-gradient(ellipse at 15% 0%, rgba(79,143,255,.04) 0%, transparent 60%),
              radial-gradient(ellipse at 85% 100%, rgba(124,92,252,.03) 0%, transparent 60%),
              var(--bg, #0a0f1a) !important;
}

/* ─── SEARCH INPUTS: Glow border ─────────────────────────────── */
.hero input, .search-wrap input, #p360-search, #c360-search {
  border: 1px solid rgba(79,143,255,.15) !important;
  box-shadow: 0 0 20px rgba(79,143,255,.05) !important;
  transition: all 0.3s var(--ease) !important;
}
.hero input:focus, .search-wrap input:focus, #p360-search:focus, #c360-search:focus {
  border-color: rgba(79,143,255,.35) !important;
  box-shadow: 0 0 30px rgba(79,143,255,.1), 0 0 0 3px rgba(79,143,255,.08) !important;
}

/* ─── SECTION TITLES: Gradient text ──────────────────────────── */
.sec-t, .shop-card h4 {
  background: linear-gradient(135deg, #ec4899, #f472b6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─── HUB HERO TITLE: Gradient text ──────────────────────────── */
.hero-title {
  background: linear-gradient(135deg, #4f8fff 0%, #7c5cfc 50%, #ec4899 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}

/* ─── TOPBAR: Glass morphism ─────────────────────────────────── */
.topbar {
  background: var(--glass, rgba(255,255,255,.92)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(79,143,255,.06) !important;
}
html.dark .topbar {
  background: rgba(10,15,26,.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(79,143,255,.06) !important;
}

/* ─── SHOP CARDS: Color accent top visible ───────────────────── */
.shop-card {
  background: linear-gradient(145deg, rgba(25,35,60,.85), rgba(12,18,35,.5)) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.15) !important;
}
.shop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.2) !important;
}

/* ─── LIGHT MODE: Stronger overrides ─────────────────────────── */
html:not(.dark) .kpi-val {
  background: linear-gradient(135deg, #1a202c, #4f8fff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html:not(.dark) .hero-title {
  background: linear-gradient(135deg, #4f8fff, #7c5cfc, #ec4899) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html:not(.dark) .sec-t, html:not(.dark) .shop-card h4 {
  background: linear-gradient(135deg, #db2777, #be185d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2.2 — REFINEMENTS
   Fix kpi-card (Market), improve consistency, polish details.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Market .kpi-card (different class from .kpi) ───────────── */
.kpi-card {
  background: linear-gradient(145deg, rgba(25,35,60,.9), rgba(12,18,35,.7)) !important;
  border: 1px solid rgba(79,143,255,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03) !important;
  border-radius: 14px !important;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(79,143,255,.5), transparent);
  border-radius: 0 0 2px 2px;
}
.kpi-card:hover {
  border-color: rgba(79,143,255,.15) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(79,143,255,.12), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.kpi-card .kpi-icon {
  font-size: 20px !important;
  opacity: .6 !important;
  margin-bottom: 6px !important;
}
.kpi-card .kpi-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}
.kpi-card .kpi-label {
  font-family: var(--font, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--muted) !important;
  margin-top: 6px !important;
}

/* ─── Better horizontal bar charts (Market revenue by country) ── */
.bar-h {
  border-radius: 4px !important;
  transition: width 0.6s var(--ease) !important;
}

/* ─── Sidebar sections: colored labels ───────────────────────── */
.sb-section {
  transition: color var(--duration-fast) var(--ease) !important;
}

/* ─── REF links: consistent across all modules ───────────────── */
a[href*="/producto/"] {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
a[href*="/producto/"]:hover {
  text-decoration: underline;
}

/* ─── Thumb images: softer corners + subtle shadow ───────────── */
.thumb, img[class*="thumb"] {
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  transition: transform var(--duration-fast) var(--ease) !important;
}
.thumb:hover, img[class*="thumb"]:hover {
  transform: scale(1.05);
}

/* ─── Footer bar: glass + cleaner ────────────────────────────── */
.footer-bar, [class*="footer"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ─── Scheduler pills (Hub): refined ─────────────────────────── */
.sched-pill {
  border-radius: 8px !important;
  font-family: var(--font) !important;
  transition: all var(--duration-fast) var(--ease) !important;
}
.sched-pill:hover {
  background: rgba(79,143,255,.06) !important;
}
.sched-pill .dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
}
.sched-pill .dot.ok { box-shadow: 0 0 6px rgba(52,211,153,.5); }
.sched-pill .dot.err { box-shadow: 0 0 6px rgba(248,113,113,.5); }

/* ─── Semaphore cards: match KPI style ───────────────────────── */
.sem-card {
  background: linear-gradient(145deg, rgba(25,35,60,.85), rgba(12,18,35,.6)) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}
.sem-card:hover {
  border-color: rgba(79,143,255,.1) !important;
}
.sem-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
}
.sem-label {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

/* ─── Collapse headers: glass ────────────────────────────────── */
.ux-collapse-hdr, .hub-collapse-hdr {
  background: linear-gradient(135deg, rgba(25,35,60,.7), rgba(12,18,35,.4)) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 12px !important;
}
.ux-collapse-hdr:hover, .hub-collapse-hdr:hover {
  border-color: rgba(79,143,255,.1) !important;
  background: linear-gradient(135deg, rgba(25,35,60,.85), rgba(12,18,35,.5)) !important;
}

/* ─── Module badge tags (LIVE, AI, D2C, etc.) ────────────────── */
.mod-badge {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
  padding: 3px 8px !important;
  font-size: 8px !important;
}

/* ─── Nexus chat button (floating) ───────────────────────────── */
.nexus-float, [style*="border-radius:50%"][style*="position:fixed"] {
  box-shadow: 0 4px 20px rgba(79,143,255,.2), 0 0 40px rgba(124,92,252,.1) !important;
}

/* ─── Number formatting: tabular for alignment ───────────────── */
td:last-child, td:nth-last-child(2), .revenue, [style*="text-align:right"] {
  font-variant-numeric: tabular-nums;
}

/* ─── Light mode: kpi-card ───────────────────────────────────── */
html:not(.dark) .kpi-card {
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,249,252,.8)) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html:not(.dark) .kpi-card::before {
  background: linear-gradient(90deg, transparent, rgba(79,143,255,.25), transparent);
}
html:not(.dark) .sem-card {
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(248,249,252,.7)) !important;
  border-color: rgba(0,0,0,.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2.3 — Loading & Spinner Polish
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Spinner: accent color + smoother animation ─────────────── */
.spinner {
  border-color: rgba(79,143,255,.15) !important;
  border-top-color: var(--accent, #4f8fff) !important;
  border-width: 2.5px !important;
  animation: cx-spin 0.7s cubic-bezier(.4,.1,.6,.9) infinite !important;
}
@keyframes cx-spin {
  to { transform: rotate(360deg); }
}

/* Loading text after spinner */
.loading p, .loading span {
  font-family: var(--font) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  letter-spacing: 0.02em;
}

/* ─── Semaphore loading shimmer: match design tokens ─────────── */
.sem-loading {
  background: linear-gradient(90deg, rgba(79,143,255,.05) 25%, rgba(79,143,255,.12) 50%, rgba(79,143,255,.05) 75%) !important;
  background-size: 200% 100% !important;
}

/* ─── Refresh/sync buttons: consistent style ─────────────────── */
button[onclick*="sync"], button[onclick*="refresh"], button[onclick*="Actualizar"],
.btn-sync, .btn-refresh {
  font-family: var(--font) !important;
  border-radius: 8px !important;
  transition: all var(--duration-fast) var(--ease) !important;
}

/* ─── Info/help boxes: glass style ───────────────────────────── */
.info-box, .help-text, [class*="info-card"] {
  background: rgba(79,143,255,.04) !important;
  border: 1px solid rgba(79,143,255,.1) !important;
  border-radius: 12px !important;
  font-family: var(--font) !important;
}

/* ─── Number badges (alerts count, etc.) ─────────────────────── */
.num-badge, [class*="badge-num"], .count-badge {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  min-width: 18px !important;
  text-align: center;
  border-radius: 8px !important;
}

/* ─── Progress bars: smoother, rounded ───────────────────────── */
.bar-h, [class*="progress-bar"], [style*="background:linear-gradient"][style*="border-radius"] {
  border-radius: 4px !important;
  transition: width 0.6s var(--ease) !important;
}

/* ─── Tooltip-style hover info ───────────────────────────────── */
[title]:hover {
  cursor: help;
}

/* ─── Code/mono blocks: styled ───────────────────────────────── */
code, pre, .mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 11px !important;
}

/* ─── Chip/pill tags ─────────────────────────────────────────── */
.chip, .pill, .tag {
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0.3px;
}

/* ── Intelligence Briefs (universal) ── */
.cx-brief{background:var(--bg2,#0f1629);border-left:3px solid var(--accent,#4f8fff);border-radius:0 10px 10px 0;padding:14px 18px;margin-bottom:16px;font-size:13px;line-height:1.7;color:var(--text2,#c0c8d8);display:none}
.cx-brief b{color:var(--text,#e8edf5);font-weight:700}
.cx-brief i{color:var(--muted,#7d8da6);font-size:12px}
.light .cx-brief{background:var(--card2,#f0f2f7)}
.cx-ai-insight{background:linear-gradient(135deg,rgba(79,143,255,.04),rgba(52,211,153,.04));border:1px solid rgba(79,143,255,.12);border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:13px;line-height:1.7;color:var(--text2,#c0c8d8);display:none}
.cx-ai-insight b{color:var(--text,#e8edf5);font-weight:700}
.cx-ai-body{max-height:3.4em;overflow:hidden;position:relative;transition:max-height .3s}
.cx-ai-body::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1.8em;background:linear-gradient(transparent,rgba(10,15,26,.95));pointer-events:none;transition:opacity .3s}
.light .cx-ai-body::after{background:linear-gradient(transparent,rgba(255,255,255,.95))}
.cx-ai-insight.expanded .cx-ai-body{max-height:3000px}
.cx-ai-insight.expanded .cx-ai-body::after{opacity:0}
.cx-ai-toggle{font-size:10px;color:var(--accent,#4f8fff);cursor:pointer;margin-top:4px;font-weight:600;opacity:.7}
.cx-ai-toggle:hover{opacity:1}
.light .cx-ai-insight{background:linear-gradient(135deg,rgba(79,143,255,.04),rgba(52,211,153,.04))}

/* ── Clickable KPIs + semaphores (global) ── */
.kpi[onclick],.kpi[style*="cursor:pointer"],.kpi-card[onclick],.kpi-card[style*="cursor:pointer"]{transition:.15s;cursor:pointer}
.kpi[onclick]:hover,.kpi[style*="cursor:pointer"]:hover,.kpi-card[onclick]:hover,.kpi-card[style*="cursor:pointer"]:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(79,143,255,.12);border-color:var(--accent,#4f8fff)!important}
.kpi[onclick] .kpi-label::after,.kpi[onclick] .l::after,.kpi-card[onclick] .kpi-label::after{content:" →";opacity:0;transition:opacity .2s}
.kpi[onclick]:hover .kpi-label::after,.kpi[onclick]:hover .l::after,.kpi-card[onclick]:hover .kpi-label::after{opacity:.6}
.card[onclick]{cursor:pointer;transition:border-color .2s,box-shadow .2s}
.card[onclick]:hover{border-color:var(--accent,#4f8fff)!important;box-shadow:0 4px 12px rgba(79,143,255,.08)}
.sem-card[onclick]{transition:.15s}
.sem-card[onclick]:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.2)}

/* ── Global interactive hints ── */
[data-nav]{cursor:pointer;transition:.15s}
[data-nav]:hover{transform:translateY(-2px);opacity:.9}
.sec[data-nav]:hover{border-color:var(--accent)}


/* ═══════════════════════════════════════════════════════════════════
   PORCELANA · CAPA DE ACABADO (v2001)
   Global: se aplica a los 93 modulos sin tocar sus plantillas.
   Solo modo claro (html:not(.dark)) para no alterar el tema oscuro.
   ═══════════════════════════════════════════════════════════════════ */

/* — Navegacion lateral: legible, con marca de posicion — */
html:not(.dark) .sb-nav a{color:var(--text2)!important;font-weight:500;position:relative;
  transition:background .14s ease,color .14s ease}
html:not(.dark) .sb-nav a:hover{background:var(--hover-veil)!important;color:var(--text)!important}
html:not(.dark) .sb-nav a.active{background:var(--brand-soft)!important;color:var(--brand-ink)!important;font-weight:600}
html:not(.dark) .sb-nav a.active::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:3px;
  border-radius:0 3px 3px 0;background:var(--brand)}

/* — Microtipografia de secciones — */
html:not(.dark) .sb-section{color:var(--muted)!important;font-size:10px!important;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600!important}
html:not(.dark) .sb-brand small{color:var(--muted)!important;letter-spacing:.01em}
html:not(.dark) .sb-brand h2{margin-top:2px;letter-spacing:-.015em}

/* — Tarjetas: elevacion por capas en vez de plano — */
html:not(.dark) .card,html:not(.dark) .kpi,html:not(.dark) .sec,html:not(.dark) .panel{
  box-shadow:0 1px 2px rgba(22,24,29,.045),0 1px 1px rgba(22,24,29,.025)!important}
html:not(.dark) .card:hover,html:not(.dark) .kpi:hover{
  box-shadow:0 6px 18px rgba(22,24,29,.075)!important;border-color:var(--border2)!important}
html:not(.dark) .card,html:not(.dark) .kpi,html:not(.dark) .sec{
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}

/* — Titulos con la voz de la marca — */
html:not(.dark) h1,html:not(.dark) h2,html:not(.dark) h3{font-family:var(--hd)!important;letter-spacing:-.012em}

/* — Datos: cifras alineadas (acabado de producto de datos) — */
html:not(.dark) .kpi-val,html:not(.dark) .num,html:not(.dark) td,html:not(.dark) th,
html:not(.dark) .mono,html:not(.dark) code{font-variant-numeric:tabular-nums}

/* — Foco visible: accesibilidad y precision — */
html:not(.dark) :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}

/* — Campos: afordancia clara — */
html:not(.dark) input,html:not(.dark) select,html:not(.dark) textarea{
  background:var(--surface)!important;color:var(--text)!important;border-color:var(--border2)!important}
html:not(.dark) input::placeholder,html:not(.dark) textarea::placeholder{color:var(--dim)!important}
html:not(.dark) input:focus,html:not(.dark) select:focus,html:not(.dark) textarea:focus{
  border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-soft)!important;outline:none}

/* — Tablas legibles — */
html:not(.dark) th{color:var(--muted)!important;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600!important;border-bottom:1px solid var(--border2)!important;background:transparent!important}
html:not(.dark) tbody tr{transition:background .12s ease}
html:not(.dark) tbody tr:hover{background:var(--hover-veil)!important}

/* — Barra inferior de estado — */
html:not(.dark) .statusbar,html:not(.dark) .footer-bar{color:var(--muted)!important;
  border-top:1px solid var(--border)!important;background:var(--surface)!important}


/* ═══ PORCELANA · ACABADO v2 (v2002) — defectos de composicion + caracter ═══ */

/* 1. Marca del lateral: el "volver" deja de pegarse al titulo */
html:not(.dark) .sb-brand a{display:block!important}
html:not(.dark) .sb-brand a>div:first-child{display:block!important;margin-bottom:9px!important;
  opacity:1!important;color:var(--muted)!important;font-size:9.5px!important;letter-spacing:.16em!important}
html:not(.dark) .sb-brand h2{display:block!important;margin:0!important;line-height:1.2;font-size:19px!important;
  letter-spacing:-.02em}
html:not(.dark) .sb-brand{background:linear-gradient(180deg,var(--brand-soft) 0%,transparent 90%)!important}

/* 2. Rotulos de grupo: legibles y separados por filete (eran invisibles) */
html:not(.dark) .sb-collapse-header{color:var(--text2)!important;font-size:10.5px!important;
  font-weight:700!important;letter-spacing:.11em!important;text-transform:uppercase;
  padding-top:17px!important;position:relative;transition:color .12s ease}
html:not(.dark) .sb-collapse-header::after{content:'';position:absolute;left:14px;right:14px;top:7px;
  height:1px;background:var(--border)}
html:not(.dark) .sb-collapse-header:hover{color:var(--brand-ink)!important}

/* 3. KPI: valor y etiqueta dejan de tocarse */
html:not(.dark) .kpi>*+*{margin-left:.5em}
html:not(.dark) .kpi{border-left:3px solid var(--border2)!important}
html:not(.dark) .kpi:hover{border-left-color:var(--brand)!important}

/* 4. La barra de estado ya no pisa el contenido */
html:not(.dark) .main{padding-bottom:46px!important}
html:not(.dark) #ux-statusbar{background:var(--surface)!important;border-top:1px solid var(--border)!important;
  color:var(--muted)!important;opacity:1!important;backdrop-filter:saturate(1.2) blur(6px)}

/* 5. Caracter: las cifras grandes con la voz de la marca */
html:not(.dark) .kpi-val,html:not(.dark) .big,html:not(.dark) .metric-value{
  font-family:var(--hd)!important;letter-spacing:-.025em!important;font-weight:700!important}

/* 6. Jerarquia real: lo critico pesa mas que lo neutro */
html:not(.dark) .card.critical,html:not(.dark) .kpi.critical{border-left-color:var(--red)!important;
  box-shadow:0 1px 2px rgba(195,40,63,.10),0 4px 14px rgba(195,40,63,.06)!important}

/* 7. Separadores con aire (respiracion entre bloques) */
html:not(.dark) .card+.card,html:not(.dark) .sec+.sec{margin-top:14px}


/* ═══ CONTENCION MOVIL (v2025) ═══════════════════════════════════════
   Medido con navegador real en viewport de 390px: /finance llegaba a 980,
   /canales a 520, /pim a 405. Son maquetaciones de escritorio (barras
   laterales fijas, tablas anchas) repartidas por decenas de paginas.
   En vez de rehacer cada una, se contiene el desbordamiento: la PAGINA
   no se desplaza en horizontal, y lo que de verdad necesita anchura
   —las tablas de datos— gana su propio scroll, que es lo correcto.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  html:not(.dark) body, html:not(.dark){max-width:100vw;overflow-x:hidden}
  html:not(.dark) .main,html:not(.dark) .wrap,html:not(.dark) .container,
  html:not(.dark) main,html:not(.dark) .content{max-width:100vw!important;box-sizing:border-box}

  /* Las tablas SI pueden ser anchas: se desplazan ellas, no la pagina */
  html:not(.dark) .table-wrap,html:not(.dark) .tablewrap,
  html:not(.dark) .data-table,html:not(.dark) .mtable,html:not(.dark) .vtable{
    display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  html:not(.dark) table{max-width:100%}
  html:not(.dark) .table-wrap table{min-width:520px}   /* legible al deslizar */

  /* Rejillas de escritorio a una columna */
  html:not(.dark) .kpi-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important}
  html:not(.dark) .cols{grid-template-columns:1fr!important}

  /* Nada suelto puede empujar la pagina */
  html:not(.dark) pre,html:not(.dark) code{white-space:pre-wrap;word-break:break-word}
  html:not(.dark) img,html:not(.dark) svg,html:not(.dark) canvas{max-width:100%;height:auto}
}


/* v2027 · Un titulo dentro de un enlace hereda el azul por defecto del
   navegador (#0000EE, contraste 1,75). Le pasaba a la marca del lateral en
   los modulos que no tenian estilo propio: el nombre del modulo salia en
   azul chillon e ilegible. Detectado con navegador real en /pim. */
html:not(.dark) a h1, html:not(.dark) a h2,
html:not(.dark) a h3, html:not(.dark) a h4{color:var(--ink)}
html:not(.dark) .sb-brand h2{color:var(--ink)!important}
html:not(.dark) .sb-brand a{color:inherit}


/* v2029 · Boton primario: en modulos que definen `.btn{color:var(--accent)}`
   y luego pintan `.btn-primary` con ese mismo acento de fondo, el texto queda
   cobalto sobre cobalto: invisible. Detectado en /pim con navegador real
   (#btn-build "Rebuild catalogo", contraste 1,00). */
html:not(.dark) .btn-primary,
html:not(.dark) button.btn-primary,
html:not(.dark) .btn.btn-primary{color:#fff!important;border-color:transparent}
html:not(.dark) .btn-primary:hover{color:#fff!important}


/* ═══ PORCELANA · REFINADO MOVIL (v2041) ═══════════════════════════════
   Medido con navegador real en viewport de 390px: habia texto a 8px y zonas
   tactiles de 17px (el minimo comodo son 44). Centinela se usa a diario desde
   el telefono, asi que esto no es un detalle menor. */
@media (max-width: 560px) {

  /* 1 · Suelo tipografico: nada por debajo de 11px en la mano */
  html:not(.dark) { --t-xs: 11px; --t-sm: 12px; --t-md: 13.5px; }
  html:not(.dark) .sb-brand a > div:first-child,
  html:not(.dark) .ctnl-atajos-lb,
  html:not(.dark) .cw-tag,
  html:not(.dark) .sb-section,
  html:not(.dark) .sb-collapse-header { font-size: 11px !important; letter-spacing: .08em !important; }
  html:not(.dark) .sb-brand small,
  html:not(.dark) .ctnl-chip em,
  html:not(.dark) .kpi-encurso { font-size: 11px !important; }
  html:not(.dark) .badge, html:not(.dark) .tag,
  html:not(.dark) .ctnl-badge { font-size: 11px !important; padding: 3px 8px !important; }

  /* 1b · Suelo tipografico duro: muchos tamanos vienen en estilo EN LINEA
     (style="font-size:9px"), que ninguna clase puede alcanzar. Los selectores
     de atributo si llegan. */
  html:not(.dark) [style*="font-size:8px"], html:not(.dark) [style*="font-size: 8px"],
  html:not(.dark) [style*="font-size:9px"], html:not(.dark) [style*="font-size: 9px"],
  html:not(.dark) [style*="font-size:9.5px"],
  html:not(.dark) [style*="font-size:10px"], html:not(.dark) [style*="font-size: 10px"],
  html:not(.dark) [style*="font-size:10.5px"] { font-size: 11px !important; }

  /* 1c · Etiquetas de estado y del selector de tema: venian a 8-10px */
  html:not(.dark) .sb-live,
  html:not(.dark) #ctnl-skin-toggle, html:not(.dark) #ctnl-skin-toggle span,
  html:not(.dark) .skin-picker-label { font-size: 11px !important; }
  html:not(.dark) .sb-live { padding: 2px 7px !important; }
  /* la marca del topbar debe poder tocarse comodamente */
  html:not(.dark) #ctnl-topbar .tb-brand,
  html:not(.dark) .tb-brand { min-width: 44px; min-height: 42px;
    display: inline-flex; align-items: center; }

  /* 1d · Ultimos medidos con navegador: contador del topbar de 6px de ancho
     (imposible de acertar) y etiquetas de KPI/estado a 10px */
  html:not(.dark) .tb-btn { min-width: 42px !important; min-height: 42px !important;
    width: auto !important; padding: 0 10px !important;
    display: inline-flex !important; align-items: center; justify-content: center; }
  html:not(.dark) .kpi .l, html:not(.dark) div.l,
  html:not(.dark) .tk-salud, html:not(.dark) .tk-vencido,
  html:not(.dark) #ctnl-skin-btn, html:not(.dark) #ctnl-skin-btn span,
  html:not(.dark) [id*="skin"] span { font-size: 11px !important; }

  /* 1e · Botones de icono (simbolos sueltos como refrescar o cerrar): el texto
     mide poco, asi que sin minimo quedan tiras de 17px imposibles de acertar. */
  html:not(.dark) button:not(.btn-primary):not(.g-tile),
  html:not(.dark) a[role="button"], html:not(.dark) .icon-btn,
  html:not(.dark) .close, html:not(.dark) .cerrar,
  html:not(.dark) [onclick]:is(button, span.x, span.close) { min-width: 38px; min-height: 38px; }

  /* 1f · Cabeceras de tabla: 10,5px es correcto en escritorio, corto en mano */
  html:not(.dark) th, html:not(.dark) table.ctnl-table th { font-size: 11px !important; }

  /* 1g · etiquetas de KPI a 9px en varios modulos */
  html:not(.dark) .kpi-label, html:not(.dark) .k-lab, html:not(.dark) .lbl,
  html:not(.dark) .stat-label, html:not(.dark) .metric-label,
  html:not(.dark) .ctnl-kpi-label { font-size: 11px !important; }

  /* 2 · Zonas tactiles: alto comodo sin romper el flujo del texto */
  html:not(.dark) .sb-nav a,
  html:not(.dark) .tab, html:not(.dark) [class*="-tab"],
  html:not(.dark) .btn, html:not(.dark) button.btn,
  html:not(.dark) .ctnl-chip { min-height: 42px; display: inline-flex; align-items: center; }
  html:not(.dark) .ctnl-star,
  html:not(.dark) .ctnl-pista-x { min-width: 34px; min-height: 34px;
    display: inline-flex; align-items: center; justify-content: center; }
  html:not(.dark) .g-tile { min-height: 78px; }

  /* 3 · Respiracion: en pantalla estrecha, menos apretado */
  html:not(.dark) .card, html:not(.dark) .kpi, html:not(.dark) .sec { padding: 14px !important; }
  html:not(.dark) .ctnl-atajos-in { padding: 10px !important; }

  /* 4 · Nada debe empujar la pagina a lo ancho */
  html:not(.dark) table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html:not(.dark) pre, html:not(.dark) code { overflow-x: auto; max-width: 100%; }
}


/* ═══ UN SOLO ASISTENTE FLOTANTE: NYX (v12.69.2053) ═══════════════════
   Medido con navegador real: en /finance habia TRES botones flotantes
   apilados en el mismo cuadro de 56x56 (#cflo-btn z=2147483000, #fnx-btn
   z=1000, #nexusFab z=90). Solo el de arriba era pulsable; los otros dos
   eran inalcanzables. Ahora manda NYX y el resto deja de flotar. */
#fnx-btn { display: none !important; }

/* El boton de ayuda se aparta para no chocar con NYX */
html:not(.dark) #_help-btn {
  bottom: 92px !important; right: 24px !important;
  width: 40px !important; height: 40px !important;
  background: var(--surface) !important; color: var(--muted) !important;
  border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important;
}
html:not(.dark) #_help-btn:hover { color: var(--brand) !important; border-color: var(--brand) !important; }

/* NYX por encima de todo, pero sin z-index absurdo */
#cflo-btn { z-index: 2147482000 !important; }
#cflo-panel { z-index: 2147482001 !important; }

/* El selector de tema no compite: discreto abajo a la izquierda */
html:not(.dark) #skinPickerWrap { opacity: .72; transition: opacity .15s ease; }
html:not(.dark) #skinPickerWrap:hover { opacity: 1; }