/* ==========================================================================
   Barra superior — cristal translúcido, enlace activo y selector de tema
   ========================================================================== */

html[data-theme] .navbar {
  height: var(--nav-h) !important;
  background: var(--c-nav) !important;
  border-bottom: 1px solid var(--c-line) !important;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
html[data-theme] .navbar::before { display: none; }

html[data-theme] .navbar-brand {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--c-accent-ink) !important;
  text-shadow: none !important;
}
html[data-theme] .navbar-brand span { color: var(--c-text-2) !important; }

html[data-theme] .navbar .nav-link {
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  font-size: .92rem !important;
  color: var(--c-nav-text) !important;
  padding: 7px 12px !important;
  border-radius: var(--r-ctl) !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .25s var(--ease), color .25s var(--ease);
}
html[data-theme] .navbar .nav-link svg { opacity: .75; }
html[data-theme] .navbar .nav-link:hover { background: var(--c-accent-soft) !important; color: var(--c-text) !important; }
/* theme.js marca el enlace de la sección actual */
html[data-theme] .navbar .nav-link.is-active {
  background: var(--c-accent-soft) !important;
  color: var(--c-accent-ink) !important;
  font-weight: 600 !important;
}

html[data-theme] .nav-username { color: var(--c-text) !important; }
html[data-theme] .notif-bell-btn {
  color: var(--c-nav-text) !important;
  background: transparent !important;
  border-color: var(--c-line) !important;
  border-radius: 8px !important;
}
html[data-theme] .navbar .btn-nav.primary {
  height: auto !important;
  padding: 7px 16px !important;
  font-size: .82rem !important;
  border-radius: var(--r-ctl) !important;
}
html[data-theme] .nav-menu-toggle {
  color: var(--c-text) !important;
  background: var(--c-inset) !important;
  border-color: var(--c-line-strong) !important;
  border-radius: 10px !important;
}

/* Menú desplegable en pantallas estrechas */
@media (max-width: 900px) {
  html[data-theme] .navbar.nav-menu-open { height: auto !important; background: var(--c-glass) !important; }
  html[data-theme] .navbar.nav-menu-open > .nav-link,
  html[data-theme] .navbar.nav-menu-open .nav-right .nav-link {
    background: var(--c-inset) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: 12px !important;
  }
  html[data-theme] .navbar.nav-menu-open > .nav-right { border-top-color: var(--c-line) !important; }
}


/* --------------------------------------------------------------------------
   Menú de configuración (lo crea theme.js dentro de .nav-right):
   color del sitio (Magenta · Verde · Dorado) y efectos de fondo
   -------------------------------------------------------------------------- */
.site-settings { position: relative; }

.site-settings-toggle {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--c-accent-ink);
  background: none;
  border: 1px solid var(--c-line-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.site-settings-toggle svg { width: 17px; height: 17px; }
.site-settings-toggle:hover,
.site-settings-toggle[aria-expanded="true"] {
  border-color: var(--c-accent);
  box-shadow: 0 0 14px var(--c-accent-glow);
}

.site-settings-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1300;
  width: 280px;
  padding: 16px;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: 14px;
  box-shadow: var(--c-shadow-float);
}
.site-settings-panel[hidden] { display: none; }

.site-settings-title {
  margin: 0 0 12px;
  font: 600 .95rem var(--font-ui);
  letter-spacing: -.01em;
}
.site-settings-group { display: grid; gap: 8px; margin-bottom: 14px; }
.site-settings-label { font: 500 .8rem var(--font-ui); color: var(--c-text-2); }

.accent-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.accent-options button {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  font: 500 .76rem var(--font-ui);
  color: var(--c-text-2);
  background: var(--c-inset);
  border: 1px solid var(--c-line);
  border-radius: var(--r-ctl);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.accent-options button:hover { color: var(--c-text); border-color: var(--c-line-hover); }
.accent-options button[aria-checked="true"] {
  color: var(--c-text);
  background: var(--c-inset-2);
  border-color: var(--c-line-accent);
}
.accent-swatch {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 3px var(--c-surface), 0 0 14px var(--swatch);
}
.accent-swatch svg { width: 14px; height: 14px; color: #111; opacity: 0; transition: opacity .2s; }
.accent-options button[aria-checked="true"] .accent-swatch svg { opacity: 1; }

.site-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  cursor: pointer;
}
.site-settings-row > span:first-child { display: grid; gap: 2px; }
.site-settings-row small { font-size: .74rem; color: var(--c-text-3); }

/* Interruptor (como el de StrangerTools) */
.switch { position: relative; display: inline-block; flex: none; width: 34px; height: 20px; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch span {
  position: absolute;
  inset: 0;
  background: var(--c-line-strong);
  border-radius: 20px;
  pointer-events: none;
  transition: background .2s var(--ease);
}
.switch span::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #cfd0cc;
  border-radius: 50%;
  transition: transform .25s var(--ease), background .2s;
}
.switch input:checked + span { background: var(--c-accent); }
.switch input:checked + span::before { background: var(--c-on-accent); transform: translateX(14px); }
.switch input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* En el menú móvil el panel se abre hacia la izquierda, dentro de la pantalla */
@media (max-width: 900px) {
  .site-settings-panel { right: auto; left: 0; width: min(280px, calc(100vw - 32px)); }
}

/* Avatar de la barra: main.css le pone un degradado dorado fijo; aquí sigue al acento */
html[data-theme] .nav-avatar {
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2)) !important;
  border-color: var(--c-line-accent) !important;
  color: var(--c-on-accent) !important;
  box-shadow: 0 0 12px -3px var(--c-accent-glow) !important;
}