/* ================================================================
   liquid-glass-advanced.css — Liquid Glass V2: motor óptico
   Profundidad 3D, refracción, highlights dinámicos, orbs, segmented.
   Implementación propia. Inspirado en principios visuales abiertos.
   ================================================================ */

html[data-visual="liquid-glass"] {
  /* Pointer tracking (defaults; engine actualiza per-element) */
  --lg-pointer-x: 50%;
  --lg-pointer-y: 50%;
  --lg-tilt-x: 0deg;
  --lg-tilt-y: 0deg;
  --lg-glare: 0;       /* 0..1 intensidad del highlight */
  --lg-depth: 1;       /* 0..1.5 profundidad lift */
  --lg-refraction: 1;  /* 0..1.5 fuerza del filtro lens */

  /* Intensidad (sobreescrita por data-lg-intensity) */
  --lgi-blur: 26px;
  --lgi-saturation: 170%;
  --lgi-tint: 0.6;     /* opacidad de tinted overlay */
  --lgi-glare-max: 0.55;
  --lgi-depth-max: 6px;
  --lgi-bubble: 1.022; /* scale en hover */
  --lgi-tilt-max: 4deg;
  --lgi-elastic: cubic-bezier(.34,1.56,.64,1);
  --lgi-drag: cubic-bezier(.2,.8,.2,1);
}

/* Niveles de intensidad */
html[data-visual="liquid-glass"][data-lg-intensity="subtle"] {
  --lgi-blur: 16px;
  --lgi-saturation: 130%;
  --lgi-tint: 0.50;
  --lgi-glare-max: 0.30;
  --lgi-depth-max: 3px;
  --lgi-bubble: 1.010;
  --lgi-tilt-max: 1.5deg;
}
html[data-visual="liquid-glass"][data-lg-intensity="balanced"] {
  --lgi-blur: 24px;
  --lgi-saturation: 160%;
  --lgi-tint: 0.6;
  --lgi-glare-max: 0.45;
  --lgi-depth-max: 5px;
  --lgi-bubble: 1.018;
  --lgi-tilt-max: 3deg;
}
html[data-visual="liquid-glass"][data-lg-intensity="intense"] {
  --lgi-blur: 32px;
  --lgi-saturation: 190%;
  --lgi-tint: 0.7;
  --lgi-glare-max: 0.65;
  --lgi-depth-max: 8px;
  --lgi-bubble: 1.028;
  --lgi-tilt-max: 6deg;
}
html[data-visual="liquid-glass"][data-lg-intensity="ultra"] {
  --lgi-blur: 42px;
  --lgi-saturation: 220%;
  --lgi-tint: 0.78;
  --lgi-glare-max: 0.80;
  --lgi-depth-max: 12px;
  --lgi-bubble: 1.038;
  --lgi-tilt-max: 9deg;
}

/* Reduce transparency override */
html[data-visual="liquid-glass"][data-lg-reduce-transparency="1"] {
  --lgi-blur: 0px;
  --lgi-saturation: 100%;
  --lgi-tint: 1;
  --lgi-glare-max: 0;
  --lgi-tilt-max: 0deg;
}

/* ================================================================
   FONDO AMBIENTE (sutil, no distrae)
   ================================================================ */
html[data-visual="liquid-glass"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1200px 600px at 25% 10%,
      color-mix(in srgb, var(--text, #1a1a1a) 4%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 80% 90%,
      color-mix(in srgb, var(--text, #1a1a1a) 3%, transparent) 0%, transparent 55%);
  opacity: 0.85;
}
html[data-visual="liquid-glass"][data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 1400px 700px at 15% 5%,
      rgba(140, 170, 220, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 1000px 600px at 85% 95%,
      rgba(180, 140, 220, 0.05) 0%, transparent 55%);
}

/* ================================================================
   SUPERFICIE GLASS V2 — clase base reutilizable
   ================================================================ */
.lg-surface,
html[data-visual="liquid-glass"] .lg-glass,
html[data-visual="liquid-glass"] .sidebar,
html[data-visual="liquid-glass"] .topbar,
html[data-visual="liquid-glass"] .settings-card,
html[data-visual="liquid-glass"] #context-menu,
html[data-visual="liquid-glass"] #slash-menu,
html[data-visual="liquid-glass"] #workspace-menu,
html[data-visual="liquid-glass"] .modal-card,
html[data-visual="liquid-glass"] .toast {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-2) calc(var(--lgi-tint) * 100%), transparent) 0%,
      color-mix(in srgb, var(--bg-2) calc((var(--lgi-tint) - 0.10) * 100%), transparent) 100%
    ) !important;
  -webkit-backdrop-filter: blur(var(--lgi-blur)) saturate(var(--lgi-saturation));
  backdrop-filter: blur(var(--lgi-blur)) saturate(var(--lgi-saturation));
  border: 1px solid var(--lg-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,         /* highlight superior */
    0 -1px 0 rgba(0,0,0,0.06) inset,              /* sombra inferior interna */
    0 1px 1px rgba(0,0,0,0.04),
    0 8px 28px rgba(0,0,0,0.08),
    0 24px 60px rgba(0,0,0,0.05);
}

/* Variante dark del highlight inset */
html[data-visual="liquid-glass"][data-theme="dark"] .lg-surface,
html[data-visual="liquid-glass"][data-theme="dark"] .sidebar,
html[data-visual="liquid-glass"][data-theme="dark"] .topbar,
html[data-visual="liquid-glass"][data-theme="dark"] .settings-card,
html[data-visual="liquid-glass"][data-theme="dark"] #slash-menu,
html[data-visual="liquid-glass"][data-theme="dark"] #context-menu,
html[data-visual="liquid-glass"][data-theme="dark"] #workspace-menu,
html[data-visual="liquid-glass"][data-theme="dark"] .modal-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -1px 0 rgba(0,0,0,0.30) inset,
    0 1px 1px rgba(0,0,0,0.30),
    0 8px 30px rgba(0,0,0,0.45),
    0 24px 60px rgba(0,0,0,0.40);
}

/* ── Pseudo-element ::before (caustic / borde refractivo) ── */
html[data-visual="liquid-glass"] .lg-surface::before,
html[data-visual="liquid-glass"] .sidebar::before,
html[data-visual="liquid-glass"] .topbar::before,
html[data-visual="liquid-glass"] .settings-card::before,
html[data-visual="liquid-glass"] #slash-menu::before,
html[data-visual="liquid-glass"] #context-menu::before,
html[data-visual="liquid-glass"] #workspace-menu::before,
html[data-visual="liquid-glass"] .modal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    /* light caustic en la esquina superior izquierda */
    radial-gradient(ellipse 60% 40% at 20% 0%,
      rgba(255,255,255,0.35) 0%, transparent 70%),
    /* highlight de borde superior */
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 25%);
  mix-blend-mode: overlay;
  opacity: 0.85;
  z-index: -1;
}

/* ── Pseudo-element ::after (pointer glare dinámico) ── */
html[data-visual="liquid-glass"] .lg-pointer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    180px 180px at var(--lg-pointer-x) var(--lg-pointer-y),
    color-mix(in srgb, white calc(var(--lg-glare) * var(--lgi-glare-max) * 100%), transparent) 0%,
    transparent 70%
  );
  z-index: 1;
  mix-blend-mode: soft-light;
  transition: background 80ms linear;
}

/* ================================================================
   BUBBLE HOVER + 3D TILT (botones/items interactivos)
   ================================================================ */
html[data-visual="liquid-glass"] .lg-bubble {
  transform: perspective(900px)
             rotateX(var(--lg-tilt-x))
             rotateY(var(--lg-tilt-y))
             translateZ(calc(var(--lg-depth) * var(--lgi-depth-max)));
  transition: transform var(--lg-motion-normal, 220ms cubic-bezier(.2,.8,.2,1));
  transform-style: preserve-3d;
  will-change: transform;
}
html[data-visual="liquid-glass"] .lg-bubble:hover {
  transform: perspective(900px)
             rotateX(var(--lg-tilt-x))
             rotateY(var(--lg-tilt-y))
             translateZ(calc(var(--lgi-depth-max)))
             scale(var(--lgi-bubble));
}
html[data-visual="liquid-glass"] .lg-bubble:active {
  transform: perspective(900px) translateZ(0) scale(0.985);
  transition-duration: 90ms;
}

/* ================================================================
   ORBS (emoji/icon premium)
   ================================================================ */
html[data-visual="liquid-glass"] .emoji-orb,
html[data-visual="liquid-glass"] .nav-icon-orb,
html[data-visual="liquid-glass"] .page-icon-orb,
html[data-visual="liquid-glass"] .block-icon-orb,
html[data-visual="liquid-glass"] .tr-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%,
      rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 35%, transparent 70%),
    color-mix(in srgb, var(--bg-2) 80%, transparent);
  border: 1px solid var(--lg-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.10),
    0 4px 10px rgba(0,0,0,0.06);
  font-size: 14px;
  line-height: 1;
  transition: transform var(--lg-motion-fast, 140ms cubic-bezier(.2,.8,.2,1));
}
html[data-visual="liquid-glass"][data-theme="dark"] .emoji-orb,
html[data-visual="liquid-glass"][data-theme="dark"] .nav-icon-orb,
html[data-visual="liquid-glass"][data-theme="dark"] .page-icon-orb,
html[data-visual="liquid-glass"][data-theme="dark"] .tr-icon {
  background:
    radial-gradient(circle at 30% 25%,
      rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 40%, transparent 70%),
    color-mix(in srgb, var(--bg-2) 80%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 4px rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.40),
    0 4px 12px rgba(0,0,0,0.30);
}
html[data-visual="liquid-glass"] .emoji-orb:hover,
html[data-visual="liquid-glass"] .tree-row:hover .tr-icon {
  transform: rotateZ(-3deg) scale(1.06);
}

/* ================================================================
   SEGMENTED CONTROL (cápsula glass + active pill)
   ================================================================ */
html[data-visual="liquid-glass"] .lg-segmented,
html[data-visual="liquid-glass"] .gv-seg {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--lg-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.05),
    0 1px 1px rgba(0,0,0,0.04);
}
html[data-visual="liquid-glass"] .lg-segment,
html[data-visual="liquid-glass"] .gv-seg-btn {
  position: relative;
  padding: 6px 14px;
  border-radius: 9px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-2) !important;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 200ms ease, transform 120ms ease;
  z-index: 1;
}
html[data-visual="liquid-glass"] .lg-segment:hover,
html[data-visual="liquid-glass"] .gv-seg-btn:hover {
  color: var(--text) !important;
}
html[data-visual="liquid-glass"] .lg-segment.active,
html[data-visual="liquid-glass"] .lg-segment-active,
html[data-visual="liquid-glass"] .gv-seg-btn.active {
  color: var(--text) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 95%, transparent) 0%,
      color-mix(in srgb, var(--bg) 75%, transparent) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 1px 2px rgba(0,0,0,0.06),
    0 4px 10px rgba(0,0,0,0.06) !important;
}

/* ================================================================
   BOTONES V2 — gel con depth + click elastic
   ================================================================ */
html[data-visual="liquid-glass"] .btn,
html[data-visual="liquid-glass"] button.icon-btn,
html[data-visual="liquid-glass"] .gv-mode,
html[data-visual="liquid-glass"] .wb-btn,
html[data-visual="liquid-glass"] .tt-btn,
html[data-visual="liquid-glass"] .lg-button {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-2) 80%, transparent) 0%,
      color-mix(in srgb, var(--bg-2) 60%, transparent) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-md, 12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -1px 0 rgba(0,0,0,0.05),
    0 1px 2px rgba(0,0,0,0.05),
    0 6px 14px rgba(0,0,0,0.06);
  transition:
    transform var(--lg-motion-fast, 140ms cubic-bezier(.2,.8,.2,1)),
    box-shadow var(--lg-motion-fast, 140ms cubic-bezier(.2,.8,.2,1)),
    background var(--lg-motion-fast, 140ms cubic-bezier(.2,.8,.2,1));
  will-change: transform;
}
html[data-visual="liquid-glass"] .btn:hover,
html[data-visual="liquid-glass"] button.icon-btn:hover,
html[data-visual="liquid-glass"] .gv-mode:hover,
html[data-visual="liquid-glass"] .wb-btn:hover,
html[data-visual="liquid-glass"] .tt-btn:hover,
html[data-visual="liquid-glass"] .lg-button:hover {
  transform: translateY(-2px) scale(1.012);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 2px 4px rgba(0,0,0,0.06),
    0 10px 22px rgba(0,0,0,0.10),
    0 16px 40px rgba(0,0,0,0.08);
}
html[data-visual="liquid-glass"] .btn:active,
html[data-visual="liquid-glass"] button.icon-btn:active,
html[data-visual="liquid-glass"] .gv-mode:active,
html[data-visual="liquid-glass"] .wb-btn:active,
html[data-visual="liquid-glass"] .tt-btn:active,
html[data-visual="liquid-glass"] .lg-button:active {
  transform: translateY(0) scale(0.978);
  transition-duration: 90ms;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.10),
    0 1px 1px rgba(0,0,0,0.04);
}

/* ================================================================
   SLIDERS (track translucent + thumb orb)
   ================================================================ */
html[data-visual="liquid-glass"] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.20) 35%, transparent 70%),
    var(--text);
  border: 1px solid var(--lg-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 3px rgba(0,0,0,0.20),
    0 2px 6px rgba(0,0,0,0.20);
  cursor: pointer;
  transition: transform 120ms ease;
}
html[data-visual="liquid-glass"] input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.18);
}

/* ================================================================
   TOGGLE SWITCH 3D (.toggle-switch existente en Settings)
   ================================================================ */
html[data-visual="liquid-glass"] .toggle-switch {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 1px rgba(0,0,0,0.08);
}
html[data-visual="liquid-glass"] .toggle-switch::after,
html[data-visual="liquid-glass"] .toggle-switch .toggle-knob {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.20) 40%, transparent 70%),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 3px rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.18);
}

/* ================================================================
   PERFORMANCE GUARDS
   ================================================================ */
html[data-visual="liquid-glass"] .gv-stage,
html[data-visual="liquid-glass"] .gv-canvas,
html[data-visual="liquid-glass"] .wb-svg,
html[data-visual="liquid-glass"] .wb-canvas-wrap,
html[data-visual="liquid-glass"] .aig-canvas,
html[data-visual="liquid-glass"] .editor-blocks .block {
  /* Sin pointer/refraction en superficies grandes */
  transform: none !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  html[data-visual="liquid-glass"] * {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  html[data-visual="liquid-glass"] .lg-bubble {
    transform: none !important;
  }
}

/* High contrast: deshabilita transparencia */
@media (prefers-contrast: more) {
  html[data-visual="liquid-glass"] {
    --lgi-blur: 0px !important;
    --lgi-saturation: 100% !important;
    --lgi-tint: 1 !important;
    --lgi-glare-max: 0 !important;
    --lgi-tilt-max: 0deg !important;
  }
}