:root{
  /* Colors and tokens - tweak to taste */
  --nav-bg: rgba(255,255,255,0.98);
  --nav-border: rgba(16,24,40,0.06);
  --nav-shadow: 0 8px 28px rgba(8,18,34,0.08);
  --nav-accent: #4F8FEA;
  --nav-text: #0b1320;
  --nav-muted: #6b7280;
  --nav-radius: 999px;
  --nav-gap: 10px;
  --nav-padding-vertical: 6px;
  --nav-padding-horizontal: 12px;
  --nav-transition: 180ms cubic-bezier(.2,.9,.3,1);
}

/* Centered white modern navigation */
#centerNav {
  position: fixed; /* kept from inline, reiterate here for clarity */
  left: 50%;
  transform: translateX(-50%);
  top: 24px;
  z-index: 10002;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#centerNav .center-bar {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: var(--nav-padding-vertical) var(--nav-padding-horizontal);
  border-radius: var(--nav-radius);
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  transition: box-shadow var(--nav-transition), transform var(--nav-transition), background var(--nav-transition);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  will-change: transform;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 0.95rem;
}

/* Slight lift on pointer hover for desktop */
@media (hover: hover) {
  #centerNav .center-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 42px rgba(8,18,34,0.10);
  }
}

/* Individual nav items */
#centerNav .nav-item {
  color: var(--nav-text);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--nav-transition), color var(--nav-transition), transform var(--nav-transition);
  font-weight: 600;
  white-space: nowrap;
}

/* Button-like appearance for toggle elements */
#centerNav .nav-toggle {
  outline: none;
}

/* hover/active/focus */
#centerNav .nav-item:hover,
#centerNav .nav-item:focus,
#centerNav .nav-item:active {
  background: rgba(79,143,234,0.06);
  color: var(--nav-accent);
  transform: translateY(-1px);
}

/* Focus-visible for keyboard users */
#centerNav .nav-item:focus-visible {
  box-shadow: 0 0 0 4px rgba(79,143,234,0.12);
  border-radius: 8px;
}

/* Dropdown visual tuning */
#centerNav .dropdown {
  position: relative;
}

/* Ensure dropdown menu looks consistent with nav */
#centerNav .dropdown .dropdown-menu {
  border-radius: 10px;
  border: 1px solid rgba(16,24,40,0.06);
  box-shadow: 0 10px 30px rgba(8,18,34,0.12);
  background: #fff;
  padding: 6px 0;
  min-width: 260px;
}

/* When dropdown is displayed inside the mobile panel we set it to static mode
   (Bootstrap's data-bs-display="static" will avoid Popper repositioning). */
#centerNav [data-bs-display="static"] + .dropdown-menu,
#centerNav .dropdown-menu[data-popper-placement] {
  /* keep the menu styled nicely regardless of popper placement */
  transform-origin: top center;
}

/* Dropdown items */
#centerNav .dropdown-item,
#centerNav .dropdown-item-text,
#centerNav .create-new-btn {
  padding: 8px 12px;
  font-weight: 500;
  color: var(--nav-text);
}

#centerNav .dropdown-item:hover,
#centerNav .dropdown-item:focus {
  background: rgba(79,143,234,0.04);
  color: var(--nav-accent);
}

/* Small create button styling */
#centerNav .create-new-btn {
  display: inline-block;
  margin: 8px;
  border-radius: 8px;
  border: 1px solid rgba(16,24,40,0.06);
  background: #fff;
}

/* Delete button inside menu: subtle compact styling */
#centerNav .btn-eliminar {
  font-size: 0.78rem;
  padding: 4px 8px;
  line-height: 1;
}

/* Responsive: when moved to mobile (JS adds .moved-to-mobile on centerNav) */
#centerNav.moved-to-mobile {
  left: 0;
  transform: none;
  top: 0;
  width: 100%;
  padding: 12px;
  display: block;
  box-sizing: border-box;
}

/* Stack the center-bar vertically on mobile panel */
#centerNav.moved-to-mobile .center-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  background: transparent; /* panel already has background */
  box-shadow: none;
  border: none;
}

/* Full-width items inside mobile panel */
#centerNav.moved-to-mobile .nav-item {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  justify-content: flex-start;
}

/* Improve contrast on small screens */
@media (max-width: 768px) {
  #centerNav .center-bar {
    box-shadow: none;
    background: transparent;
  }
  /* Hide desktop nav while JS moves it. Keep fallback so it doesn't show twice. */
  #centerNav:not(.moved-to-mobile) {
    display: none;
  }
}

/* Accessibility: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  #centerNav .center-bar,
  #centerNav .nav-item {
    transition: none;
  }
}

/* Subtle caret indicator for toggles */
#centerNav .nav-toggle::after {
  content: "▾";
  margin-left: 8px;
  font-size: 0.8em;
  color: var(--nav-muted);
}

/* Ensure dropdowns don't overflow the viewport on small devices */
@media (max-width: 420px) {
  #centerNav .dropdown .dropdown-menu {
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    margin-left: 10px;
    margin-right: 10px;
  }
}