/* Omnicanal shell — tema oscuro + menú estable (sin romper la grilla) */
:root {
  --omni-bg: #070b14;
  --omni-panel: #0f172a;
  --omni-panel2: #111827;
  --omni-line: #1e293b;
  --omni-accent: #10b981;
  --omni-accent2: #6366f1;
  --omni-glow: rgba(16, 185, 129, 0.25);
  --omni-text: #e2e8f0;
  --omni-muted: #94a3b8;
}

/* Tema oscuro por inversion de variables — la app usa estas de forma consistente.
   No se redefinen las areas de la grilla principal, para no romper grid-area:main. */
html.omni-dark {
  --fvtWhite: #0f172a;
  --fvtDarkWhite: #111827;
  --fvtDarkerWhite: #1e293b;
  --fvtBlack: #e2e8f0;
  --fvtBorder: #334155;
}

html.omni-dark body,
html.omni-dark #app {
  background: var(--omni-bg);
  color: var(--omni-text);
}

/* Sidebar: se mantiene DENTRO de la grilla (grid-area sidebar).
   sticky top-0 evita que se vaya al hacer scroll; overflow interno evita que se "pegue"
   o desborde cuando hay muchos módulos. */
html.omni-dark nav[style*="grid-area: sidebar"],
html.omni-dark nav[style*="grid-area:sidebar"] {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #0c1222 0%, #0a0f1a 100%);
  border-right: 1px solid var(--omni-line);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  scrollbar-width: thin;
}

html.omni-dark nav[style*="grid-area: sidebar"]::-webkit-scrollbar,
html.omni-dark nav[style*="grid-area:sidebar"]::-webkit-scrollbar {
  width: 4px;
}

html.omni-dark nav[style*="grid-area: sidebar"]::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

/* Header oscuro con glass */
html.omni-dark [style*="grid-area: header"],
html.omni-dark [style*="grid-area:header"] {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--omni-line);
}

/* Iframes embebidos de módulos omni */
html.omni-dark iframe {
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Overlay modal — nunca debe quedar invisible bloqueando clicks */
#omnicanal-msg-overlay[data-stuck="1"] {
  display: none !important;
  pointer-events: none !important;
}

/* Micro-interacciones sutiles en el menú */
html.omni-dark nav button,
html.omni-dark nav a {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
html.omni-dark nav a:hover {
  transform: translateX(2px);
}