/* Liquid Glass en los controles que se seleccionan: barra superior, modos del Cuaderno y pestañas del Árbol.
   Solo estos selectores. Texto de lectura, cards, simuladores, el PDF, la pizarra y el tablero quedan igual. */
:root {
  --lg-cristal: rgba(255, 255, 255, 0.46);
  --lg-cristal-activo: rgba(255, 255, 255, 0.82);
  --lg-borde: rgba(255, 255, 255, 0.62);
  --lg-sombra: 0 6px 18px rgba(31, 58, 44, 0.12);
  --lg-acento: #1F3A2C;
}

@media (min-width: 860px) {
  .desktop-nav { gap: 8px; }
  .desktop-nav-item {
    position: relative;
    background: var(--lg-cristal);
    border: 1px solid var(--lg-borde);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--lg-sombra), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    overflow: hidden;
  }
  .desktop-nav-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
  }
  .desktop-nav-item.active {
    background: var(--lg-cristal-activo);
    color: var(--lg-acento);
    opacity: 1;
    font-weight: 600;
  }
  .desktop-nav-item:focus-visible { outline: 2px solid var(--lg-acento); outline-offset: 2px; }
}

.liquid-mode-tabs {
  background: transparent !important;
  padding: 0 !important;
  gap: 8px !important;
}
.liquid-pill-btn {
  position: relative;
  background: var(--lg-cristal) !important;
  border: 1px solid var(--lg-borde) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border-radius: 999px !important;
  box-shadow: var(--lg-sombra), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
.liquid-pill-btn.active {
  background: var(--lg-cristal-activo) !important;
  box-shadow: 0 8px 22px rgba(31, 58, 44, 0.18), inset 0 1px 0 #fff;
}
.sinai-chip-btn { background: var(--lg-cristal); border: 1px solid var(--lg-borde); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); box-shadow: var(--lg-sombra); }
.liquid-pill-btn:focus-visible { outline: 2px solid var(--lg-acento); outline-offset: 2px; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .desktop-nav-item, .liquid-pill-btn { background: #F4F1E8 !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .desktop-nav-item, .liquid-pill-btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #F4F1E8 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-nav-item, .liquid-pill-btn { transition: none !important; }
}