/* ============================================================
   liquid-glass-depth-v5.css — Safe Immersive Polish
   ============================================================
   Mejora la profundidad e inmersión del modo Liquid Glass en
   ZONAS SEGURAS:
   - page content (callout, quote, code, blocks hover)
   - topbar
   - modales (settings, search, share, templates)
   - vistas especiales: cards (Time Tracker, Whiteboard list,
     Calendar, Mind Map panel, AI Graph)
   - database table

   ZONAS PROTEGIDAS (NO TOCA):
   - #sidebar, .sidebar (sidebar-solid-final.css gana)
   - #workspace-switcher, #workspace-menu
   - #slash-menu (slash-liquid-final.css gana)
   - .tt-widget flotante (recovery)
   - .wb-svg, .wb-canvas-wrap (canvas raw)
   - .gv-stage canvas, .gv-canvas (canvas raw)
   - .aig-canvas (canvas raw)
   - .lg-pointer / .lg-bubble dentro de sidebar (no se reactivan aquí)

   Kill switch: window.LG_DEPTH_V5_DISABLE = true → este archivo
   queda inocuo (todas las reglas son [data-visual="liquid-glass"]
   y desaparecen en otros modos).
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] {
  --lgd5-surface-1: rgba(255,255,255,0.66);
  --lgd5-surface-2: rgba(255,255,255,0.50);
  --lgd5-surface-hover: rgba(255,255,255,0.80);
  --lgd5-edge-light: rgba(255,255,255,0.85);
  --lgd5-edge-shadow: rgba(20,20,30,0.10);
  --lgd5-inner-shine: rgba(255,255,255,0.55);

  --lgd5-shadow-card: 0 1px 2px rgba(15,15,20,0.04), 0 8px 24px rgba(15,15,20,0.06);
  --lgd5-shadow-card-hover: 0 2px 4px rgba(15,15,20,0.05), 0 12px 32px rgba(15,15,20,0.10);
  --lgd5-shadow-elevated: 0 4px 8px rgba(15,15,20,0.06), 0 24px 48px rgba(15,15,20,0.12);

  --lgd5-radius-sm: 10px;
  --lgd5-radius-md: 14px;
  --lgd5-radius-lg: 18px;

  --lgd5-ease: cubic-bezier(.16,1,.3,1);
  --lgd5-spring: cubic-bezier(.34,1.56,.64,1);
  --lgd5-fast: 160ms;
  --lgd5-normal: 220ms;
}

html[data-visual="liquid-glass"][data-theme="dark"] {
  --lgd5-surface-1: rgba(255,255,255,0.05);
  --lgd5-surface-2: rgba(255,255,255,0.035);
  --lgd5-surface-hover: rgba(255,255,255,0.085);
  --lgd5-edge-light: rgba(255,255,255,0.12);
  --lgd5-edge-shadow: rgba(0,0,0,0.40);
  --lgd5-inner-shine: rgba(255,255,255,0.10);

  --lgd5-shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.50);
  --lgd5-shadow-card-hover: 0 2px 4px rgba(0,0,0,0.40), 0 12px 32px rgba(0,0,0,0.60);
  --lgd5-shadow-elevated: 0 4px 8px rgba(0,0,0,0.45), 0 24px 48px rgba(0,0,0,0.65);
}

/* Reduce transparency: usar fondos sólidos */
html[data-visual="liquid-glass"][data-lg-reduce-transparency="1"] {
  --lgd5-surface-1: var(--bg-2);
  --lgd5-surface-2: var(--bg-2);
  --lgd5-surface-hover: var(--bg-3);
}

/* ──────────────────────────────────────────────────────────────
   PAGE CONTENT — Callout / Quote / Code (zonas seguras)
   Las clases reales son .block.block-{type}.
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .editor-blocks .block.block-callout > .block-row,
html[data-visual="liquid-glass"] .editor-blocks .block.block-callout .block-row {
  background: var(--lgd5-surface-1) !important;
  border: 1px solid var(--lgd5-edge-shadow) !important;
  border-radius: var(--lgd5-radius-md) !important;
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card) !important;
  transition: box-shadow var(--lgd5-normal) var(--lgd5-ease),
              transform var(--lgd5-fast) var(--lgd5-ease) !important;
}
html[data-visual="liquid-glass"] .editor-blocks .block.block-callout:hover .block-row {
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card-hover) !important;
}

html[data-visual="liquid-glass"] .editor-blocks .block.block-quote .block-row {
  border-left: 3px solid var(--text-2) !important;
  padding-left: 14px !important;
  background: linear-gradient(90deg, var(--lgd5-surface-2) 0%, transparent 60%) !important;
  border-radius: 0 var(--lgd5-radius-sm) var(--lgd5-radius-sm) 0 !important;
}

html[data-visual="liquid-glass"] .editor-blocks .block.block-code .block-row {
  background: var(--lgd5-surface-2) !important;
  border: 1px solid var(--lgd5-edge-shadow) !important;
  border-radius: var(--lgd5-radius-md) !important;
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card) !important;
}

/* Hover sutil en cualquier bloque del editor (excepto sidebar/menus) */
html[data-visual="liquid-glass"] .editor-blocks .block:hover > .block-row {
  transition: background var(--lgd5-fast) ease;
}

/* Page title con depth muy sutil */
html[data-visual="liquid-glass"] #page-title {
  text-shadow: 0 1px 0 var(--lgd5-edge-light);
}
html[data-visual="liquid-glass"][data-theme="dark"] #page-title {
  text-shadow: none;
}

/* Page icon orb */
html[data-visual="liquid-glass"] .page-icon-wrap .page-icon,
html[data-visual="liquid-glass"] .page-icon-orb {
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    inset 0 -1px 0 var(--lgd5-edge-shadow),
    var(--lgd5-shadow-card) !important;
  border-radius: var(--lgd5-radius-sm);
  transition: transform var(--lgd5-normal) var(--lgd5-spring),
              box-shadow var(--lgd5-normal) var(--lgd5-ease);
}
html[data-visual="liquid-glass"] .page-icon-wrap:hover .page-icon,
html[data-visual="liquid-glass"] .page-icon-orb:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card-hover) !important;
}

/* ──────────────────────────────────────────────────────────────
   TOPBAR — capa superior con highlight inset
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .topbar {
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    inset 0 -1px 0 var(--lgd5-edge-shadow) !important;
}

/* ──────────────────────────────────────────────────────────────
   MODALES — depth premium
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .settings-card,
html[data-visual="liquid-glass"] .search-card,
html[data-visual="liquid-glass"] .share-card,
html[data-visual="liquid-glass"] .templates-card,
html[data-visual="liquid-glass"] .modal-card {
  border-radius: var(--lgd5-radius-lg) !important;
  border: 1px solid var(--lgd5-edge-shadow) !important;
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-elevated) !important;
}

/* Animación de entrada de modales — solo si motion permitido */
@media (prefers-reduced-motion: no-preference) {
  html[data-visual="liquid-glass"] .modal:not(.hidden) .settings-card,
  html[data-visual="liquid-glass"] .modal:not(.hidden) .search-card,
  html[data-visual="liquid-glass"] .modal:not(.hidden) .share-card,
  html[data-visual="liquid-glass"] .modal:not(.hidden) .templates-card,
  html[data-visual="liquid-glass"] .modal:not(.hidden) .modal-card {
    animation: lgd5-modal-in 240ms var(--lgd5-ease) both;
  }
}

@keyframes lgd5-modal-in {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ──────────────────────────────────────────────────────────────
   TIME TRACKER — cards estáticos premium (NO el widget flotante)
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .tt-card {
  background: var(--lgd5-surface-1) !important;
  border: 1px solid var(--lgd5-edge-shadow) !important;
  border-radius: var(--lgd5-radius-md) !important;
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card) !important;
  transition: box-shadow var(--lgd5-normal) var(--lgd5-ease),
              transform var(--lgd5-fast) var(--lgd5-ease);
}
html[data-visual="liquid-glass"] .tt-card:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card-hover) !important;
}

html[data-visual="liquid-glass"] .tt-empty {
  border-radius: var(--lgd5-radius-lg) !important;
  border: 1px solid var(--lgd5-edge-shadow) !important;
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card) !important;
}

/* ──────────────────────────────────────────────────────────────
   WHITEBOARD LIST CARDS (no el editor)
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .wb-list-root .wb-card {
  background: var(--lgd5-surface-1) !important;
  border: 1px solid var(--lgd5-edge-shadow) !important;
  border-radius: var(--lgd5-radius-md) !important;
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card) !important;
  transition: box-shadow var(--lgd5-normal) var(--lgd5-ease),
              transform var(--lgd5-fast) var(--lgd5-ease);
}
html[data-visual="liquid-glass"] .wb-list-root .wb-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card-hover) !important;
}

/* ──────────────────────────────────────────────────────────────
   CALENDAR — eventos, header
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .cal-page-head {
  border-radius: var(--lgd5-radius-md) !important;
}
html[data-visual="liquid-glass"] .cal-event {
  border-radius: 6px !important;
  box-shadow: var(--lgd5-shadow-card) !important;
  transition: transform var(--lgd5-fast) var(--lgd5-ease),
              box-shadow var(--lgd5-fast) var(--lgd5-ease);
}
html[data-visual="liquid-glass"] .cal-event:hover {
  transform: translateY(-1px);
  box-shadow: var(--lgd5-shadow-card-hover) !important;
}

/* ──────────────────────────────────────────────────────────────
   MIND MAP — panel cards (NO el canvas)
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .gv-panel .gv-section,
html[data-visual="liquid-glass"] .gv-panel .gv-row {
  border-radius: var(--lgd5-radius-sm) !important;
}

html[data-visual="liquid-glass"] .gv-mode {
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    inset 0 -1px 0 var(--lgd5-edge-shadow),
    var(--lgd5-shadow-card) !important;
  transition: transform var(--lgd5-normal) var(--lgd5-spring),
              box-shadow var(--lgd5-fast) var(--lgd5-ease);
}
html[data-visual="liquid-glass"] .gv-mode:hover {
  transform: translateY(-1px) scale(1.02);
}

/* Empty state del mind map */
html[data-visual="liquid-glass"] .gv-empty-state button {
  border-radius: var(--lgd5-radius-sm);
  box-shadow: var(--lgd5-shadow-card);
  transition: transform var(--lgd5-fast) var(--lgd5-ease),
              box-shadow var(--lgd5-fast) var(--lgd5-ease);
}
html[data-visual="liquid-glass"] .gv-empty-state button:hover {
  transform: translateY(-1px);
  box-shadow: var(--lgd5-shadow-card-hover);
}

/* ──────────────────────────────────────────────────────────────
   AI GRAPH / CHAT — list items y mensajes
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .aic-list-item {
  border-radius: var(--lgd5-radius-sm) !important;
  transition: background var(--lgd5-fast) var(--lgd5-ease);
}
html[data-visual="liquid-glass"] .aig-msg,
html[data-visual="liquid-glass"] .aic-msg-card {
  border: 1px solid var(--lgd5-edge-shadow) !important;
  border-radius: var(--lgd5-radius-md) !important;
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    var(--lgd5-shadow-card) !important;
}

/* ──────────────────────────────────────────────────────────────
   DATABASE TABLE
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .database-block .db-tab,
html[data-visual="liquid-glass"] .db-tab {
  border-radius: var(--lgd5-radius-sm) !important;
  transition: background var(--lgd5-fast) var(--lgd5-ease),
              transform var(--lgd5-fast) var(--lgd5-ease);
}
html[data-visual="liquid-glass"] .database-block .db-tab.active,
html[data-visual="liquid-glass"] .db-tab.active {
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    inset 0 -1px 0 var(--lgd5-edge-shadow),
    var(--lgd5-shadow-card) !important;
}

html[data-visual="liquid-glass"] .database-block .db-row:hover,
html[data-visual="liquid-glass"] .db-row:hover {
  background: var(--lgd5-surface-2) !important;
}

html[data-visual="liquid-glass"] .db-tag,
html[data-visual="liquid-glass"] .db-status {
  box-shadow:
    inset 0 1px 0 var(--lgd5-edge-light),
    0 1px 2px rgba(0,0,0,0.05) !important;
}

/* ──────────────────────────────────────────────────────────────
   GUARDS — NO TOCAR zonas protegidas
   ────────────────────────────────────────────────────────────── */
/* Reset explícito por si alguna regla anterior bleed-through llegó al sidebar
   (sidebar-solid-final.css es la fuente de verdad; aquí solo reforzamos). */
html[data-visual="liquid-glass"] #sidebar,
html[data-visual="liquid-glass"] .sidebar,
html[data-visual="liquid-glass"] #sidebar *,
html[data-visual="liquid-glass"] .sidebar *,
html[data-visual="liquid-glass"] #workspace-switcher,
html[data-visual="liquid-glass"] #workspace-menu,
html[data-visual="liquid-glass"] #workspace-menu *,
html[data-visual="liquid-glass"] #slash-menu,
html[data-visual="liquid-glass"] #slash-menu *,
html[data-visual="liquid-glass"] .tt-widget,
html[data-visual="liquid-glass"] .wb-svg,
html[data-visual="liquid-glass"] .wb-svg *,
html[data-visual="liquid-glass"] .wb-canvas-wrap,
html[data-visual="liquid-glass"] .gv-stage canvas,
html[data-visual="liquid-glass"] .gv-canvas,
html[data-visual="liquid-glass"] .aig-canvas {
  /* Si alguna regla LGD5 hubiera caído por herencia, esto la neutraliza
     respecto a transformaciones agresivas. Estas zonas conservan su CSS
     propio (sidebar-solid-final, slash-liquid-final, etc.). */
  --lgd5-surface-1: transparent;
  --lgd5-shadow-card: none;
  --lgd5-shadow-card-hover: none;
  --lgd5-shadow-elevated: none;
}

/* ──────────────────────────────────────────────────────────────
   REDUCE MOTION
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-visual="liquid-glass"] .editor-blocks .block.callout .block-row,
  html[data-visual="liquid-glass"] .tt-card,
  html[data-visual="liquid-glass"] .wb-list-root .wb-card,
  html[data-visual="liquid-glass"] .cal-event,
  html[data-visual="liquid-glass"] .gv-mode,
  html[data-visual="liquid-glass"] .page-icon-wrap .page-icon,
  html[data-visual="liquid-glass"] .modal:not(.hidden) .modal-card,
  html[data-visual="liquid-glass"] .modal:not(.hidden) .settings-card {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}