/*
 * LEONIX ERP — LIQUID GLASS
 * Sistema de materiales reconstruido. Todas las reglas viven bajo
 * .theme-liquid-glass para no alterar los demás temas del ERP.
 */

html.theme-liquid-glass {
  --lg-ease: cubic-bezier(.32, .72, 0, 1);
  --lg-spring: cubic-bezier(.23, 1, .32, 1);
  --lg-radius-control: 14px;
  --lg-radius-card: 22px;
  --lg-radius-shell: 28px;
  --lg-accent: #4267e8;
  --lg-accent-soft: rgba(66, 103, 232, .12);
  --lg-success: #0b9e74;
  --lg-danger: #e84868;

  /* Intensidad y Desenfoque por defecto del sistema Liquid Glass */
  --lg-glass-blur: 28px;
  --lg-glass-saturate: 175%;
  --lg-glass-contrast: 103%;
  --sidebar-blur: var(--lg-glass-blur, 32px);
  --topbar-blur: var(--lg-glass-blur, 32px);
  --card-blur: var(--lg-glass-blur, 20px);
  --modal-blur: var(--lg-glass-blur, 24px);
  --footer-blur: var(--lg-glass-blur, 28px);
  min-height: 100%;
}

/* Modos de Intensidad Global de Liquid Glass */
html.theme-liquid-glass[data-liquid-intensity="subtle"],
html.theme-liquid-glass[data-liquid-intensity="subtle"] body {
  --lg-glass-blur: 14px;
  --lg-glass-saturate: 130%;
  --lg-glass-contrast: 101%;
  --sidebar-blur: 14px;
  --topbar-blur: 14px;
  --card-blur: 10px;
  --modal-blur: 12px;
  --footer-blur: 12px;
}
html.theme-liquid-glass[data-liquid-intensity="balanced"],
html.theme-liquid-glass[data-liquid-intensity="balanced"] body {
  --lg-glass-blur: 28px;
  --lg-glass-saturate: 175%;
  --lg-glass-contrast: 103%;
  --sidebar-blur: 32px;
  --topbar-blur: 32px;
  --card-blur: 20px;
  --modal-blur: 24px;
  --footer-blur: 28px;
}
html.theme-liquid-glass[data-liquid-intensity="intense"],
html.theme-liquid-glass[data-liquid-intensity="intense"] body {
  --lg-glass-blur: 42px;
  --lg-glass-saturate: 200%;
  --lg-glass-contrast: 105%;
  --sidebar-blur: 42px;
  --topbar-blur: 42px;
  --card-blur: 30px;
  --modal-blur: 34px;
  --footer-blur: 36px;
}
html.theme-liquid-glass[data-liquid-intensity="ultra"],
html.theme-liquid-glass[data-liquid-intensity="ultra"] body {
  --lg-glass-blur: 56px;
  --lg-glass-saturate: 230%;
  --lg-glass-contrast: 108%;
  --sidebar-blur: 56px;
  --topbar-blur: 56px;
  --card-blur: 42px;
  --modal-blur: 46px;
  --footer-blur: 48px;
}

/* --------------------------------------------------------------------------
   LIENZO — claro, luminoso y con color suficiente para revelar el vidrio.
   -------------------------------------------------------------------------- */
html.theme-liquid-glass:not(.dark),
html.theme-liquid-glass:not(.dark) body {
  --bg: #081b39;
  --bg-2: #163764;
  --text: var(--text-primary, #18243a);
  --muted: var(--text-muted, #68768c);
  --line: var(--border-color, rgba(122, 145, 178, .22));
  --content-bg: #f0f4fa;
  --card-bg: rgba(255, 255, 255, .72);
  --text-primary: #18243a;
  --text-secondary: #68768c;
  --border-color: rgba(122, 145, 178, .22);
  --accent-color: #4267e8;
  color: var(--text-primary, var(--text)) !important;
  background: var(--system-bg,
    radial-gradient(860px 560px at 96% -12%, rgba(71, 141, 245, .38), transparent 67%),
    radial-gradient(720px 520px at -8% 102%, rgba(85, 79, 185, .33), transparent 65%),
    linear-gradient(135deg, #06152f 0%, #102e59 50%, #1b426f 100%)
  ) !important;
  background-color: var(--content-bg, #f0f4fa) !important;
}

/* Fondos seleccionables desde Apariencia > Liquid Glass (Modo Claro) */
:is(html, body)[data-liquid-background="midnight"]:not(.dark),
html:not(.dark)[data-liquid-background="midnight"] body,
html.theme-liquid-glass:not(.dark)[data-liquid-background="midnight"],
html.theme-liquid-glass:not(.dark)[data-liquid-background="midnight"] body {
  background: radial-gradient(860px 560px at 96% -12%, rgba(71, 141, 245, .38), transparent 67%), radial-gradient(720px 520px at -8% 102%, rgba(85, 79, 185, .33), transparent 65%), linear-gradient(135deg, #06152f 0%, #102e59 50%, #1b426f 100%) !important;
  background-color: #0d223f !important;
}
:is(html, body)[data-liquid-background="ocean"]:not(.dark),
html:not(.dark)[data-liquid-background="ocean"] body,
html.theme-liquid-glass:not(.dark)[data-liquid-background="ocean"],
html.theme-liquid-glass:not(.dark)[data-liquid-background="ocean"] body {
  background: radial-gradient(850px 560px at 94% -12%, rgba(50, 198, 234, .35), transparent 66%), radial-gradient(680px 520px at -4% 100%, rgba(24, 105, 190, .38), transparent 64%), linear-gradient(135deg, #031f38 0%, #075171 54%, #0b7590 100%) !important;
  background-color: #052c4c !important;
}
:is(html, body)[data-liquid-background="indigo"]:not(.dark),
html:not(.dark)[data-liquid-background="indigo"] body,
html.theme-liquid-glass:not(.dark)[data-liquid-background="indigo"],
html.theme-liquid-glass:not(.dark)[data-liquid-background="indigo"] body {
  background: radial-gradient(840px 560px at 94% -12%, rgba(108, 137, 255, .42), transparent 66%), radial-gradient(700px 520px at -4% 100%, rgba(159, 94, 238, .28), transparent 65%), linear-gradient(135deg, #11183b 0%, #28386f 53%, #4c5793 100%) !important;
  background-color: #192451 !important;
}
:is(html, body)[data-liquid-background="pearl"]:not(.dark),
html:not(.dark)[data-liquid-background="pearl"] body,
html.theme-liquid-glass:not(.dark)[data-liquid-background="pearl"],
html.theme-liquid-glass:not(.dark)[data-liquid-background="pearl"] body {
  background: radial-gradient(840px 560px at 94% -12%, rgba(125, 171, 255, .36), transparent 66%), radial-gradient(700px 520px at -4% 100%, rgba(194, 167, 255, .27), transparent 64%), linear-gradient(135deg, #f8fbff 0%, #edf3fb 48%, #e6edf7 100%) !important;
  background-color: #eaf0f8 !important;
}

/* Fondos seleccionables desde Apariencia > Liquid Glass (Modo Oscuro) */
:is(html, body)[data-liquid-background="midnight"].dark,
html.dark[data-liquid-background="midnight"] body,
html.theme-liquid-glass.dark[data-liquid-background="midnight"],
html.theme-liquid-glass.dark[data-liquid-background="midnight"] body {
  background: radial-gradient(860px 560px at 96% -12%, rgba(59, 130, 246, .30), transparent 67%), radial-gradient(720px 520px at -8% 102%, rgba(99, 102, 241, .25), transparent 65%), linear-gradient(135deg, #030a16 0%, #071326 50%, #0b1d3a 100%) !important;
  background-color: #030a16 !important;
}
:is(html, body)[data-liquid-background="ocean"].dark,
html.dark[data-liquid-background="ocean"] body,
html.theme-liquid-glass.dark[data-liquid-background="ocean"],
html.theme-liquid-glass.dark[data-liquid-background="ocean"] body {
  background: radial-gradient(850px 560px at 94% -12%, rgba(34, 211, 238, .26), transparent 66%), radial-gradient(680px 520px at -4% 100%, rgba(14, 116, 144, .30), transparent 64%), linear-gradient(135deg, #021220 0%, #042233 54%, #073444 100%) !important;
  background-color: #021220 !important;
}
:is(html, body)[data-liquid-background="indigo"].dark,
html.dark[data-liquid-background="indigo"] body,
html.theme-liquid-glass.dark[data-liquid-background="indigo"],
html.theme-liquid-glass.dark[data-liquid-background="indigo"] body {
  background: radial-gradient(840px 560px at 94% -12%, rgba(129, 140, 248, .30), transparent 66%), radial-gradient(700px 520px at -4% 100%, rgba(168, 85, 247, .24), transparent 65%), linear-gradient(135deg, #080c1d 0%, #131733 53%, #1e2148 100%) !important;
  background-color: #080c1d !important;
}
:is(html, body)[data-liquid-background="pearl"].dark,
html.dark[data-liquid-background="pearl"] body,
html.theme-liquid-glass.dark[data-liquid-background="pearl"],
html.theme-liquid-glass.dark[data-liquid-background="pearl"] body {
  background: radial-gradient(850px 580px at 100% -10%, rgba(148, 163, 184, .25), transparent 67%), radial-gradient(700px 540px at -10% 100%, rgba(99, 102, 241, .22), transparent 65%), linear-gradient(135deg, #0b1220, #151f32) !important;
  background-color: #0b1220 !important;
}


html.theme-liquid-glass.dark,
html.theme-liquid-glass.dark body {
  --bg: #0b1220;
  --bg-2: #121d30;
  --text: var(--text-primary, #f4f7ff);
  --muted: var(--text-muted, #a5b0c4);
  --line: var(--border-color, rgba(255, 255, 255, .12));
  --content-bg: #0b1220;
  --card-bg: rgba(20, 31, 49, .68);
  --text-primary: #f4f7ff;
  --text-secondary: #a5b0c4;
  --border-color: rgba(255, 255, 255, .12);
  --accent-color: #8bb9ff;
  --lg-accent: #8bb9ff;
  --lg-accent-soft: rgba(139, 185, 255, .16);
  color: var(--text-primary, var(--text)) !important;
  background: var(--system-bg,
    radial-gradient(850px 580px at 100% -10%, rgba(48, 103, 191, .29), transparent 67%),
    radial-gradient(700px 540px at -10% 100%, rgba(117, 74, 181, .22), transparent 65%),
    linear-gradient(135deg, #0b1220, #111d30)
  ) !important;
  background-color: var(--content-bg, #0b1220) !important;
}

/* ===== Canvas de Fondo de Pantalla HD (Hardware-Accelerated / 60 FPS) ===== */
#leonix-wallpaper-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  contain: paint !important;
}
#leonix-wallpaper-canvas.hidden {
  display: none !important;
}
#leonix-wallpaper-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  image-rendering: high-quality !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  will-change: auto !important;
}
#leonix-wallpaper-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  transition: background-color 0.2s ease !important;
}
#app-container {
  position: relative !important;
  z-index: 1 !important;
}

/* Desactivar iluminación ambiental pesada cuando hay wallpaper activo */
html.has-theme-wallpaper #liquid-glass-ambient,
body.has-theme-wallpaper #liquid-glass-ambient,
html.theme-liquid-glass.has-theme-wallpaper #liquid-glass-ambient {
  display: none !important;
}

/* Soporte de Wallpaper cuando has-theme-wallpaper está activo */
html.has-theme-wallpaper,
body.has-theme-wallpaper,
html.has-theme-wallpaper body,
html.has-theme-wallpaper[data-liquid-background],
body.has-theme-wallpaper[data-liquid-background],
html.has-theme-wallpaper[data-liquid-background] body,
html.theme-liquid-glass.has-theme-wallpaper,
html.theme-liquid-glass.has-theme-wallpaper body,
html.theme-liquid-glass.has-theme-wallpaper[data-liquid-background],
html.theme-liquid-glass.has-theme-wallpaper[data-liquid-background] body,
html.theme-liquid-glass:not(.dark).has-theme-wallpaper[data-liquid-background],
html.theme-liquid-glass:not(.dark).has-theme-wallpaper[data-liquid-background] body,
html.theme-liquid-glass.dark.has-theme-wallpaper[data-liquid-background],
html.theme-liquid-glass.dark.has-theme-wallpaper[data-liquid-background] body {
  background: transparent !important;
  background-color: transparent !important;
}

html.theme-liquid-glass body,
html.theme-liquid-glass #app-container,
html.theme-liquid-glass #main-content-wrapper,
html.theme-liquid-glass #main-content,
html.theme-liquid-glass .main-content-area,
html.theme-liquid-glass .page-content,
html.theme-liquid-glass #page-inicio {
  min-height: 100%;
}

html.theme-liquid-glass #app-container,
html.theme-liquid-glass #main-content-wrapper,
html.theme-liquid-glass #main-content,
html.theme-liquid-glass .main-content-area,
html.theme-liquid-glass .page-content,
html.theme-liquid-glass #page-inicio {
  background: transparent !important;
  background-color: transparent !important;
}

/* Iluminación ambiental discreta optimizada para GPU (60fps) */
html.theme-liquid-glass #liquid-glass-ambient {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  contain: strict !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
}

html.theme-liquid-glass .ambient {
  position: absolute !important;
  width: 480px !important;
  height: 480px !important;
  border-radius: 50% !important;
  filter: blur(50px) !important;
  pointer-events: none !important;
  contain: strict !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  will-change: auto !important;
}

html.theme-liquid-glass:not(.dark) .ambient { opacity: .18 !important; }
html.theme-liquid-glass:not(.dark) .ambient-a { top: -220px; left: 25%; background: #8aa8ff; }
html.theme-liquid-glass:not(.dark) .ambient-b { top: 12%; right: -240px; background: #7ddcf2; }
html.theme-liquid-glass:not(.dark) .ambient-c { bottom: -280px; left: 34%; background: #d0adff; }
html.theme-liquid-glass.dark .ambient { opacity: .21 !important; }
html.theme-liquid-glass.dark .ambient-a { top: -220px; left: 25%; background: #4364d8; }
html.theme-liquid-glass.dark .ambient-b { top: 12%; right: -240px; background: #278faa; }
html.theme-liquid-glass.dark .ambient-c { bottom: -280px; left: 34%; background: #7144ac; }

/* Tonalidades de Iluminación Ambiental según Atmósfera activa */
:is(html, body)[data-liquid-background="midnight"] .ambient-a,
[data-liquid-background="midnight"] .ambient-a { background: #3b82f6 !important; }
:is(html, body)[data-liquid-background="midnight"] .ambient-b,
[data-liquid-background="midnight"] .ambient-b { background: #6366f1 !important; }
:is(html, body)[data-liquid-background="midnight"] .ambient-c,
[data-liquid-background="midnight"] .ambient-c { background: #1d4ed8 !important; }

:is(html, body)[data-liquid-background="ocean"] .ambient-a,
[data-liquid-background="ocean"] .ambient-a { background: #06b6d4 !important; }
:is(html, body)[data-liquid-background="ocean"] .ambient-b,
[data-liquid-background="ocean"] .ambient-b { background: #0284c7 !important; }
:is(html, body)[data-liquid-background="ocean"] .ambient-c,
[data-liquid-background="ocean"] .ambient-c { background: #0ea5e9 !important; }

:is(html, body)[data-liquid-background="indigo"] .ambient-a,
[data-liquid-background="indigo"] .ambient-a { background: #6366f1 !important; }
:is(html, body)[data-liquid-background="indigo"] .ambient-b,
[data-liquid-background="indigo"] .ambient-b { background: #8b5cf6 !important; }
:is(html, body)[data-liquid-background="indigo"] .ambient-c,
[data-liquid-background="indigo"] .ambient-c { background: #a855f7 !important; }

:is(html, body)[data-liquid-background="pearl"] .ambient-a,
[data-liquid-background="pearl"] .ambient-a { background: #8aa8ff !important; }
:is(html, body)[data-liquid-background="pearl"] .ambient-b,
[data-liquid-background="pearl"] .ambient-b { background: #7ddcf2 !important; }
:is(html, body)[data-liquid-background="pearl"] .ambient-c,
[data-liquid-background="pearl"] .ambient-c { background: #d0adff !important; }


html.theme-liquid-glass #main-content-wrapper { position: relative; z-index: 1; }

/* Scroll fino: presente sólo cuando hace falta y deliberadamente discreto. */
html.theme-liquid-glass,
html.theme-liquid-glass * {
  scrollbar-width: thin;
  scrollbar-color: rgba(202, 217, 241, .42) transparent;
}
html.theme-liquid-glass::-webkit-scrollbar,
html.theme-liquid-glass body::-webkit-scrollbar,
html.theme-liquid-glass ::-webkit-scrollbar { width: 7px; height: 7px; }
html.theme-liquid-glass::-webkit-scrollbar-track,
html.theme-liquid-glass body::-webkit-scrollbar-track,
html.theme-liquid-glass ::-webkit-scrollbar-track { background: transparent; }
html.theme-liquid-glass::-webkit-scrollbar-thumb,
html.theme-liquid-glass body::-webkit-scrollbar-thumb,
html.theme-liquid-glass ::-webkit-scrollbar-thumb {
  background: rgba(206, 220, 242, .43);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
html.theme-liquid-glass::-webkit-scrollbar-thumb:hover,
html.theme-liquid-glass body::-webkit-scrollbar-thumb:hover,
html.theme-liquid-glass ::-webkit-scrollbar-thumb:hover { background-color: rgba(228, 238, 255, .72); }
html.theme-liquid-glass.dark,
html.theme-liquid-glass.dark * { scrollbar-color: rgba(179, 203, 236, .38) transparent; }
html.theme-liquid-glass.dark ::-webkit-scrollbar-thumb { background-color: rgba(179, 203, 236, .34); }

/* Menú sin barra de scroll visible */
html.theme-liquid-glass #sidebar,
html.theme-liquid-glass aside#sidebar,
html.theme-liquid-glass #sidebar-nav-container,
html.theme-liquid-glass aside#sidebar #sidebar-nav-container {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html.theme-liquid-glass #sidebar::-webkit-scrollbar,
html.theme-liquid-glass aside#sidebar::-webkit-scrollbar,
html.theme-liquid-glass #sidebar-nav-container::-webkit-scrollbar,
html.theme-liquid-glass aside#sidebar #sidebar-nav-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* --------------------------------------------------------------------------
   NAVEGACIÓN — la única capa de vidrio intenso, claramente separada.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html.theme-liquid-glass #sidebar,
  html.theme-liquid-glass aside#sidebar {
    top: 88px !important;
    left: 16px !important;
    bottom: 78px !important;
    width: 272px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px !important;
    border-radius: var(--lg-radius-shell) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html.theme-liquid-glass #sidebar:not(.collapsed) ~ #main-content-wrapper,
  html.theme-liquid-glass #main-content-wrapper.ml-64,
  html.theme-liquid-glass #main-content-wrapper.md\:ml-64 {
    margin-left: 304px !important;
    width: calc(100% - 304px) !important;
    max-width: calc(100% - 304px) !important;
    padding-right: 16px !important;
  }

  html.theme-liquid-glass #sidebar.collapsed ~ #main-content-wrapper,
  html.theme-liquid-glass #main-content-wrapper.ml-20,
  html.theme-liquid-glass #main-content-wrapper.md\:ml-20 {
    margin-left: 104px !important;
    width: calc(100% - 104px) !important;
    max-width: calc(100% - 104px) !important;
    padding-right: 16px !important;
  }

  /* El botón hamburguesa oculta el menú por completo y libera el contenido. */
  html.theme-liquid-glass #sidebar.sidebar-hidden,
  html.theme-liquid-glass aside#sidebar.sidebar-hidden,
  html.theme-liquid-glass #sidebar.-translate-x-full:not(.mobile-open),
  html.theme-liquid-glass aside#sidebar.-translate-x-full:not(.mobile-open) {
    transform: translateX(calc(-100% - 32px)) !important;
    -webkit-transform: translateX(calc(-100% - 32px)) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.25s ease !important;
  }
  html.theme-liquid-glass #sidebar.sidebar-hidden ~ #main-content-wrapper,
  html.theme-liquid-glass #sidebar.-translate-x-full:not(.mobile-open) ~ #main-content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Espacio lateral equilibrado para que el contenido no cubra todo el ancho pegado a los bordes */
  html.theme-liquid-glass:not(.pos-active) #main-content,
  :fullscreen html.theme-liquid-glass:not(.pos-active) #main-content,
  :-webkit-full-screen html.theme-liquid-glass:not(.pos-active) #main-content,
  html.theme-liquid-glass:fullscreen:not(.pos-active) #main-content,
  html.theme-liquid-glass:-webkit-full-screen:not(.pos-active) #main-content,
  body.mobile-fullscreen-active html.theme-liquid-glass:not(.pos-active) #main-content {
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }
  html.theme-liquid-glass #main-content .max-w-7xl,
  html.theme-liquid-glass .page-content .max-w-7xl,
  html.theme-liquid-glass #main-content .max-w-\[90rem\],
  html.theme-liquid-glass .page-content .max-w-\[90rem\],
  html.theme-liquid-glass #main-content .max-w-\[1400px\],
  html.theme-liquid-glass .page-content .max-w-\[1400px\],
  html.theme-liquid-glass #page-crm > div,
  html.theme-liquid-glass #page-inicio > div:not(.grid),
  :fullscreen html.theme-liquid-glass #main-content .max-w-7xl,
  :-webkit-full-screen html.theme-liquid-glass #main-content .max-w-7xl,
  html.theme-liquid-glass:fullscreen #main-content .max-w-7xl,
  body.mobile-fullscreen-active html.theme-liquid-glass #main-content .max-w-7xl,
  :fullscreen html.theme-liquid-glass .page-content .max-w-7xl,
  :-webkit-full-screen html.theme-liquid-glass .page-content .max-w-7xl,
  html.theme-liquid-glass:fullscreen .page-content .max-w-7xl,
  body.mobile-fullscreen-active html.theme-liquid-glass .page-content .max-w-7xl,
  :fullscreen html.theme-liquid-glass .page-content .max-w-\[90rem\],
  :-webkit-full-screen html.theme-liquid-glass .page-content .max-w-\[90rem\],
  html.theme-liquid-glass:fullscreen .page-content .max-w-\[90rem\],
  body.mobile-fullscreen-active html.theme-liquid-glass .page-content .max-w-\[90rem\],
  :fullscreen html.theme-liquid-glass #page-inicio > div:not(.grid),
  :-webkit-full-screen html.theme-liquid-glass #page-inicio > div:not(.grid),
  html.theme-liquid-glass:fullscreen #page-inicio > div:not(.grid),
  body.mobile-fullscreen-active html.theme-liquid-glass #page-inicio > div:not(.grid),
  :fullscreen html.theme-liquid-glass #page-crm > div,
  :-webkit-full-screen html.theme-liquid-glass #page-crm > div,
  html.theme-liquid-glass:fullscreen #page-crm > div,
  body.mobile-fullscreen-active html.theme-liquid-glass #page-crm > div {
    width: 100% !important;
    max-width: min(calc(100% - 48px), 1480px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

html.theme-liquid-glass #sidebar,
html.theme-liquid-glass aside#sidebar,
html.theme-liquid-glass #top-bar,
html.theme-liquid-glass header#top-bar {
  isolation: isolate;
  border-radius: var(--lg-radius-shell) !important;
  transition: background .35s var(--lg-ease), box-shadow .35s var(--lg-ease), border-color .35s var(--lg-ease), transform .2s var(--lg-ease) !important;
}

/* Menú blanco con blur: neutralizar sombras/overlays oscuros de neo-sidebar */
html.theme-liquid-glass #sidebar.neo-sidebar::before,
html.theme-liquid-glass #sidebar::before {
  display: none !important;
}
html.theme-liquid-glass #sidebar-nav-container,
html.theme-liquid-glass #sidebar nav,
html.theme-liquid-glass #sidebar .sidebar-item-group,
html.theme-liquid-glass #sidebar .sidebar-header,
html.theme-liquid-glass #sidebar .submenu,
html.theme-liquid-glass #sidebar-toggle-container {
  background-color: transparent !important;
}


html.theme-liquid-glass:not(.dark) #sidebar,
html.theme-liquid-glass:not(.dark) aside#sidebar {
  background: var(--sidebar-bg, linear-gradient(138deg, rgba(255,255,255,.72), rgba(255,255,255,.52))) !important;
  border: 1px solid var(--sidebar-border, rgba(255,255,255,.85)) !important;
  box-shadow: inset 0 1px 1.5px rgba(255,255,255,.98), 0 20px 42px -22px rgba(37, 55, 88, .22), 0 2px 6px rgba(37,55,88,.05) !important;
  backdrop-filter: blur(var(--sidebar-blur, var(--lg-glass-blur, 28px))) saturate(var(--lg-glass-saturate, 190%)) contrast(var(--lg-glass-contrast, 103%)) !important;
  -webkit-backdrop-filter: blur(var(--sidebar-blur, var(--lg-glass-blur, 28px))) saturate(var(--lg-glass-saturate, 190%)) contrast(var(--lg-glass-contrast, 103%)) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  contain: layout style;
}

html.theme-liquid-glass:not(.dark) #top-bar,
html.theme-liquid-glass:not(.dark) header#top-bar {
  background: var(--topbar-gradient, var(--topbar-bg, linear-gradient(138deg, rgba(255,255,255,.92), rgba(255,255,255,.62)))) !important;
  border: 1px solid var(--topbar-border, rgba(255,255,255,.90)) !important;
  box-shadow: inset 0 1px 1.5px rgba(255,255,255,.98), 0 20px 42px -22px rgba(37, 55, 88, .32), 0 2px 6px rgba(37,55,88,.05) !important;
  backdrop-filter: blur(var(--topbar-blur, var(--lg-glass-blur, 32px))) saturate(var(--lg-glass-saturate, 190%)) contrast(var(--lg-glass-contrast, 103%)) !important;
  -webkit-backdrop-filter: blur(var(--topbar-blur, var(--lg-glass-blur, 32px))) saturate(var(--lg-glass-saturate, 190%)) contrast(var(--lg-glass-contrast, 103%)) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  contain: layout style;
}

html.theme-liquid-glass.dark #sidebar,
html.theme-liquid-glass.dark aside#sidebar {
  background: var(--sidebar-bg, linear-gradient(138deg, rgba(20, 31, 49, .82), rgba(13, 21, 35, .72))) !important;
  border: 1px solid var(--sidebar-border, rgba(255, 255, 255, .14)) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), 0 20px 42px -20px rgba(0, 0, 0, .6) !important;
  backdrop-filter: blur(var(--sidebar-blur, var(--lg-glass-blur, 32px))) saturate(var(--lg-glass-saturate, 180%)) !important;
  -webkit-backdrop-filter: blur(var(--sidebar-blur, var(--lg-glass-blur, 32px))) saturate(var(--lg-glass-saturate, 180%)) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  contain: layout style;
}

html.theme-liquid-glass.dark #top-bar,
html.theme-liquid-glass.dark header#top-bar {
  background: var(--topbar-gradient, var(--topbar-bg, linear-gradient(138deg, rgba(35,48,72,.82), rgba(13,23,39,.71)))) !important;
  border: 1px solid var(--topbar-border, rgba(255,255,255,.16)) !important;
  box-shadow: inset 0 1px 1.5px rgba(255,255,255,.18), 0 24px 48px -22px rgba(0,0,0,.74) !important;
  backdrop-filter: blur(var(--topbar-blur, var(--lg-glass-blur, 34px))) saturate(var(--lg-glass-saturate, 175%)) contrast(var(--lg-glass-contrast, 106%)) !important;
  -webkit-backdrop-filter: blur(var(--topbar-blur, var(--lg-glass-blur, 34px))) saturate(var(--lg-glass-saturate, 175%)) contrast(var(--lg-glass-contrast, 106%)) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  contain: layout style;
}

html.theme-liquid-glass #top-bar,
html.theme-liquid-glass header#top-bar {
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  margin: 0 !important;
  min-height: 62px !important;
  height: 62px !important;
  padding: 9px 14px !important;
  overflow: visible !important;
  z-index: 70 !important;
}

html.theme-liquid-glass #main-content { padding-top: 96px !important; }

/* La marca vive exclusivamente en el encabezado; el menú gana altura útil. */
html.theme-liquid-glass #sidebar-logo-header { display: none !important; }
html.theme-liquid-glass #sidebar-nav-container { padding-top: 3px !important; }
html.theme-liquid-glass #sidebar-toggle-container { display: none !important; }
html.theme-liquid-glass #topbar-brand { text-decoration: none !important; }
html.theme-liquid-glass:not(.dark) .topbar-brand-logo { filter: none; }
html.theme-liquid-glass.dark .topbar-brand-logo { filter: brightness(0) invert(1); }

/* Footer compacto: misma capa de vidrio que el header y ancho de la aplicación. */
html.theme-liquid-glass #footer-modern-adapter {
  position: relative !important;
  width: calc(100vw - 32px) !important;
  max-width: none !important;
  margin-top: 10px !important;
  padding: 0 !important;
}
html.theme-liquid-glass #sidebar:not(.collapsed):not(.sidebar-hidden) ~ #main-content-wrapper #footer-modern-adapter {
  margin-left: -288px !important;
}
html.theme-liquid-glass #sidebar.collapsed:not(.sidebar-hidden) ~ #main-content-wrapper #footer-modern-adapter {
  margin-left: -88px !important;
}
html.theme-liquid-glass #sidebar.sidebar-hidden ~ #main-content-wrapper #footer-modern-adapter {
  margin-left: 16px !important;
}
/* Footer: cápsula flotante de cristal líquido en una sola fila compacta */
html.theme-liquid-glass #app-footer.premium-footer {
  min-height: 44px !important;
  height: 46px !important;
  max-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html.theme-liquid-glass:not(.dark) #app-footer.premium-footer {
  background: var(--footer-gradient, var(--footer-bg, linear-gradient(138deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.72)))) !important;
  border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.92)) !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 1), 0 14px 32px -16px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(var(--footer-blur, var(--lg-glass-blur, 28px))) saturate(var(--lg-glass-saturate, 180%)) contrast(var(--lg-glass-contrast, 102%)) !important;
  -webkit-backdrop-filter: blur(var(--footer-blur, var(--lg-glass-blur, 28px))) saturate(var(--lg-glass-saturate, 180%)) contrast(var(--lg-glass-contrast, 102%)) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  contain: layout style;
  color: var(--footer-text, #1e293b) !important;
}

html.theme-liquid-glass.dark #app-footer.premium-footer {
  background: var(--footer-gradient, var(--footer-bg, linear-gradient(138deg, rgba(35, 48, 72, 0.85), rgba(13, 23, 39, 0.75)))) !important;
  border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.16)) !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.18), 0 16px 32px -18px rgba(0, 0, 0, 0.70) !important;
  backdrop-filter: blur(var(--footer-blur, var(--lg-glass-blur, 30px))) saturate(var(--lg-glass-saturate, 175%)) !important;
  -webkit-backdrop-filter: blur(var(--footer-blur, var(--lg-glass-blur, 30px))) saturate(var(--lg-glass-saturate, 175%)) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  contain: layout style;
  color: var(--footer-text, #f1f5f9) !important;
}

html.theme-liquid-glass #app-footer .footer-glass-container {
  min-height: 44px !important;
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* LEFT: Marca, Logo y Versión */
html.theme-liquid-glass #app-footer .footer-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
html.theme-liquid-glass #app-footer .footer-brand-logo {
  height: 20px !important;
  width: auto !important;
  object-fit: contain !important;
}
html.theme-liquid-glass.dark #app-footer .footer-brand-logo { filter: brightness(0) invert(1) !important; }
html.theme-liquid-glass #app-footer .footer-brand-text {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
html.theme-liquid-glass:not(.dark) #app-footer .footer-brand-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  color: #0f172a !important;
}
html.theme-liquid-glass.dark #app-footer .footer-brand-name { font-size: 12px !important; font-weight: 800 !important; color: #fff !important; }
html.theme-liquid-glass:not(.dark) #app-footer .footer-brand-sub { font-size: 11px !important; font-weight: 500 !important; color: #64748b !important; }
html.theme-liquid-glass.dark #app-footer .footer-brand-sub { font-size: 11px !important; font-weight: 500 !important; color: #94a3b8 !important; }

/* CENTER: Suscripción y Copyright en una sola fila */
html.theme-liquid-glass #app-footer .footer-center {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
  flex: 1 !important;
  white-space: nowrap !important;
}

/* Ocultar píldoras de salud del sistema solicitadas por el usuario (API, DB, SRI, Beta, 0m) */
html.theme-liquid-glass #app-footer .footer-health-pills {
  display: none !important;
}

/* BADGE DE SUSCRIPCIÓN CON TIEMPO RESTANTE */
html.theme-liquid-glass #app-footer #footer-subscription-container {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
html.theme-liquid-glass #app-footer #footer-subscription-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  white-space: nowrap !important;
}
html.theme-liquid-glass:not(.dark) #app-footer #footer-subscription-badge.status-active,
html.theme-liquid-glass:not(.dark) #app-footer #footer-subscription-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(255, 255, 255, 0.85)) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #065f46 !important;
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.25) !important;
}
html.theme-liquid-glass.dark #app-footer #footer-subscription-badge.status-active,
html.theme-liquid-glass.dark #app-footer #footer-subscription-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(255, 255, 255, 0.08)) !important;
  border: 1px solid rgba(16, 185, 129, 0.40) !important;
  color: #6ee7b7 !important;
}
html.theme-liquid-glass:not(.dark) #app-footer #footer-subscription-badge.status-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(255, 255, 255, 0.85)) !important;
  border: 1px solid rgba(245, 158, 11, 0.40) !important;
  color: #92400e !important;
  box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.25) !important;
}
html.theme-liquid-glass:not(.dark) #app-footer #footer-subscription-badge.status-critical {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(255, 255, 255, 0.85)) !important;
  border: 1px solid rgba(239, 68, 68, 0.40) !important;
  color: #991b1b !important;
  box-shadow: 0 2px 8px -2px rgba(239, 68, 68, 0.25) !important;
}
html.theme-liquid-glass #app-footer #footer-subscription-badge:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Texto de copyright en el centro junto a la suscripción */
html.theme-liquid-glass #app-footer .footer-copyright-line {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  letter-spacing: .02em !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.theme-liquid-glass:not(.dark) #app-footer .footer-copyright-line { color: #475569 !important; }
html.theme-liquid-glass.dark #app-footer .footer-copyright-line { color: #94a3b8 !important; }

/* RIGHT: Chip de Sesión, Reloj y Acciones */
html.theme-liquid-glass #app-footer .footer-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
html.theme-liquid-glass #app-footer .footer-session-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
html.theme-liquid-glass:not(.dark) #app-footer .footer-session-chip {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  color: #334155 !important;
}
html.theme-liquid-glass.dark #app-footer .footer-session-chip {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #cbd5e1 !important;
}
html.theme-liquid-glass #app-footer .footer-session-chip i { color: #4267e8 !important; }
html.theme-liquid-glass #app-footer .footer-clock {
  display: none !important;
}
html.theme-liquid-glass:not(.dark) #app-footer .footer-clock { color: #475569 !important; }
html.theme-liquid-glass.dark #app-footer .footer-clock { color: #94a3b8 !important; }
html.theme-liquid-glass #app-footer .footer-action-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
html.theme-liquid-glass #app-footer .footer-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
}
html.theme-liquid-glass:not(.dark) #app-footer .footer-icon-btn {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  color: #334155 !important;
}
html.theme-liquid-glass:not(.dark) #app-footer .footer-icon-btn:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}
html.theme-liquid-glass.dark #app-footer .footer-icon-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #cbd5e1 !important;
}
html.theme-liquid-glass #app-footer .footer-top-bar { display: none !important; }

html.theme-liquid-glass #sidebar-logo-header {
  min-height: 70px !important;
  padding: 8px 12px 16px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--line) !important;
}

html.theme-liquid-glass:not(.dark) #sidebar .logo-text,
html.theme-liquid-glass:not(.dark) #topbar-company-name,
html.theme-liquid-glass:not(.dark) #topbar-user-name { color: #17243a !important; }
html.theme-liquid-glass.dark #sidebar .logo-text,
html.theme-liquid-glass.dark #topbar-company-name,
html.theme-liquid-glass.dark #topbar-user-name { color: #f6f8ff !important; }

/* Navegación interna: cápsulas translúcidas / esmeriladas (Apple Glass). */
html.theme-liquid-glass #sidebar-nav-container { padding: 2px 0 !important; }
html.theme-liquid-glass #sidebar .nav-btn,
html.theme-liquid-glass #sidebar.neo-sidebar .nav-btn,
html.theme-liquid-glass #sidebar-nav-container .nav-btn,
html.theme-liquid-glass #sidebar .s-item,
html.theme-liquid-glass #sidebar.neo-sidebar .s-item,
html.theme-liquid-glass #sidebar .submenu .nav-btn,
html.theme-liquid-glass #sidebar .submenu .s-item {
  width: calc(100% - 8px) !important;
  margin: 3px 4px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--sidebar-item-border, transparent) !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--sidebar-item-bg, transparent) !important;
  background-color: var(--sidebar-item-bg, transparent) !important;
  backdrop-filter: blur(var(--sidebar-item-blur, 0px)) saturate(var(--lg-glass-saturate, 180%)) !important;
  -webkit-backdrop-filter: blur(var(--sidebar-item-blur, 0px)) saturate(var(--lg-glass-saturate, 180%)) !important;
  box-shadow: var(--sidebar-item-shadow, none) !important;
  color: var(--sidebar-text, #1e293b) !important;
  transition: transform .18s var(--lg-ease), background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

/* Letras e ICONOS en reposo */
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn .s-label,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn .s-label,
html.theme-liquid-glass:not(.dark) #sidebar .s-item .s-label,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .s-item .s-label,
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn span,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn span {
  color: var(--sidebar-text, #1e293b) !important;
  font-weight: 600 !important;
}

html.theme-liquid-glass:not(.dark) #sidebar .nav-btn:not(.active) i:not(.s-arrow):not(.chev),
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn:not(.active) i:not(.s-arrow):not(.chev),
html.theme-liquid-glass:not(.dark) #sidebar .s-item:not(.active) i:not(.s-arrow):not(.chev),
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .s-item:not(.active) i:not(.s-arrow):not(.chev),
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn:not(.active) .s-icon,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn:not(.active) .s-icon {
  color: var(--sidebar-text, #1e293b) !important;
  filter: none !important;
  opacity: 0.92 !important;
  transition: transform .18s ease, color .18s ease !important;
}

html.theme-liquid-glass:not(.dark) #sidebar .s-arrow,
html.theme-liquid-glass:not(.dark) #sidebar .chev {
  color: #475569 !important;
}

/* Hover */
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn:hover:not(.active),
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn:hover:not(.active),
html.theme-liquid-glass:not(.dark) #sidebar .s-item:hover:not(.active),
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .s-item:hover:not(.active) {
  background: var(--sidebar-hover-bg, rgba(255, 255, 255, 0.40)) !important;
  background-color: var(--sidebar-hover-bg, rgba(255, 255, 255, 0.40)) !important;
  color: var(--sidebar-hover-text, #0f172a) !important;
  border-color: rgba(255, 255, 255, 0.60) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn:hover:not(.active) i,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn:hover:not(.active) i,
html.theme-liquid-glass:not(.dark) #sidebar .s-item:hover:not(.active) i,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .s-item:hover:not(.active) i {
  color: var(--sidebar-hover-text, #0f172a) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1.08) !important;
}

/* Activo (Píldora blanca pura y nítida como la referencia) */
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn.active,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn.active,
html.theme-liquid-glass:not(.dark) #sidebar .s-item.active,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .s-item.active {
  color: var(--sidebar-active-text, #1e293b) !important;
  background: var(--sidebar-active-bg, #ffffff) !important;
  background-color: var(--sidebar-active-bg, #ffffff) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff !important;
}
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn.active .s-label,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn.active .s-label,
html.theme-liquid-glass:not(.dark) #sidebar .s-item.active .s-label,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .s-item.active .s-label,
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn.active span,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn.active span,
html.theme-liquid-glass:not(.dark) #sidebar .s-item.active span,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .s-item.active span {
  color: var(--sidebar-active-text, #1e293b) !important;
  font-weight: 700 !important;
}
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn.active i,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn.active i,
html.theme-liquid-glass:not(.dark) #sidebar .s-item.active i,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .s-item.active i,
html.theme-liquid-glass:not(.dark) #sidebar .nav-btn.active .s-icon,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar .nav-btn.active .s-icon {
  color: #2563eb !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Títulos de sección */
html.theme-liquid-glass:not(.dark) #sidebar nav h4,
html.theme-liquid-glass:not(.dark) #sidebar.neo-sidebar nav h4 {
  color: var(--sidebar-section-title, #475569) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* Flechas de submenú */
html.theme-liquid-glass:not(.dark) #sidebar .submenu-arrow,
html.theme-liquid-glass:not(.dark) #sidebar .fa-chevron-down,
html.theme-liquid-glass:not(.dark) #sidebar .fa-chevron-right {
  color: #64748b !important;
}

/* Modo oscuro para sidebar */
html.theme-liquid-glass.dark #sidebar .nav-btn,
html.theme-liquid-glass.dark #sidebar .s-item { color: #cbd5e1 !important; }
html.theme-liquid-glass.dark #sidebar .nav-btn i,
html.theme-liquid-glass.dark #sidebar .s-item i { color: #94a3b8 !important; }
html.theme-liquid-glass.dark #sidebar .nav-btn:hover,
html.theme-liquid-glass.dark #sidebar .s-item:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
html.theme-liquid-glass.dark #sidebar .nav-btn:hover i,
html.theme-liquid-glass.dark #sidebar .s-item:hover i { color: #fff !important; }
html.theme-liquid-glass.dark #sidebar .nav-btn.active,
html.theme-liquid-glass.dark #sidebar .s-item.active { background: linear-gradient(135deg, rgba(143,188,255,.22), rgba(255,255,255,.07)) !important; color: #fff !important; border-color: rgba(188,219,255,.22) !important; }
html.theme-liquid-glass.dark #sidebar .nav-btn.active i,
html.theme-liquid-glass #sidebar-toggle-container { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; }

/* Header: controles en pequeñas lentes, separados de la barra. */
html.theme-liquid-glass #btn-change-company,
html.theme-liquid-glass #offline-status-badge,
html.theme-liquid-glass #btn-fullscreen,
html.theme-liquid-glass #btn-theme-toggle,
html.theme-liquid-glass #btn-notifications,
html.theme-liquid-glass #topbar-user-btn {
  border-radius: var(--lg-radius-control) !important;
  transition: transform .18s var(--lg-ease), background .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

html.theme-liquid-glass:not(.dark) #btn-change-company,
html.theme-liquid-glass:not(.dark) #offline-status-badge,
html.theme-liquid-glass:not(.dark) #btn-fullscreen,
html.theme-liquid-glass:not(.dark) #btn-theme-toggle,
html.theme-liquid-glass:not(.dark) #btn-notifications,
html.theme-liquid-glass:not(.dark) #topbar-user-btn {
  background: rgba(255,255,255,.64) !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  color: #485a72 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.94), 0 5px 12px -10px rgba(31,52,88,.38) !important;
}

html.theme-liquid-glass.dark #btn-change-company,
html.theme-liquid-glass.dark #offline-status-badge,
html.theme-liquid-glass.dark #btn-fullscreen,
html.theme-liquid-glass.dark #btn-theme-toggle,
html.theme-liquid-glass.dark #btn-notifications,
html.theme-liquid-glass.dark #topbar-user-btn {
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #cfdaeb !important;
  box-shadow: inset 0 1px rgba(255,255,255,.10) !important;
}

html.theme-liquid-glass #btn-change-company:hover,
html.theme-liquid-glass #offline-status-badge:hover,
html.theme-liquid-glass #btn-fullscreen:hover,
html.theme-liquid-glass #btn-theme-toggle:hover,
html.theme-liquid-glass #btn-notifications:hover,
html.theme-liquid-glass #topbar-user-btn:hover { transform: translateY(-1px); }

html.theme-liquid-glass:not(.dark) #btn-theme-toggle .theme-icon-sun,
html.theme-liquid-glass.dark #btn-theme-toggle .theme-icon-moon { display: none !important; }
html.theme-liquid-glass:not(.dark) #btn-theme-toggle .theme-icon-moon,
html.theme-liquid-glass.dark #btn-theme-toggle .theme-icon-sun { display: inline-block !important; }

/* --------------------------------------------------------------------------
   CONTENIDO — material blanco regular, menos brillante que la navegación.
   -------------------------------------------------------------------------- */
/* CONTENIDO — Utilidades de color sin sobrecarga de blur (Alto Rendimiento) */
html.theme-liquid-glass:not(.dark) #main-content :is(.bg-white, .bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100),
html.theme-liquid-glass:not(.dark) #page-inicio :is(.bg-white, .bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100) {
  background: var(--card-bg, rgba(255, 255, 255, 0.72)) !important;
  background-color: var(--card-bg, rgba(255, 255, 255, 0.72)) !important;
  border-color: var(--border-color, rgba(122, 145, 178, 0.22)) !important;
  color: var(--text-primary, #18243a) !important;
}

/* Tarjetas y Paneles Principales: Blur optimizado en hardware (60 FPS) */
html.theme-liquid-glass:not(.dark) #main-content :is(.card, .panel, .kpi-card, .dashboard-card, .chart-card) {
  background: var(--card-bg, rgba(255, 255, 255, 0.75)) !important;
  background-color: var(--card-bg, rgba(255, 255, 255, 0.75)) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.90)) !important;
  box-shadow: 0 10px 25px -10px rgba(30, 50, 80, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(var(--card-blur, var(--lg-glass-blur, 16px))) saturate(var(--lg-glass-saturate, 145%)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur, var(--lg-glass-blur, 16px))) saturate(var(--lg-glass-saturate, 145%)) !important;
  color: var(--text-primary, #18243a) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  contain: layout style;
}

/* Ventanas Modales: El contenedor es la verdadera superficie de cristal */
html.theme-liquid-glass:not(.dark) #modal-container,
html.theme-liquid-glass:not(.dark) .modal-card,
html.theme-liquid-glass:not(.dark) .modal-card-standard,
html.theme-liquid-glass:not(.dark) [id*="modal-card"],
html.theme-liquid-glass:not(.dark) .swal2-popup,
html.theme-liquid-glass:not(.dark) .shortcuts-modal-card,
html.theme-liquid-glass:not(.dark) #theme-creator-modal,
html.theme-liquid-glass:not(.dark) #modal-sri-direct-login > div,
html.theme-liquid-glass:not(.dark) div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div:not([class*="fixed"]):not([class*="backdrop"]):not(#modal-backdrop):not(#global-loader):not([id*="loader"]),
html.theme-liquid-glass:not(.dark) [id*="modal"]:not(#modal-backdrop):not([id*="backdrop"]):not(#modal-container):not(#global-loader):not([id*="loader"]) > div:first-child:not([class*="fixed"]),
html.theme-liquid-glass:not(.dark) [id*="modal"]:not(#global-loader):not([id*="loader"]) > div.bg-white,
html.theme-liquid-glass:not(.dark) div[class*="fixed inset-0"]:not(#global-loader):not([id*="loader"]) > div.rounded-3xl,
html.theme-liquid-glass:not(.dark) div[class*="fixed inset-0"]:not(#global-loader):not([id*="loader"]) > div.rounded-2xl {
  background: var(--modal-bg, rgba(255, 255, 255, 0.78)) !important;
  background-color: var(--modal-bg, rgba(255, 255, 255, 0.78)) !important;
  border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.90)) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(var(--modal-blur, var(--lg-glass-blur, 24px))) saturate(var(--lg-glass-saturate, 160%)) !important;
  -webkit-backdrop-filter: blur(var(--modal-blur, var(--lg-glass-blur, 24px))) saturate(var(--lg-glass-saturate, 160%)) !important;
  color: var(--modal-text, #18243a) !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* Neutralizar Doble Fondo en Hijos y Sub-contenedores de Modales (Modo Claro) */
html.theme-liquid-glass:not(.dark) :is(#modal-container, .modal-card, .modal-card-standard, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) > div:not(.modal-header):not(.modal-footer),
html.theme-liquid-glass:not(.dark) :is(#modal-container, .modal-card, .modal-card-standard, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) :is(form, .modal-body, [class*="max-h-"], [class*="overflow-y-auto"]),
html.theme-liquid-glass:not(.dark) :is(#modal-container, .modal-card, .modal-card-standard, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) :is(div, section, article, form):not(button):not(input):not(select):not(textarea):not([role="button"]):is(.bg-white, .bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100, .card, .panel) {
  background: transparent !important;
  background-color: transparent !important;
}

html.theme-liquid-glass:not(.dark) :is(#modal-container, .modal-card, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) > div:first-child,
html.theme-liquid-glass:not(.dark) .modal-header,
html.theme-liquid-glass:not(.dark) [id*="modal"] .modal-header,
html.theme-liquid-glass:not(.dark) [id*="modal"] .dynamic-header-gradient,
html.theme-liquid-glass:not(.dark) .shortcuts-modal-header {
  background: var(--modal-header-bg, rgba(255, 255, 255, 0.88)) !important;
  background-color: var(--modal-header-bg, rgba(255, 255, 255, 0.88)) !important;
  color: #0f172a !important;
  border-bottom: 1px solid var(--modal-border, rgba(203, 213, 225, 0.7)) !important;
}

html.theme-liquid-glass:not(.dark) :is(#modal-container, .modal-card, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) > div:last-child,
html.theme-liquid-glass:not(.dark) .modal-footer,
html.theme-liquid-glass:not(.dark) [id*="modal"] .modal-footer {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid var(--modal-border, rgba(255, 255, 255, 0.25)) !important;
}

/* Telón / Backdrop de modales en modo claro */
html.theme-liquid-glass:not(.dark) #modal-backdrop,
html.theme-liquid-glass:not(.dark) .modal-backdrop-standard,
html.theme-liquid-glass:not(.dark) .shortcuts-modal-overlay,
html.theme-liquid-glass:not(.dark) #theme-creator-backdrop,
html.theme-liquid-glass:not(.dark) .swal2-container,
html.theme-liquid-glass:not(.dark) div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) {
  background: var(--modal-overlay, rgba(15, 23, 42, 0.45)) !important;
  background-color: var(--modal-overlay, rgba(15, 23, 42, 0.45)) !important;
  backdrop-filter: blur(var(--overlay-blur, 6px)) !important;
  -webkit-backdrop-filter: blur(var(--overlay-blur, 6px)) !important;
}

/* MODO OSCURO — Utilidades de color sin sobrecarga de blur */
html.theme-liquid-glass.dark :is(#main-content, #page-inicio, .page-content, #app-container) :is(.bg-white, .bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100, .bg-slate-50\/80, .bg-slate-50\/90) {
  background: rgba(18, 30, 49, 0.72) !important;
  background-color: rgba(18, 30, 49, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f4f7ff !important;
}

/* MODO OSCURO — Tarjetas y Paneles Principales con Blur Acelerado */
html.theme-liquid-glass.dark :is(.card, .panel, .kpi-card, .data-card, .table-container, .chart-card, .dashboard-card) {
  background: linear-gradient(145deg, rgba(39, 53, 78, 0.73), rgba(14, 25, 42, 0.67)) !important;
  background-color: rgba(18, 30, 49, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(var(--card-blur, var(--lg-glass-blur, 20px))) saturate(var(--lg-glass-saturate, 155%)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur, var(--lg-glass-blur, 20px))) saturate(var(--lg-glass-saturate, 155%)) !important;
  color: #f4f7ff !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  contain: layout style;
}

/* MODO OSCURO — Ventanas Modales */
html.theme-liquid-glass.dark #modal-container,
html.theme-liquid-glass.dark .modal-card,
html.theme-liquid-glass.dark .modal-card-standard,
html.theme-liquid-glass.dark [id*="modal-card"],
html.theme-liquid-glass.dark .swal2-popup,
html.theme-liquid-glass.dark .shortcuts-modal-card,
html.theme-liquid-glass.dark #theme-creator-modal,
html.theme-liquid-glass.dark #modal-sri-direct-login > div,
html.theme-liquid-glass.dark div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div:not([class*="fixed"]):not([class*="backdrop"]):not(#modal-backdrop):not(#global-loader):not([id*="loader"]),
html.theme-liquid-glass.dark [id*="modal"]:not(#modal-backdrop):not([id*="backdrop"]):not(#modal-container):not(#global-loader):not([id*="loader"]) > div:first-child:not([class*="fixed"]),
html.theme-liquid-glass.dark [id*="modal"]:not(#global-loader):not([id*="loader"]) > div.bg-white,
html.theme-liquid-glass.dark [id*="modal"]:not(#global-loader):not([id*="loader"]) > div[class*="dark:bg-slate-"],
html.theme-liquid-glass.dark div[class*="fixed inset-0"]:not(#global-loader):not([id*="loader"]) > div.rounded-3xl,
html.theme-liquid-glass.dark div[class*="fixed inset-0"]:not(#global-loader):not([id*="loader"]) > div.rounded-2xl {
  background: var(--modal-bg, rgba(18, 30, 49, 0.82)) !important;
  background-color: var(--modal-bg, rgba(18, 30, 49, 0.82)) !important;
  border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.15)) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(var(--modal-blur, var(--lg-glass-blur, 24px))) saturate(var(--lg-glass-saturate, 160%)) !important;
  -webkit-backdrop-filter: blur(var(--modal-blur, var(--lg-glass-blur, 24px))) saturate(var(--lg-glass-saturate, 160%)) !important;
  color: #f4f7ff !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* Neutralizar Doble Fondo en Hijos y Sub-contenedores de Modales en Modo Oscuro */
html.theme-liquid-glass.dark :is(#modal-container, .modal-card, .modal-card-standard, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) > div:not(.modal-header):not(.modal-footer),
html.theme-liquid-glass.dark :is(#modal-container, .modal-card, .modal-card-standard, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) :is(form, .modal-body, [class*="max-h-"], [class*="overflow-y-auto"]),
html.theme-liquid-glass.dark :is(#modal-container, .modal-card, .modal-card-standard, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) :is(div, section, article, form):not(button):not(input):not(select):not(textarea):not([role="button"]):is(.bg-white, .bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-slate-900, .bg-slate-800, .bg-slate-950, .card, .panel) {
  background: transparent !important;
  background-color: transparent !important;
}

html.theme-liquid-glass.dark :is(#modal-container, .modal-card, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) > div:first-child,
html.theme-liquid-glass.dark :is(.modal-header, [id*="modal"] .modal-header, .shortcuts-modal-header) {
  background: var(--modal-header-bg, rgba(24, 38, 62, 0.55)) !important;
  background-color: var(--modal-header-bg, rgba(24, 38, 62, 0.55)) !important;
  color: #f4f7ff !important;
  border-bottom: 1px solid var(--modal-border, rgba(255, 255, 255, 0.12)) !important;
}

html.theme-liquid-glass.dark :is(#modal-container, .modal-card, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div, [id*="modal"]:not(#global-loader):not([id*="loader"]) > div) > div:last-child,
html.theme-liquid-glass.dark :is(.modal-footer, [id*="modal"] .modal-footer) {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid var(--modal-border, rgba(255, 255, 255, 0.12)) !important;
}

/* Telón / Backdrop de modales en modo oscuro */
html.theme-liquid-glass.dark #modal-backdrop,
html.theme-liquid-glass.dark .modal-backdrop-standard,
html.theme-liquid-glass.dark .shortcuts-modal-overlay,
html.theme-liquid-glass.dark #theme-creator-backdrop,
html.theme-liquid-glass.dark .swal2-container,
html.theme-liquid-glass.dark div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) {
  background: var(--modal-overlay, rgba(2, 6, 23, 0.60)) !important;
  background-color: var(--modal-overlay, rgba(2, 6, 23, 0.60)) !important;
  backdrop-filter: blur(var(--overlay-blur, 6px)) !important;
  -webkit-backdrop-filter: blur(var(--overlay-blur, 6px)) !important;
}

html.theme-liquid-glass.dark :is(#modal-container, .modal-card, .swal2-popup, .shortcuts-modal-card, #theme-creator-modal, div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) > div) :is(h1, h2, h3, h4, p, span, label) {
  color: #f4f7ff !important;
}

html.theme-liquid-glass.dark :is(.border-slate-200, .border-slate-200\/80, .border-slate-300, .border-gray-200, .border-gray-300) {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.theme-liquid-glass #main-content :is(.rounded-xl, .rounded-2xl, .rounded-3xl),
html.theme-liquid-glass #page-inicio :is(.rounded-xl, .rounded-2xl, .rounded-3xl) { border-radius: var(--lg-radius-card) !important; }

/* La tarjeta de valor actual pasa a ser material claro con una iluminación azul. */
html.theme-liquid-glass:not(.dark) #page-inicio .bg-blue-600 {
  background: radial-gradient(circle at 100% 0%, rgba(117,171,255,.38), transparent 43%), linear-gradient(140deg, rgba(255,255,255,.93), rgba(235,244,255,.70)) !important;
  border: 1px solid rgba(255,255,255,.90) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 18px 36px -26px rgba(42,74,145,.40) !important;
  color: #18243a !important;
}
html.theme-liquid-glass:not(.dark) #page-inicio .bg-blue-600 :is(.text-white, .text-blue-100) { color: #18243a !important; }
html.theme-liquid-glass:not(.dark) #page-inicio .bg-blue-600 .bg-blue-700\/50 { background: rgba(66,103,232,.10) !important; color: #3657d2 !important; border-color: rgba(66,103,232,.18) !important; }

/* Texto y componentes de datos. */
html.theme-liquid-glass:not(.dark) #main-content :is(.text-slate-900, .text-slate-800, .text-slate-700),
html.theme-liquid-glass:not(.dark) #page-inicio :is(.text-slate-900, .text-slate-800, .text-slate-700) { color: #18243a !important; }
html.theme-liquid-glass:not(.dark) #main-content :is(.text-slate-600, .text-slate-500, .text-slate-400),
html.theme-liquid-glass:not(.dark) #page-inicio :is(.text-slate-600, .text-slate-500, .text-slate-400) { color: #68768c !important; }

html.theme-liquid-glass.dark :is(h1, h2, h3, h4, h5, h6):not(.dynamic-header-gradient *):not(.page-header *) { color: #f4f7ff !important; }
html.theme-liquid-glass.dark :is(#main-content, #page-inicio, .page-content) :is(.text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, .text-gray-800, .text-gray-700):not(.bg-white):not([class~="bg-white"]):not(.btn-new-product):not(#btn-new-product):not(.bg-white *):not([class~="bg-white"] *):not(.btn-new-product *):not(#btn-new-product *) { color: #f4f7ff !important; }
html.theme-liquid-glass.dark :is(#main-content, #page-inicio, .page-content) :is(.text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500):not(.bg-white *):not([class~="bg-white"] *):not(.btn-new-product *):not(#btn-new-product *) { color: #94a3b8 !important; }
html.theme-liquid-glass.dark :is(#main-content, #page-inicio, .page-content) :is(.text-slate-400, .text-gray-400) { color: #64748b !important; }

html.theme-liquid-glass:not(.dark) :is(input, select, textarea) {
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(143,164,196,.28) !important;
  border-radius: var(--lg-radius-control) !important;
  box-shadow: inset 0 1px 2px rgba(30,50,80,.05), 0 4px 11px -10px rgba(30,50,80,.2) !important;
  color: #18243a !important;
}
html.theme-liquid-glass.dark :is(input, select, textarea) { background: rgba(4,10,20,.30) !important; border-color: rgba(255,255,255,.15) !important; color: #f4f7ff !important; border-radius: var(--lg-radius-control) !important; }
html.theme-liquid-glass.dark select option { background: #0b1220 !important; color: #f4f7ff !important; }
html.theme-liquid-glass :is(input, select, textarea):focus { outline: none !important; border-color: var(--lg-accent) !important; box-shadow: 0 0 0 3px var(--lg-accent-soft) !important; }

html.theme-liquid-glass table { background: transparent !important; }
html.theme-liquid-glass:not(.dark) table thead th { background: rgba(234,241,251,.58) !important; color: #617089 !important; border-bottom-color: rgba(126,150,184,.18) !important; }
html.theme-liquid-glass:not(.dark) table tbody td { border-bottom-color: rgba(126,150,184,.13) !important; color: #25334a !important; }
html.theme-liquid-glass:not(.dark) table tbody tr:hover { background: rgba(255,255,255,.48) !important; }
html.theme-liquid-glass.dark table thead th { background: rgba(255,255,255,.06) !important; color: #aab9cf !important; border-bottom-color: rgba(255,255,255,.10) !important; }
html.theme-liquid-glass.dark table tbody td { border-bottom-color: rgba(255,255,255,.07) !important; color: #edf3ff !important; }

/* Menús flotantes y modales usan el mismo material de navegación. */
html.theme-liquid-glass:not(.dark) :is(#topbar-notifications-menu, #topbar-user-menu, .collapsed-flyout) {
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(249,252,255,.76)) !important;
  border-color: rgba(255,255,255,.90) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 24px 44px -20px rgba(34,52,85,.30) !important;
  backdrop-filter: blur(var(--modal-blur, var(--lg-glass-blur, 30px))) saturate(var(--lg-glass-saturate, 180%)) !important;
  -webkit-backdrop-filter: blur(var(--modal-blur, var(--lg-glass-blur, 30px))) saturate(var(--lg-glass-saturate, 180%)) !important;
}
html.theme-liquid-glass.dark :is(#topbar-notifications-menu, #topbar-user-menu, .collapsed-flyout) { background: rgba(18,30,49,.90) !important; border-color: rgba(255,255,255,.15) !important; backdrop-filter: blur(var(--modal-blur, var(--lg-glass-blur, 32px))) saturate(var(--lg-glass-saturate, 175%)) !important; }

/* Respuesta física y accesible. */
html.theme-liquid-glass button,
html.theme-liquid-glass [role="button"],
html.theme-liquid-glass a.nav-btn { transition: transform .18s var(--lg-ease), box-shadow .18s ease, background .18s ease, border-color .18s ease !important; }
html.theme-liquid-glass button:active,
html.theme-liquid-glass [role="button"]:active,
html.theme-liquid-glass a.nav-btn:active { transform: scale(.97) !important; }
html.theme-liquid-glass :focus-visible { outline: 2px solid var(--lg-accent) !important; outline-offset: 3px !important; }

@media (max-width: 1023px) {
  html.theme-liquid-glass #sidebar,
  html.theme-liquid-glass aside#sidebar {
    top: 8px !important;
    left: 8px !important;
    bottom: 8px !important;
    height: calc(100dvh - 16px) !important;
    min-height: 0 !important;
    border-radius: 24px !important;
  }
  html.theme-liquid-glass #top-bar,
  html.theme-liquid-glass header#top-bar {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }
  html.theme-liquid-glass #main-content-wrapper { padding: 0 8px !important; }
  html.theme-liquid-glass #main-content { padding-top: 84px !important; }
  html.theme-liquid-glass #footer-modern-adapter { width: calc(100vw - 16px) !important; margin-left: 0 !important; }
  html.theme-liquid-glass .ambient { width: 320px !important; height: 320px !important; filter: blur(76px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-liquid-glass *, html.theme-liquid-glass *::before, html.theme-liquid-glass *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Overrides del shell: el menú ocupa todo el espacio entre el header y el footer */
@media (min-width: 1024px) {
  html.theme-liquid-glass #sidebar,
  html.theme-liquid-glass aside#sidebar,
  html.theme-liquid-glass #sidebar.neo-sidebar,
  html.theme-liquid-glass aside#sidebar.neo-sidebar,
  html.theme-liquid-glass #sidebar.neo-sidebar.collapsed {
    top: 88px !important;
    left: 16px !important;
    bottom: 78px !important;
    width: 272px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Contenedor de notificaciones toast: fijo, 0px en flujo normal */
#toast-notifications-container {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 384px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
#toast-notifications-container > * {
  pointer-events: auto !important;
}

/* Transiciones de contenido limpias y estables (0 saltos verticales) */
html.theme-liquid-glass .page-content {
  transform: none !important;
  animation: none !important;
  transition: opacity 0.15s ease-out !important;
}
html.theme-liquid-glass .page-content.entering {
  transform: none !important;
  animation: none !important;
  opacity: 0 !important;
}
html.theme-liquid-glass .page-content.active {
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
}

html.theme-liquid-glass #sidebar.neo-sidebar #sidebar-logo-header.sidebar-header {
  display: none !important;
}

html.theme-liquid-glass #top-bar #topbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  min-width: max-content !important;
}
html.theme-liquid-glass #top-bar #topbar-brand > span {
  display: inline !important;
  white-space: nowrap !important;
}
html.theme-liquid-glass #top-bar #menu-toggle-topbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  color: #29415f !important;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 5px 12px -10px rgba(10,32,70,.4) !important;
}
html.theme-liquid-glass.dark #top-bar #menu-toggle-topbar {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #e4edff !important;
}

/* Footer espejo del header: independiente del ancho y flujo del contenido. */
html.theme-liquid-glass #footer-modern-adapter,
html.theme-liquid-glass #sidebar:not(.collapsed):not(.sidebar-hidden) ~ #main-content-wrapper #footer-modern-adapter,
html.theme-liquid-glass #sidebar.collapsed:not(.sidebar-hidden) ~ #main-content-wrapper #footer-modern-adapter,
html.theme-liquid-glass #sidebar.sidebar-hidden ~ #main-content-wrapper #footer-modern-adapter {
  position: fixed !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 65 !important;
}
html.theme-liquid-glass #app-footer.premium-footer {
  width: 100% !important;
  min-height: 44px !important;
  height: 46px !important;
  max-height: 48px !important;
}
html.theme-liquid-glass #main-content { padding-bottom: 76px !important; }

@media (max-width: 1023px) {
  html.theme-liquid-glass #app-footer .footer-copyright-line { font-size: 10px !important; }
}

@media (max-width: 767px) {
  html.theme-liquid-glass #app-footer .footer-brand-sub { display: none !important; }
  html.theme-liquid-glass #app-footer .footer-copyright-line { display: none !important; }
}

@media (max-width: 1023px) {
  html.theme-liquid-glass #footer-modern-adapter,
  html.theme-liquid-glass #sidebar:not(.collapsed):not(.sidebar-hidden) ~ #main-content-wrapper #footer-modern-adapter,
  html.theme-liquid-glass #sidebar.collapsed:not(.sidebar-hidden) ~ #main-content-wrapper #footer-modern-adapter,
  html.theme-liquid-glass #sidebar.sidebar-hidden ~ #main-content-wrapper #footer-modern-adapter {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
  html.theme-liquid-glass #top-bar #topbar-brand > span { display: none !important; }
}

/* ==========================================================================
   PUNTO DE VENTA (POS) Y COCINA (KDS) EN TEMA LIQUID GLASS
   Garantiza que el POS y Cocina ocupen el 100% del viewport adaptativo sin cortes,
   sin franjas vacías al fondo y ajustándose milimétricamente al alto de cualquier pantalla.
   ========================================================================== */
html.theme-liquid-glass.pos-active,
html.theme-liquid-glass.cocina-active,
html.theme-liquid-glass body.pos-active,
html.theme-liquid-glass body.cocina-active {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

html.theme-liquid-glass.pos-active #app-container,
html.theme-liquid-glass.cocina-active #app-container,
html.theme-liquid-glass body.pos-active #app-container,
html.theme-liquid-glass body.cocina-active #app-container {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html.theme-liquid-glass.pos-active #main-content-wrapper,
html.theme-liquid-glass.cocina-active #main-content-wrapper,
html.theme-liquid-glass body.pos-active #main-content-wrapper,
html.theme-liquid-glass body.cocina-active #main-content-wrapper {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html.theme-liquid-glass.pos-active #main-content,
html.theme-liquid-glass.cocina-active #main-content,
html.theme-liquid-glass body.pos-active #main-content,
html.theme-liquid-glass body.cocina-active #main-content {
  padding-top: 86px !important;
  padding-bottom: 8px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

@media (max-width: 1023px) {
  html.theme-liquid-glass.pos-active #main-content,
  html.theme-liquid-glass.cocina-active #main-content,
  html.theme-liquid-glass body.pos-active #main-content,
  html.theme-liquid-glass body.cocina-active #main-content {
    padding-top: 80px !important;
    padding-bottom: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }
}

/* Ocultar footer en KDS Cocina y POS bajo Liquid Glass */
html.theme-liquid-glass.pos-active #footer-modern-adapter,
html.theme-liquid-glass.cocina-active #footer-modern-adapter,
html.theme-liquid-glass body.pos-active #footer-modern-adapter,
html.theme-liquid-glass body.cocina-active #footer-modern-adapter {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   RESTAURACIÓN UNIVERSAL DE SCROLL PARA VISTAS ESTÁNDAR (LIQUID GLASS)
   Garantiza que Facturas, Inicio, Clientes, Reportes, etc., puedan scrollear
   libre y fluidamente en cualquier momento, tanto si se viene de POS como de Cocina.
   ========================================================================== */
html.theme-liquid-glass:not(.pos-active):not(.cocina-active),
html.theme-liquid-glass:not(.pos-active):not(.cocina-active) body:not(.pos-active):not(.cocina-active) {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html.theme-liquid-glass:not(.pos-active):not(.cocina-active) #app-container,
html.theme-liquid-glass:not(.pos-active):not(.cocina-active) #main-content-wrapper {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow: visible !important;
}

html.theme-liquid-glass:not(.pos-active):not(.cocina-active) #main-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* Soporte Kanban KDS en Liquid Glass: Scroll fluido y tarjetas con proporción natural */
html.theme-liquid-glass .kitchen-kanban-col-cards {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding-right: 0.25rem !important;
  scrollbar-width: thin !important;
}

html.theme-liquid-glass .kitchen-kanban-col-cards::-webkit-scrollbar {
  width: 5px !important;
}

html.theme-liquid-glass .kitchen-kanban-col-cards::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4) !important;
  border-radius: 9999px !important;
}

html.theme-liquid-glass .kitchen-kanban-col-cards > .order-card,
html.theme-liquid-glass .order-card {
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   AISLAMIENTO TOTAL DE PANTALLA DE CARGA (#global-loader) Y ANIMACIÓN PREMIUM
   ========================================================================== */
#global-loader {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
html:not(.dark) #global-loader,
html.light #global-loader,
body:not(.dark) #global-loader {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
html.dark #global-loader,
body.dark #global-loader {
  background: #0f172a !important;
  background-color: #0f172a !important;
}
#global-loader *,
#global-loader > div,
#global-loader div {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
#global-loader .loader-content-wrap,
#global-loader > div {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html:not(.dark) #global-loader img.dark\:hidden,
html.light #global-loader img.dark\:hidden,
body:not(.dark) #global-loader img.dark\:hidden {
  display: block !important;
}
html:not(.dark) #global-loader img.dark\:block,
html.light #global-loader img.dark\:block,
body:not(.dark) #global-loader img.dark\:block {
  display: none !important;
}
html.dark #global-loader img.dark\:hidden,
body.dark #global-loader img.dark\:hidden {
  display: none !important;
}
html.dark #global-loader img.dark\:block,
body.dark #global-loader img.dark\:block {
  display: block !important;
}
@keyframes loaderLogoBreathe {
  0%, 100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.16));
  }
  50% {
    transform: scale(1.05) translateY(-2px);
    filter: drop-shadow(0 12px 26px rgba(37, 99, 235, 0.32));
  }
}
@keyframes loaderAmbientPulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.75;
  }
}
@keyframes loaderDotPulse {
  0%, 100% {
    transform: scale(0.7);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.7);
  }
}
.loader-logo-container {
  position: relative;
}
.loader-ambient-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.22) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 70%);
  animation: loaderAmbientPulse 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.loader-logo-img {
  position: relative;
  z-index: 1;
  animation: loaderLogoBreathe 2.4s ease-in-out infinite !important;
  will-change: transform, filter;
}
.loader-brand-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #0f172a 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.dark .loader-brand-title {
  background: linear-gradient(135deg, #ffffff 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.loader-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background-color: #2563eb !important;
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
  display: inline-block !important;
  animation: loaderDotPulse 1.4s ease-in-out infinite !important;
}
.loader-dot.dot-1 { animation-delay: 0s !important; }
.loader-dot.dot-2 { animation-delay: 0.22s !important; }
.loader-dot.dot-3 { animation-delay: 0.44s !important; }

/* ==========================================================================
   SUPRESIÓN TOTAL Y DEFINITIVA DE SCROLLBAR EN EL MENÚ LATERAL
   ========================================================================== */
html #sidebar,
html #sidebar *,
html aside#sidebar,
html aside#sidebar *,
html #sidebar-nav-container,
html #sidebar-nav-container *,
html .sidebar,
html .sidebar * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html #sidebar::-webkit-scrollbar,
html #sidebar *::-webkit-scrollbar,
html aside#sidebar::-webkit-scrollbar,
html aside#sidebar *::-webkit-scrollbar,
html #sidebar-nav-container::-webkit-scrollbar,
html #sidebar-nav-container *::-webkit-scrollbar,
html .sidebar::-webkit-scrollbar,
html .sidebar *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
html #sidebar::-webkit-scrollbar-track,
html #sidebar *::-webkit-scrollbar-track,
html aside#sidebar::-webkit-scrollbar-track,
html aside#sidebar *::-webkit-scrollbar-track,
html #sidebar-nav-container::-webkit-scrollbar-track,
html #sidebar-nav-container *::-webkit-scrollbar-track,
html .sidebar::-webkit-scrollbar-track,
html .sidebar *::-webkit-scrollbar-track {
  display: none !important;
  background: transparent !important;
}
html #sidebar::-webkit-scrollbar-thumb,
html #sidebar *::-webkit-scrollbar-thumb,
html aside#sidebar::-webkit-scrollbar-thumb,
html aside#sidebar *::-webkit-scrollbar-thumb,
html #sidebar-nav-container::-webkit-scrollbar-thumb,
html #sidebar-nav-container *::-webkit-scrollbar-thumb,
html .sidebar::-webkit-scrollbar-thumb,
html .sidebar *::-webkit-scrollbar-thumb {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ==========================================================================
   OCULTAR FLYOUTS PLANTILLA DENTRO DEL SIDEBAR (ELIMINA ESPACIO VACÍO EN SCROLL)
   ========================================================================== */
#sidebar .collapsed-flyout,
#sidebar-nav-container .collapsed-flyout,
aside#sidebar .collapsed-flyout,
.neo-sidebar .collapsed-flyout {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

#global-collapsed-flyout-portal,
#global-collapsed-flyout-portal.collapsed-flyout {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Flex scroll container seguro sin desbordamiento fantasma */
html.theme-liquid-glass #sidebar-nav-container,
html.theme-liquid-glass aside#sidebar #sidebar-nav-container,
html #sidebar-nav-container {
  min-height: 0 !important;
}

/* ==========================================================================
   BLINDAJE UNIVERSAL PARA BOTONES CON FONDO BLANCO (TEXTO NEGRO/OSCURO SIEMPRE)
   ========================================================================== */
:is(html, body) :is(button, a, .btn, [role="button"]):is(.bg-white, [class~="bg-white"], .btn-new-product, #btn-new-product):not([class*="dark:bg-"]):not([class*="dark:bg-slate"]):not([class*="dark:bg-gray"]),
:is(html, body) :is(button, a, .btn, [role="button"]):is([class*="dark:bg-white"]),
:is(html, body) :is(.dynamic-header-gradient, .page-header) :is(button, a, .btn, [role="button"]):is(.bg-white, [class~="bg-white"], .btn-new-product, #btn-new-product) {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

:is(html, body) :is(button, a, .btn, [role="button"]):is(.bg-white, [class~="bg-white"], .btn-new-product, #btn-new-product):not([class*="dark:bg-"]):not([class*="dark:bg-slate"]):not([class*="dark:bg-gray"]) :is(*, span, b, strong, p, div),
:is(html, body) :is(button, a, .btn, [role="button"]):is([class*="dark:bg-white"]) :is(*, span, b, strong, p, div),
:is(html, body) :is(.dynamic-header-gradient, .page-header) :is(button, a, .btn, [role="button"]):is(.bg-white, [class~="bg-white"], .btn-new-product, #btn-new-product) :is(*, span, b, strong, p, div) {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

:is(html, body) :is(button, a, .btn, [role="button"]):is(.bg-white, [class~="bg-white"], .btn-new-product, #btn-new-product):not([class*="dark:bg-"]):not([class*="dark:bg-slate"]):not([class*="dark:bg-gray"]) i:not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-amber"]):not([class*="text-blue"]):not([class*="text-indigo"]):not([class*="text-purple"]):not([class*="text-cyan"]),
:is(html, body) :is(button, a, .btn, [role="button"]):is([class*="dark:bg-white"]) i:not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-amber"]):not([class*="text-blue"]):not([class*="text-indigo"]):not([class*="text-purple"]):not([class*="text-cyan"]),
:is(html, body) :is(button, a, .btn, [role="button"]):is(.bg-white, [class~="bg-white"], .btn-new-product, #btn-new-product) i:not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-amber"]):not([class*="text-blue"]):not([class*="text-indigo"]):not([class*="text-purple"]):not([class*="text-cyan"]) {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

/* ==========================================================================
   BANNER DE PRUEBA (TRIAL) EN TEMA LIQUID GLASS
   Adapta el banner informativo de días restantes para integrarse
   armoniosamente con la estética frosted glass de Liquid Glass.
   ========================================================================== */
html.theme-liquid-glass #erp-trial-banner.hidden,
#erp-trial-banner.hidden {
  display: none !important;
}

html.theme-liquid-glass #erp-trial-banner {
  position: relative !important;
  margin: 88px auto 0 auto !important;
  width: calc(100% - 64px) !important;
  max-width: min(calc(100% - 48px), 1480px) !important;
  border-radius: var(--lg-radius-shell, 20px) !important;
  backdrop-filter: blur(var(--topbar-blur, 32px)) saturate(190%) contrast(102%) !important;
  -webkit-backdrop-filter: blur(var(--topbar-blur, 32px)) saturate(190%) contrast(102%) !important;
  padding: 10px 20px !important;
  box-sizing: border-box !important;
  z-index: 40 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-bottom: none !important;
  transition: all 0.25s var(--lg-ease, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

html.theme-liquid-glass #erp-trial-banner:not(.hidden) {
  display: flex !important;
}

html.theme-liquid-glass #erp-trial-banner:not(.hidden) ~ #main-content {
  padding-top: 14px !important;
}

/* Modo Claro en Liquid Glass */
html.theme-liquid-glass:not(.dark) #erp-trial-banner {
  background: linear-gradient(138deg, rgba(255, 255, 255, 0.88), rgba(240, 245, 255, 0.72)) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 1), 0 16px 36px -12px rgba(37, 55, 88, 0.16), 0 2px 6px rgba(37, 55, 88, 0.04) !important;
  color: #1e293b !important;
}
html.theme-liquid-glass:not(.dark) #erp-trial-banner .trial-banner-icon,
html.theme-liquid-glass:not(.dark) #erp-trial-banner .w-5.h-5 {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37, 99, 235, 0.20) !important;
}
html.theme-liquid-glass:not(.dark) #erp-trial-banner #erp-trial-banner-text {
  color: #1e293b !important;
}

/* Modo Oscuro en Liquid Glass */
html.theme-liquid-glass.dark #erp-trial-banner {
  background: linear-gradient(138deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.78)) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 20px 40px -15px rgba(0, 0, 0, 0.6) !important;
  color: #f1f5f9 !important;
}
html.theme-liquid-glass.dark #erp-trial-banner .trial-banner-icon,
html.theme-liquid-glass.dark #erp-trial-banner .w-5.h-5 {
  background: rgba(59, 130, 246, 0.20) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, 0.30) !important;
}
html.theme-liquid-glass.dark #erp-trial-banner #erp-trial-banner-text {
  color: #f1f5f9 !important;
}

/* Elementos compartidos del banner */
html.theme-liquid-glass #erp-trial-banner .trial-banner-icon,
html.theme-liquid-glass #erp-trial-banner .w-5.h-5 {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
html.theme-liquid-glass #erp-trial-banner #erp-trial-banner-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
html.theme-liquid-glass #erp-trial-banner #btn-open-plans-modal {
  background: linear-gradient(135deg, #2563eb 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 12px !important;
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px -2px rgba(37, 99, 235, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
html.theme-liquid-glass #erp-trial-banner #btn-open-plans-modal:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 20px -2px rgba(37, 99, 235, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}
html.theme-liquid-glass #erp-trial-banner #btn-open-plans-modal:active {
  transform: translateY(0) scale(0.98) !important;
}
html.theme-liquid-glass #erp-trial-banner #btn-open-plans-modal span {
  color: #ffffff !important;
}
html.theme-liquid-glass #erp-trial-banner #btn-open-plans-modal i {
  color: #fbbf24 !important;
}

/* Ocultar en POS o Cocina para evitar interferir con flujos operativos */
html.theme-liquid-glass.pos-active #erp-trial-banner,
html.theme-liquid-glass.cocina-active #erp-trial-banner,
html.theme-liquid-glass body.pos-active #erp-trial-banner,
html.theme-liquid-glass body.cocina-active #erp-trial-banner {
  display: none !important;
}

/* Responsividad móvil y tablet */
@media (max-width: 1023px) {
  html.theme-liquid-glass #erp-trial-banner {
    margin-top: 78px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    padding: 8px 14px !important;
  }
  html.theme-liquid-glass #erp-trial-banner:not(.hidden) ~ #main-content {
    padding-top: 12px !important;
  }
}

@media (max-width: 480px) {
  html.theme-liquid-glass #erp-trial-banner {
    padding: 7px 10px !important;
    gap: 8px !important;
  }
  html.theme-liquid-glass #erp-trial-banner #erp-trial-banner-text {
    font-size: 11px !important;
  }
  html.theme-liquid-glass #erp-trial-banner #btn-open-plans-modal {
    padding: 5px 10px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
}