/* ================================================================
   liquid-glass.css — Estilo visual "Liquid Glass" para Gafo
   Inspirado en principios de capas translúcidas, profundidad,
   blur realista y reflejos suaves. NO copia assets de terceros.
   Activación: html[data-visual="liquid-glass"]
   ================================================================ */

html[data-visual="liquid-glass"] {
  /* ── Tokens ── */
  --lg-bg:              color-mix(in srgb, var(--bg, #fff) 88%, transparent);
  --lg-surface:         color-mix(in srgb, var(--bg-2, #f6f7fb) 70%, transparent);
  --lg-surface-strong:  color-mix(in srgb, var(--bg-2, #f6f7fb) 85%, transparent);
  --lg-surface-soft:    color-mix(in srgb, var(--bg-2, #f6f7fb) 55%, transparent);
  --lg-border:          color-mix(in srgb, var(--text, #1a1a1a) 12%, transparent);
  --lg-border-strong:   color-mix(in srgb, var(--text, #1a1a1a) 22%, transparent);
  --lg-shadow:          0 1px 2px rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.06);
  --lg-shadow-float:    0 2px 4px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.10);
  --lg-highlight:       inset 0 1px 0 rgba(255,255,255,0.55);
  --lg-reflection:      linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0) 100%);
  --lg-blur:            22px;
  --lg-saturation:      160%;
  --lg-radius-sm:       8px;
  --lg-radius-md:       12px;
  --lg-radius-lg:       18px;
  --lg-radius-xl:       24px;
  --lg-motion-fast:     140ms cubic-bezier(.2,.8,.2,1);
  --lg-motion-normal:   220ms cubic-bezier(.2,.8,.2,1);
  --lg-motion-slow:     320ms cubic-bezier(.16,1,.3,1);
}

/* Dark variant: reflejos más sutiles, surfaces más oscuros */
html[data-visual="liquid-glass"][data-theme="dark"] {
  --lg-bg:              color-mix(in srgb, var(--bg, #0a0b0f) 78%, transparent);
  --lg-surface:         color-mix(in srgb, var(--bg-2, #15171c) 60%, transparent);
  --lg-surface-strong:  color-mix(in srgb, var(--bg-2, #15171c) 78%, transparent);
  --lg-surface-soft:    color-mix(in srgb, var(--bg-2, #15171c) 45%, transparent);
  --lg-border:          color-mix(in srgb, #ffffff 10%, transparent);
  --lg-border-strong:   color-mix(in srgb, #ffffff 18%, transparent);
  --lg-shadow:          0 1px 2px rgba(0,0,0,0.30), 0 6px 18px rgba(0,0,0,0.45);
  --lg-shadow-float:    0 2px 4px rgba(0,0,0,0.40), 0 14px 36px rgba(0,0,0,0.55);
  --lg-highlight:       inset 0 1px 0 rgba(255,255,255,0.10);
  --lg-reflection:      linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 100%);
  --lg-saturation:      140%;
}

/* Fallback: sin backdrop-filter (Firefox/old browsers) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-visual="liquid-glass"] {
    --lg-bg:              var(--bg, #fff);
    --lg-surface:         var(--bg-2, #f6f7fb);
    --lg-surface-strong:  var(--bg-2, #f6f7fb);
    --lg-surface-soft:    var(--bg-2, #f6f7fb);
  }
}

/* ── Mixin via reglas reutilizables ── */
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,
html[data-visual="liquid-glass"] .gv-panel,
html[data-visual="liquid-glass"] .gv-topbar {
  background: var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow), var(--lg-highlight);
  position: relative;
  isolation: isolate;
}

/* tt-widget recibe glass sin tocar su position fixed (Bug fix V7) */
html[data-visual="liquid-glass"] .tt-widget {
  background: var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow), var(--lg-highlight);
  /* NO tocar position/top/left/transform — los gestiona time-tracker.js */
}

/* Reflejo sutil en superficies "fuertes" (modales, paneles flotantes) */
html[data-visual="liquid-glass"] .settings-card::before,
html[data-visual="liquid-glass"] .modal-card::before,
html[data-visual="liquid-glass"] #slash-menu::before,
html[data-visual="liquid-glass"] #context-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--lg-reflection);
  border-radius: inherit;
  opacity: 0.6;
  z-index: -1;
}

/* ── Sidebar ── */
html[data-visual="liquid-glass"] .sidebar {
  border-right: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow), var(--lg-highlight) !important;
}
html[data-visual="liquid-glass"] .tree-row,
html[data-visual="liquid-glass"] .sb-nav-item {
  border-radius: var(--lg-radius-sm);
  transition: background var(--lg-motion-fast),
              transform var(--lg-motion-fast),
              box-shadow var(--lg-motion-fast);
}
html[data-visual="liquid-glass"] .tree-row:hover,
html[data-visual="liquid-glass"] .sb-nav-item:hover {
  background: var(--lg-surface-strong);
  transform: translateY(-0.5px);
}
html[data-visual="liquid-glass"] .tree-row.active,
html[data-visual="liquid-glass"] .sb-nav-item.active {
  background: var(--lg-surface-strong);
  box-shadow: var(--lg-highlight), 0 1px 2px rgba(0,0,0,0.06);
}

/* ── Topbar ── */
html[data-visual="liquid-glass"] .topbar {
  border-bottom: 1px solid var(--lg-border) !important;
}

/* ── Botones ── */
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 {
  background: var(--lg-surface);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-md);
  box-shadow: var(--lg-highlight), 0 1px 2px rgba(0,0,0,0.04);
  transition: transform var(--lg-motion-fast),
              background var(--lg-motion-fast),
              box-shadow var(--lg-motion-fast);
}
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 {
  background: var(--lg-surface-strong);
  transform: translateY(-1px);
  box-shadow: var(--lg-highlight), 0 4px 10px 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 {
  transform: translateY(0) scale(0.98);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
}

/* ── Inputs / selects ── */
html[data-visual="liquid-glass"] input[type="text"],
html[data-visual="liquid-glass"] input[type="email"],
html[data-visual="liquid-glass"] input[type="password"],
html[data-visual="liquid-glass"] input[type="search"],
html[data-visual="liquid-glass"] input[type="number"],
html[data-visual="liquid-glass"] textarea,
html[data-visual="liquid-glass"] select {
  background: var(--lg-surface-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-sm);
  transition: border-color var(--lg-motion-fast), box-shadow var(--lg-motion-fast);
}
html[data-visual="liquid-glass"] input:focus,
html[data-visual="liquid-glass"] textarea:focus,
html[data-visual="liquid-glass"] select:focus {
  outline: none;
  border-color: var(--lg-border-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text, #1a1a1a) 8%, transparent);
}

/* ── Slash menu, context menu ── */
html[data-visual="liquid-glass"] #slash-menu,
html[data-visual="liquid-glass"] #context-menu,
html[data-visual="liquid-glass"] #workspace-menu {
  border-radius: var(--lg-radius-md);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow: var(--lg-shadow-float), var(--lg-highlight);
  animation: lg-pop var(--lg-motion-normal) both;
}
html[data-visual="liquid-glass"] .sm-item,
html[data-visual="liquid-glass"] .cx-item,
html[data-visual="liquid-glass"] .wm-item {
  border-radius: var(--lg-radius-sm);
  transition: background var(--lg-motion-fast), transform var(--lg-motion-fast);
}
html[data-visual="liquid-glass"] .sm-item:hover,
html[data-visual="liquid-glass"] .cx-item:hover,
html[data-visual="liquid-glass"] .wm-item:hover,
html[data-visual="liquid-glass"] .sm-item.selected {
  background: var(--lg-surface-strong);
}

/* ── Modales (Settings, Share, Templates, etc.) ── */
html[data-visual="liquid-glass"] .modal {
  background: color-mix(in srgb, #000 30%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-visual="liquid-glass"] .settings-card,
html[data-visual="liquid-glass"] .modal-card {
  border-radius: var(--lg-radius-xl);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--lg-shadow-float), var(--lg-highlight);
  animation: lg-pop var(--lg-motion-slow) both;
}
html[data-visual="liquid-glass"] .settings-nav button {
  border-radius: var(--lg-radius-sm);
  transition: background var(--lg-motion-fast), transform var(--lg-motion-fast);
}
html[data-visual="liquid-glass"] .settings-nav button:hover {
  background: var(--lg-surface-strong);
  transform: translateX(1px);
}
html[data-visual="liquid-glass"] .settings-nav button.active {
  background: var(--lg-surface-strong);
  box-shadow: var(--lg-highlight);
}

/* ── Toasts ── */
html[data-visual="liquid-glass"] .toast {
  border-radius: var(--lg-radius-lg);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--lg-shadow-float), var(--lg-highlight);
}

/* ── Bloques (sutil, no abusivo en listas largas) ── */
html[data-visual="liquid-glass"] .block:hover .block-row {
  background: var(--lg-surface-soft);
  border-radius: var(--lg-radius-sm);
}

/* ── Emoji chips ── */
html[data-visual="liquid-glass"] .emoji-chip,
html[data-visual="liquid-glass"] .nav-icon-glass,
html[data-visual="liquid-glass"] .block-icon-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lg-surface);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), 0 1px 2px rgba(0,0,0,0.04);
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
}

/* Sidebar emojis: chip suave */
html[data-visual="liquid-glass"] .tr-icon {
  align-self: center;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--lg-surface-soft);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight);
  font-size: 13px;
}

/* ── Pizarra / Time Tracker / Mind Map / AI Chat / AI Graph: superficies clave ── */
html[data-visual="liquid-glass"] .wb-toolbar,
html[data-visual="liquid-glass"] .tt-card,
html[data-visual="liquid-glass"] .gv-panel,
html[data-visual="liquid-glass"] .aic-list,
html[data-visual="liquid-glass"] .aic-composer,
html[data-visual="liquid-glass"] .aig-side {
  background: var(--lg-surface) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-radius-md);
  box-shadow: var(--lg-shadow), var(--lg-highlight);
}

/* ── Animaciones ── */
@keyframes lg-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html[data-visual="liquid-glass"] * {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ── Modo "alto contraste" para legibilidad: usuarios pueden activar
   prefers-contrast-more para reducir transparencia ── */
@media (prefers-contrast: more) {
  html[data-visual="liquid-glass"] {
    --lg-bg:              var(--bg);
    --lg-surface:         var(--bg-2);
    --lg-surface-strong:  var(--bg-2);
    --lg-surface-soft:    var(--bg-2);
    --lg-border:          var(--border, rgba(0,0,0,0.2));
    --lg-blur:            0px;
    --lg-saturation:      100%;
  }
}

/* Performance: NO aplicar backdrop-filter a la pizarra (canvas grande), grafos,
   ni a cada bloque en una página larga. Mantener el efecto en capas de
   navegación y paneles flotantes únicamente. */
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 {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}