/* ================================================================
   liquid-glass-v4.css — V4 Crystal White (light) + Neutral Graphite (dark)
   - Cristal visible en claro: blanco luminoso con refracción.
   - Dark neutral graphite, NO azul marino.
   - Aplicación coherente: páginas, calendario, time tracker, whiteboard.
   - Emojis sin círculo pesado, lift 3D.
   - Bugfixes: contraste botones whiteboard, controles dropdown.
   ================================================================ */

/* ================================================================
   TOKENS V4
   ================================================================ */
html[data-visual="liquid-glass"] {
  /* ── Light mode: Clear White Optical Glass ── */
  --lgv4-glass-clear:    rgba(255,255,255,0.78);
  --lgv4-glass-frost:    rgba(255,255,255,0.62);
  --lgv4-glass-depth:    rgba(255,255,255,0.46);
  --lgv4-edge-light:     rgba(255,255,255,0.95);
  --lgv4-edge-shadow:    rgba(20,20,30,0.10);
  --lgv4-caustic:        rgba(255,255,255,0.45);
  --lgv4-refraction:     rgba(255,255,255,0.35);
  --lgv4-neutral-shadow: 0 1px 2px rgba(20,20,25,0.06),
                         0 8px 24px rgba(20,20,25,0.08),
                         0 24px 64px rgba(20,20,25,0.04);
  --lgv4-icon-lift:      drop-shadow(0 1px 0 rgba(255,255,255,0.6))
                         drop-shadow(0 2px 4px rgba(0,0,0,0.10))
                         drop-shadow(0 6px 14px rgba(0,0,0,0.08));
  --lgv4-text-contrast:  var(--text);
  --lgv4-radius-panel:   18px;
  --lgv4-radius-pill:    999px;
  --lgv4-motion-spring:  cubic-bezier(.34,1.56,.64,1);
  --lgv4-motion-smooth:  cubic-bezier(.16,1,.3,1);

  /* Ambiente luminoso bajo las superficies para que la refracción tenga algo que mostrar */
  --lgv4-ambient-bg:
    radial-gradient(ellipse 1100px 600px at 25% -5%,
      rgba(0, 100, 200, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 900px 500px at 90% 10%,
      rgba(255, 180, 130, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 800px 500px at 50% 100%,
      rgba(180, 80, 220, 0.04) 0%, transparent 55%);
}

/* ── Dark: Neutral Graphite, no azul marino ── */
html[data-visual="liquid-glass"][data-theme="dark"] {
  --lgv4-glass-clear:    rgba(255,255,255,0.085);
  --lgv4-glass-frost:    rgba(255,255,255,0.060);
  --lgv4-glass-depth:    rgba(255,255,255,0.035);
  --lgv4-edge-light:     rgba(255,255,255,0.18);
  --lgv4-edge-shadow:    rgba(0,0,0,0.55);
  --lgv4-caustic:        rgba(255,255,255,0.10);
  --lgv4-refraction:     rgba(255,255,255,0.06);
  --lgv4-neutral-shadow: 0 1px 2px rgba(0,0,0,0.40),
                         0 8px 28px rgba(0,0,0,0.50),
                         0 24px 60px rgba(0,0,0,0.40);
  --lgv4-icon-lift:      drop-shadow(0 1px 0 rgba(255,255,255,0.10))
                         drop-shadow(0 2px 4px rgba(0,0,0,0.55))
                         drop-shadow(0 6px 14px rgba(0,0,0,0.40));

  /* Ambient: blanco/cálido sutil sobre graphite NEUTRAL, no azul */
  --lgv4-ambient-bg:
    radial-gradient(ellipse 1100px 600px at 50% -10%,
      rgba(255,255,255,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 900px 500px at 90% 10%,
      rgba(255, 200, 180, 0.025) 0%, transparent 55%);
}

/* ── BASE BACKGROUND: graphite NEUTRO en dark, no azul ── */
html[data-visual="liquid-glass"][data-theme="dark"] body {
  background: #0c0c0e !important;
}
html[data-visual="liquid-glass"][data-theme="dark"] .app-shell,
html[data-visual="liquid-glass"][data-theme="dark"] .main {
  background: #0c0c0e !important;
}
/* En light: blanco con muy ligera profundidad */
html[data-visual="liquid-glass"][data-theme="light"] body {
  background: #f6f7f9 !important;
}

/* Ambient layers (darán contenido que refractar) */
html[data-visual="liquid-glass"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--lgv4-ambient-bg) !important;
  opacity: 1 !important;
}

/* ================================================================
   SUPERFICIES V4 — clear white óptico vs graphite neutral
   ================================================================ */
html[data-visual="liquid-glass"] .sidebar,
html[data-visual="liquid-glass"] .topbar,
html[data-visual="liquid-glass"] .settings-card,
html[data-visual="liquid-glass"] #slash-menu,
html[data-visual="liquid-glass"] #context-menu,
html[data-visual="liquid-glass"] #workspace-menu,
html[data-visual="liquid-glass"] .modal-card,
html[data-visual="liquid-glass"] .gv-panel,
html[data-visual="liquid-glass"] .gv-topbar,
html[data-visual="liquid-glass"] .toast,
html[data-visual="liquid-glass"] .lg-glass {
  background: var(--lgv4-glass-frost) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  box-shadow:
    inset 0 1.5px 0 var(--lgv4-edge-light),
    inset 0 -1px 0 var(--lgv4-edge-shadow),
    var(--lgv4-neutral-shadow) !important;
}

/* Caustic interior (reflejo de luz) */
html[data-visual="liquid-glass"] .sidebar::before,
html[data-visual="liquid-glass"] .settings-card::before,
html[data-visual="liquid-glass"] #slash-menu::before,
html[data-visual="liquid-glass"] .modal-card::before {
  background:
    radial-gradient(ellipse 60% 35% at 18% 0%,
      var(--lgv4-caustic) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--lgv4-caustic) 0%, transparent 22%) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* ================================================================
   EMOJIS: SIN círculo pesado, lift 3D
   Por defecto los emojis quedan "sueltos" con drop-shadow.
   El círculo solo aparece en hover/selected.
   ================================================================ */
html[data-visual="liquid-glass"] .tr-icon,
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 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: var(--lgv4-icon-lift);
  transition: filter 200ms var(--lgv4-motion-smooth),
              transform 200ms var(--lgv4-motion-smooth);
}

/* Hover: aparece backing sutil */
html[data-visual="liquid-glass"] .tree-row:hover .tr-icon,
html[data-visual="liquid-glass"] .emoji-orb:hover,
html[data-visual="liquid-glass"] .nav-icon-orb:hover {
  background: var(--lgv4-glass-clear) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  box-shadow:
    inset 0 1px 0 var(--lgv4-edge-light),
    0 4px 10px rgba(0,0,0,0.06) !important;
}

/* Page emoji premium (grande, sin círculo) */
html[data-visual="liquid-glass"] .page-icon,
html[data-visual="liquid-glass"] #page-icon {
  background: transparent !important;
  border: none !important;
  filter: var(--lgv4-icon-lift);
}

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

/* ================================================================
   ACTIVE PILL iOS — slide elegant
   ================================================================ */
html[data-visual="liquid-glass"] .sb-nav-item.active,
html[data-visual="liquid-glass"] .tree-row.active,
html[data-visual="liquid-glass"] .settings-nav button.active,
html[data-visual="liquid-glass"] .gv-mode.active,
html[data-visual="liquid-glass"] .gv-seg-btn.active,
html[data-visual="liquid-glass"] .lg-segment.active {
  background: var(--lgv4-glass-clear) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  border-radius: 11px !important;
  box-shadow:
    inset 0 1.5px 0 var(--lgv4-edge-light),
    inset 0 -1px 0 var(--lgv4-edge-shadow),
    0 1px 2px rgba(0,0,0,0.05),
    0 6px 14px rgba(0,0,0,0.06) !important;
  color: var(--text) !important;
}

/* ================================================================
   BOTONES V4 — fix contraste universal
   ================================================================ */
html[data-visual="liquid-glass"] .btn,
html[data-visual="liquid-glass"] button.icon-btn,
html[data-visual="liquid-glass"] .lg-button,
html[data-visual="liquid-glass"] .wb-btn,
html[data-visual="liquid-glass"] .tt-btn,
html[data-visual="liquid-glass"] .gv-mode {
  background: var(--lgv4-glass-clear) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  color: var(--text) !important;
  box-shadow:
    inset 0 1.5px 0 var(--lgv4-edge-light),
    inset 0 -1px 0 var(--lgv4-edge-shadow),
    0 1px 2px rgba(0,0,0,0.05),
    0 4px 12px rgba(0,0,0,0.06) !important;
}

/* CRITICAL FIX: botón primary debe tener texto contrastado */
html[data-visual="liquid-glass"] .btn-primary,
html[data-visual="liquid-glass"] .wb-btn-primary,
html[data-visual="liquid-glass"] .tt-start-btn {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 1px solid var(--text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 2px rgba(0,0,0,0.10),
    0 6px 16px rgba(0,0,0,0.12) !important;
}
html[data-visual="liquid-glass"] .btn-primary:hover,
html[data-visual="liquid-glass"] .wb-btn-primary:hover,
html[data-visual="liquid-glass"] .tt-start-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 2px 4px rgba(0,0,0,0.12),
    0 12px 24px rgba(0,0,0,0.18) !important;
}

/* ================================================================
   FIX: Whiteboard "+ Nueva pizarra" texto invisible
   ================================================================ */
html[data-visual="liquid-glass"] .wb-list-root .wb-btn-primary {
  background: var(--text) !important;
  color: var(--bg) !important;
}

/* ================================================================
   DROPDOWNS / SELECTS V4 — contraste correcto
   ================================================================ */
html[data-visual="liquid-glass"] select {
  background: var(--lgv4-glass-clear) !important;
  color: var(--text) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}
/* Native dropdown options no son estilizables; respetamos el SO pero forzamos
   que el select cerrado tenga buen contraste */
html[data-visual="liquid-glass"] select option {
  background: var(--bg);
  color: var(--text);
}

/* ================================================================
   CALENDAR V4
   ================================================================ */
html[data-visual="liquid-glass"] .view-calendar,
html[data-visual="liquid-glass"] .cal-root,
html[data-visual="liquid-glass"] .calendar-view {
  padding: 24px !important;
}
html[data-visual="liquid-glass"] .cal-card,
html[data-visual="liquid-glass"] .cal-day,
html[data-visual="liquid-glass"] .calendar-cell,
html[data-visual="liquid-glass"] .cal-month-grid {
  background: var(--lgv4-glass-frost) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  border-radius: var(--lgv4-radius-panel) !important;
  box-shadow:
    inset 0 1px 0 var(--lgv4-edge-light),
    var(--lgv4-neutral-shadow) !important;
}
html[data-visual="liquid-glass"] .cal-day.today,
html[data-visual="liquid-glass"] .calendar-cell.today {
  background: var(--lgv4-glass-clear) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  box-shadow:
    inset 0 1.5px 0 var(--lgv4-edge-light),
    0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ================================================================
   TIME TRACKER V4
   ================================================================ */
html[data-visual="liquid-glass"] .tt-root {
  padding: 20px 24px !important;
}
html[data-visual="liquid-glass"] .tt-quick,
html[data-visual="liquid-glass"] .tt-summary-card,
html[data-visual="liquid-glass"] .tt-card,
html[data-visual="liquid-glass"] .tt-kpi {
  background: var(--lgv4-glass-frost) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 var(--lgv4-edge-light),
    var(--lgv4-neutral-shadow) !important;
}
html[data-visual="liquid-glass"] .tt-empty {
  background: var(--lgv4-glass-frost) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  border-radius: var(--lgv4-radius-panel) !important;
  box-shadow:
    inset 0 1px 0 var(--lgv4-edge-light),
    var(--lgv4-neutral-shadow) !important;
  padding: 48px 28px !important;
  text-align: center !important;
}
html[data-visual="liquid-glass"] .tt-tab {
  border-radius: var(--lgv4-radius-pill) !important;
  background: transparent !important;
  border: none !important;
  padding: 6px 14px !important;
}
html[data-visual="liquid-glass"] .tt-tab.active {
  background: var(--lgv4-glass-clear) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  box-shadow:
    inset 0 1.5px 0 var(--lgv4-edge-light),
    0 1px 2px rgba(0,0,0,0.05),
    0 4px 10px rgba(0,0,0,0.06) !important;
}

/* ================================================================
   WHITEBOARD V4
   ================================================================ */
html[data-visual="liquid-glass"] .wb-toolbar {
  background: var(--lgv4-glass-frost) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  border-radius: var(--lgv4-radius-panel) !important;
  box-shadow:
    inset 0 1px 0 var(--lgv4-edge-light),
    var(--lgv4-neutral-shadow) !important;
}
html[data-visual="liquid-glass"] .wb-card {
  background: var(--lgv4-glass-frost) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 var(--lgv4-edge-light),
    var(--lgv4-neutral-shadow) !important;
}

/* ================================================================
   SLASH MENU V4 — premium con z-index alto
   ================================================================ */
html[data-visual="liquid-glass"] #slash-menu {
  z-index: 10000 !important;
  border-radius: 16px !important;
  padding: 6px !important;
  min-width: 320px;
  background: var(--lgv4-glass-clear) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
}
html[data-visual="liquid-glass"] .sm-item {
  padding: 9px 10px !important;
  border-radius: 10px !important;
  gap: 12px !important;
  color: var(--text) !important;
}
html[data-visual="liquid-glass"] .sm-item:hover,
html[data-visual="liquid-glass"] .sm-item.selected {
  background: var(--lgv4-glass-frost) !important;
}
html[data-visual="liquid-glass"] .sm-icon {
  width: 32px !important;
  height: 32px !important;
  font-size: 16px !important;
  border-radius: 9px !important;
  background: var(--lgv4-glass-clear) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  box-shadow: inset 0 1px 0 var(--lgv4-edge-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-visual="liquid-glass"] .sm-cat {
  text-transform: uppercase !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  letter-spacing: 0.06em !important;
  padding: 8px 10px 4px !important;
}
html[data-visual="liquid-glass"] .sm-shortcut {
  background: var(--lgv4-glass-frost) !important;
  border: 1px solid var(--lgv4-edge-light) !important;
  color: var(--text-2) !important;
}

/* ================================================================
   PERFORMANCE GUARDS
   ================================================================ */
html[data-visual="liquid-glass"] .gv-stage canvas,
html[data-visual="liquid-glass"] .wb-svg,
html[data-visual="liquid-glass"] .aig-canvas {
  background: transparent !important;
}

/* ================================================================
   REDUCED MOTION / CONTRAST
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html[data-visual="liquid-glass"] * {
    transition-duration: 1ms !important;
  }
}
@media (prefers-contrast: more) {
  html[data-visual="liquid-glass"] {
    --lgv4-glass-clear:    var(--bg);
    --lgv4-glass-frost:    var(--bg-2);
    --lgv4-edge-light:     var(--border, rgba(0,0,0,0.2));
  }
}