/* ================================================================
   liquid-glass-v6-fix.css
   Capa final (carga la última en index.html). Arregla:
   - Workspace switcher cortado arriba-izquierda.
   - Page icon (emoji) cortado y mal centrado.
   - Sidebar premium con glow sutil sin romper la estabilidad.
   - Tokens Liquid Glass V6 (canónicos).
   - Microinteracciones premium sin chase-the-tail.
   No toca: slash menu, workspace menu, time tracker, pizarra, mind
   map, AI graph, settings (sus capas finales mantienen prioridad).
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   TOKENS V6 — fuente única de verdad
   ────────────────────────────────────────────────────────────── */
:root {
  /* Blur tiers */
  --lg-blur-soft: 12px;
  --lg-blur-balanced: 22px;
  --lg-blur-intense: 32px;

  /* Tints */
  --lg-tint-light: rgba(255,255,255,0.78);
  --lg-tint-dark:  rgba(28,28,32,0.72);

  /* Edges & specular */
  --lg-border:          rgba(255,255,255,0.10);
  --lg-inner-highlight: rgba(255,255,255,0.50);
  --lg-specular:        rgba(255,255,255,0.18);

  /* Shadow scale */
  --lg-shadow-1: 0 1px 2px rgba(20,20,30,0.08), 0 2px 6px rgba(20,20,30,0.06);
  --lg-shadow-2: 0 4px 12px rgba(20,20,30,0.10), 0 8px 24px rgba(20,20,30,0.08);
  --lg-shadow-3: 0 12px 36px rgba(20,30,50,0.14), 0 24px 60px rgba(20,30,50,0.10);

  /* Glow */
  --lg-glow:        0 0 0 1px rgba(255,255,255,0.06), 0 6px 24px rgba(120,170,255,0.18);
  --lg-glow-strong: 0 0 0 1px rgba(120,170,255,0.30), 0 8px 32px rgba(120,170,255,0.32);

  /* Depth + radius + motion */
  --lg-depth:       12px;
  --lg-radius-sm:   8px;
  --lg-radius-md:   12px;
  --lg-radius-lg:   16px;
  --lg-radius-xl:   20px;

  --lg-motion-fast:   140ms;
  --lg-motion-normal: 220ms;
  --lg-motion-slow:   320ms;
  --lg-ease-premium:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --lg-ease-smooth:   cubic-bezier(0.16, 1, 0.30, 1);
}

html[data-theme="dark"] {
  --lg-border:          rgba(255,255,255,0.10);
  --lg-inner-highlight: rgba(255,255,255,0.16);
  --lg-specular:        rgba(255,255,255,0.10);
  --lg-shadow-1: 0 1px 2px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.35);
  --lg-shadow-2: 0 4px 12px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.35);
  --lg-shadow-3: 0 12px 36px rgba(0,0,0,0.55), 0 24px 60px rgba(0,0,0,0.45);
}

/* ──────────────────────────────────────────────────────────────
   FIX A — WORKSPACE SWITCHER (top-left no se corta)
   Causa: .workspace-switcher tenía overflow:hidden !important
          y el avatar 34x34 no cabía en el padding original.
   ────────────────────────────────────────────────────────────── */
.workspace-switcher {
  min-height: 44px;
  padding: 8px 8px 8px 10px !important;
  margin: 6px !important;
  align-items: center !important;
  border-radius: 10px !important;
  /* overflow visible: el ::before de hover no debe cortarse */
  overflow: visible !important;
}

html[data-visual="liquid-glass"] #sidebar .workspace-switcher,
html[data-visual="liquid-glass"] .sidebar .workspace-switcher {
  overflow: visible !important;
  position: relative;
  isolation: isolate;
}

/* Avatar premium con glass real */
html .ws-avatar,
html[data-visual="liquid-glass"] .ws-avatar,
html[data-visual="liquid-glass"] #sidebar .ws-avatar,
html[data-visual="liquid-glass"] .sidebar .ws-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  position: relative;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 65%),
    linear-gradient(135deg, var(--text), var(--text-2)) !important;
  color: var(--bg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.18),
    0 4px 10px rgba(0,0,0,0.10) !important;
  transition: transform var(--lg-motion-normal) var(--lg-ease-premium),
              box-shadow var(--lg-motion-normal) var(--lg-ease-smooth);
}

@media (min-width: 1024px) {
  html .ws-avatar,
  html[data-visual="liquid-glass"] .ws-avatar,
  html[data-visual="liquid-glass"] #sidebar .ws-avatar,
  html[data-visual="liquid-glass"] .sidebar .ws-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
}

.workspace-switcher:hover .ws-avatar {
  transform: rotate(-4deg) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.18),
    0 6px 16px rgba(0,0,0,0.14),
    var(--lg-glow) !important;
}

.ws-meta {
  min-width: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.25 !important;
}

.ws-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ws-plan {
  font-size: 11px !important;
  color: var(--text-2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 0.85;
}

/* Hover premium del workspace switcher */
.workspace-switcher {
  transition:
    background-color var(--lg-motion-normal) var(--lg-ease-smooth),
    box-shadow var(--lg-motion-normal) var(--lg-ease-smooth) !important;
  transform: none !important;
}

html[data-visual="liquid-glass"] .workspace-switcher:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--text) 7%, transparent),
      color-mix(in srgb, var(--text) 4%, transparent)) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-inner-highlight),
    var(--lg-shadow-1) !important;
}

/* ──────────────────────────────────────────────────────────────
   FIX B — PAGE ICON (emoji 👋 centrado y nunca cortado)
   Causa: width=height=font-size=78 con line-height:1 corta el descender.
          + orb de depth-v5 ponía border-radius con shadow que recortaba.
   Solución: contenedor 88x88, font-size 64, line-height 1.1, overflow visible.
   ────────────────────────────────────────────────────────────── */
.page-icon-wrap,
html[data-visual="liquid-glass"] .page-icon-wrap {
  width: 88px !important;
  height: 88px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-icon-wrap.has-icon,
html[data-visual="liquid-glass"] .page-icon-wrap.has-icon { display: flex !important; }

.page-icon,
html[data-visual="liquid-glass"] .page-icon,
html[data-visual="liquid-glass"] #page-icon {
  width: 88px !important;
  height: 88px !important;
  /* el emoji ya no fuerza font-size 78: deja sitio para descender */
  font-size: 64px !important;
  line-height: 1.1 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  cursor: pointer;
  border-radius: 16px;
  position: relative;
  transition:
    transform var(--lg-motion-normal) var(--lg-ease-premium),
    background var(--lg-motion-normal) var(--lg-ease-smooth);
}

@media (min-width: 1024px) {
  .page-icon-wrap,
  html[data-visual="liquid-glass"] .page-icon-wrap {
    width: 96px !important; height: 96px !important;
  }
  .page-icon,
  html[data-visual="liquid-glass"] .page-icon,
  html[data-visual="liquid-glass"] #page-icon {
    width: 96px !important; height: 96px !important; font-size: 72px !important;
  }
}

/* SVG icons mantienen el tamaño exacto */
.page-icon.icon-svg,
html[data-visual="liquid-glass"] .page-icon.icon-svg {
  font-size: 0 !important;
}
.page-icon.icon-svg svg,
html[data-visual="liquid-glass"] .page-icon.icon-svg svg {
  width: 64px !important;
  height: 64px !important;
  display: block;
  color: var(--text);
}
@media (min-width: 1024px) {
  .page-icon.icon-svg svg,
  html[data-visual="liquid-glass"] .page-icon.icon-svg svg { width: 72px !important; height: 72px !important; }
}

/* Halo premium SOLO en hover, sin recortar el emoji */
html[data-visual="liquid-glass"] .page-icon:hover {
  transform: translateY(-1px) scale(1.03);
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--text) 6%, transparent) 0%,
      transparent 70%) !important;
}

/* Drop-shadow elegante (un solo nivel para no cortar) */
html[data-emoji-pack="enhanced"] #page-icon,
html[data-emoji-pack="apple-native"] #page-icon,
html[data-emoji-pack="enhanced"] .page-icon,
html[data-emoji-pack="apple-native"] .page-icon {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.20))
    drop-shadow(0 4px 10px rgba(0,0,0,0.12)) !important;
}

html[data-theme="dark"][data-emoji-pack="enhanced"] #page-icon,
html[data-theme="dark"][data-emoji-pack="apple-native"] #page-icon {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.10))
    drop-shadow(0 4px 14px rgba(0,0,0,0.45)) !important;
}

/* Anular el orb cuadrado de depth-v5 que cortaba el emoji */
html[data-visual="liquid-glass"] .page-icon-wrap .page-icon {
  box-shadow: none !important;
  border-radius: 16px !important;
}
html[data-visual="liquid-glass"] .page-icon-wrap:hover .page-icon {
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────
   FIX C — SIDEBAR PREMIUM (glow sutil + accent rail sin romper)
   Causa: sidebar-solid-final.css tenía transform/box-shadow:none
          en hover. Restauramos un highlight inset suave + accent rail.
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .sidebar .sb-item,
html[data-visual="liquid-glass"] .sidebar .tree-row {
  position: relative;
  transition:
    background-color var(--lg-motion-fast) var(--lg-ease-smooth),
    box-shadow var(--lg-motion-fast) var(--lg-ease-smooth),
    color var(--lg-motion-fast) ease !important;
}

/* Hover: highlight inset + tinte premium SIN translate (estable) */
html[data-visual="liquid-glass"] .sidebar .sb-item:hover,
html[data-visual="liquid-glass"] .sidebar .tree-row:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--text) 7%, transparent),
      color-mix(in srgb, var(--text) 3%, transparent)) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-inner-highlight),
    inset 0 -1px 0 rgba(0,0,0,0.04) !important;
  color: var(--text) !important;
}

/* Active: barra lateral fina + fondo premium */
html[data-visual="liquid-glass"] .sidebar .sb-item.active,
html[data-visual="liquid-glass"] .sidebar .tree-row.active {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--text) 10%, transparent),
      color-mix(in srgb, var(--text) 5%, transparent)) !important;
  box-shadow:
    inset 2px 0 0 currentColor,
    inset 0 1px 0 var(--lg-inner-highlight) !important;
  color: var(--text) !important;
  font-weight: 550;
}

/* Iconos del sidebar con lift sutil al hover (sin tocar bbox) */
html[data-visual="liquid-glass"] .sidebar .sb-item .sb-icon,
html[data-visual="liquid-glass"] .sidebar .tree-row .tr-icon {
  transition: transform var(--lg-motion-fast) var(--lg-ease-premium),
              filter var(--lg-motion-fast) var(--lg-ease-smooth);
}
html[data-visual="liquid-glass"] .sidebar .sb-item:hover .sb-icon,
html[data-visual="liquid-glass"] .sidebar .tree-row:hover .tr-icon {
  transform: scale(1.08);
}

/* Focus visible elegante */
html[data-visual="liquid-glass"] .sidebar :is(.sb-item, .tree-row, .icon-btn):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 60%, transparent) !important;
  outline-offset: -2px;
  box-shadow:
    inset 0 1px 0 var(--lg-inner-highlight),
    var(--lg-glow) !important;
}

/* ──────────────────────────────────────────────────────────────
   FIX D — CRISTAL REAL en navegación: sidebar mantiene fondo
   sólido (sidebar-solid-final manda) pero topbar y zona principal
   reciben más vida.
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .topbar {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 88%, transparent) 0%,
      color-mix(in srgb, var(--bg) 65%, transparent) 60%,
      transparent 100%) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-soft)) saturate(1.4);
  backdrop-filter:         blur(var(--lg-blur-soft)) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow:
    inset 0 1px 0 var(--lg-inner-highlight),
    inset 0 -1px 0 rgba(0,0,0,0.04);
}

/* Editor scroll: brillo ambiente sutil que no rompe nada */
html[data-visual="liquid-glass"] .editor-scroll {
  position: relative;
}
html[data-visual="liquid-glass"] .editor-scroll::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 280px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 800px 280px at 30% 0%,
      color-mix(in srgb, var(--text) 4%, transparent), transparent 70%),
    radial-gradient(ellipse 600px 220px at 80% 0%,
      color-mix(in srgb, var(--text) 3%, transparent), transparent 70%);
  opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────────
   FIX E — Botones / sb-shortcut / icon-btn premium
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .sb-shortcut {
  background: color-mix(in srgb, var(--text) 6%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 11px;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 var(--lg-inner-highlight) !important;
}

html[data-visual="liquid-glass"] .icon-btn {
  border-radius: 8px !important;
  transition: background var(--lg-motion-fast) var(--lg-ease-smooth),
              box-shadow var(--lg-motion-fast) var(--lg-ease-smooth);
}
html[data-visual="liquid-glass"] .icon-btn:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent) !important;
  box-shadow:
    inset 0 1px 0 var(--lg-inner-highlight),
    var(--lg-shadow-1) !important;
}

/* ──────────────────────────────────────────────────────────────
   PERFORMANCE & A11Y GUARDS
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .workspace-switcher,
  .ws-avatar,
  .page-icon,
  .sidebar .sb-item,
  .sidebar .tree-row {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .workspace-switcher:hover .ws-avatar,
  .page-icon:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-visual="liquid-glass"] .topbar,
  html[data-visual="liquid-glass"] .editor-scroll::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--bg) !important;
  }
  html[data-visual="liquid-glass"] .editor-scroll::before { display: none !important; }
}

html[data-visual="liquid-glass"][data-lg-reduce-transparency="1"] .topbar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--bg) !important;
}

/* Modo claro Frosted Premium: ajustes finos */
html[data-theme="light"][data-visual="liquid-glass"] .workspace-switcher:hover {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.04),
      rgba(0,0,0,0.02)) !important;
}

/* Modo oscuro Graphite (no azul marino): refuerzo de neutralidad */
html[data-theme="dark"][data-visual="liquid-glass"] .workspace-switcher:hover {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.03)) !important;
}