/* ============================================
   App sub-navigation (second bar under the company nav)
   Shared by the MiraPlan and HolaList page sets.
   ============================================ */
.mp-subnav {
  --sub-accent: #3d96d0;
  --sub-soft: #e8f4fc;
}
.mp-subnav.hl-theme {
  --sub-accent: #0071e3;
  --sub-soft: #eaf3fd;
}

/* ── App sub-navigation ── */
.mp-subnav {
  position: sticky;
  top: 52px;
  z-index: 90;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
}

.mp-subnav-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 2rem;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mp-subnav-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.mp-subnav-brand:hover { color: var(--color-text); }
.mp-subnav-brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: block;
}

.mp-subnav-links {
  display: flex;
  gap: 0.2rem;
  list-style: none;
}

.mp-subnav-links a {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
}
.mp-subnav-links a:hover {
  background: var(--sub-soft);
  color: var(--sub-accent);
}
.mp-subnav-links a.active {
  background: var(--sub-soft);
  color: var(--sub-accent);
  font-weight: 600;
}


@media (max-width: 640px) {
  .mp-subnav { position: static; }
  .mp-subnav-inner { padding: 0.4rem 1.25rem; flex-wrap: wrap; }
  .mp-subnav-links { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mp-subnav-links::-webkit-scrollbar { display: none; }
  .mp-subnav-links a { white-space: nowrap; }
}