:root {
  --calorieai-nav-art: url("nav-aqua-garden.png");
  --calorieai-nav-tint: rgba(245, 255, 252, .52);
  --calorieai-nav-border: rgba(105, 184, 169, .24);
  --calorieai-nav-accent: #169b91;
}

html[data-nav-theme="grapefruit"] {
  --calorieai-nav-art: url("nav-grapefruit-glass.png");
  --calorieai-nav-tint: rgba(255, 251, 246, .48);
  --calorieai-nav-border: rgba(232, 158, 118, .26);
  --calorieai-nav-accent: #e97539;
}

body > :is(.site-nav, .nav, .navwrap.nav) {
  isolation: isolate;
  z-index: 80;
  border-bottom: 1px solid var(--calorieai-nav-border);
  background-color: #f6fcfa;
  background-image: linear-gradient(var(--calorieai-nav-tint), var(--calorieai-nav-tint)), var(--calorieai-nav-art);
  background-position: center;
  background-size: cover;
  box-shadow: 0 12px 36px rgba(16, 34, 48, .09);
  backdrop-filter: saturate(118%) blur(12px);
  -webkit-backdrop-filter: saturate(118%) blur(12px);
  transition: background-image .32s ease, border-color .32s ease, box-shadow .32s ease;
}

body > :is(.site-nav, .nav, .navwrap.nav)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.30), rgba(255,255,255,.08) 50%, rgba(255,255,255,.30));
  pointer-events: none;
}

body > :is(.site-nav, .nav, .navwrap.nav) > :is(.wrap, .nav-inner),
body > :is(.nav, .navwrap.nav) {
  min-height: 88px;
}

body > :is(.site-nav, .nav, .navwrap.nav) .brand {
  color: #0d1628;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

/* La marca debe conservar presencia incluso cuando la navegación usa botones anchos. */
body > :is(.site-nav, .nav, .navwrap.nav) .brand > img {
  width: 63px !important;
  height: 63px !important;
  flex: 0 0 63px;
  object-fit: contain;
}

body > :is(.site-nav, .nav, .navwrap.nav) .brand .brand-mark {
  width: 78px !important;
  height: 78px !important;
  flex: 0 0 78px;
}

body > :is(.site-nav, .nav, .navwrap.nav) :is(.main-links, .nav-links) > a,
body > :is(.site-nav, .nav, .navwrap.nav) .nav-trigger,
body > :is(.site-nav, .nav, .navwrap.nav) .nav-login,
body > :is(.site-nav, .nav, .navwrap.nav) .nav-actions > .button:not(.primary) {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: #293446;
  box-shadow: 0 8px 24px rgba(26,48,63,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body > :is(.site-nav, .nav, .navwrap.nav) :is(.main-links, .nav-links) > a {
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid rgba(255,255,255,.78);
}

body > :is(.site-nav, .nav, .navwrap.nav) :is(.main-links, .nav-links) > a:is(:hover, .active),
body > :is(.site-nav, .nav, .navwrap.nav) .nav-trigger:hover {
  color: var(--calorieai-nav-accent);
  background: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.95);
}

.nav-theme-primary-group,
.nav-theme-resource-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-theme-primary-group > .nav-trigger,
.nav-theme-resource-group > .nav-trigger {
  appearance: none;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: #293446;
  font: inherit;
  font-size: .9rem;
  font-weight: 780;
  cursor: pointer;
}

.nav-theme-primary-group.is-active > .nav-trigger,
.nav-theme-resource-group.is-active > .nav-trigger { color: var(--calorieai-nav-accent); }
.nav-theme-primary-group > .nav-trigger span,
.nav-theme-resource-group > .nav-trigger span { margin-left:5px; font-size:.72em; }

.nav-theme-primary-menu,
.nav-theme-resource-menu {
  position: absolute;
  z-index: 115;
  top: calc(100% + 10px);
  left: 50%;
  width: 260px;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(215,225,233,.95);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 52px rgba(12,28,44,.17);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-theme-primary-group:is(:hover, :focus-within, .is-open) .nav-theme-primary-menu,
.nav-theme-resource-group:is(:hover, :focus-within, .is-open) .nav-theme-resource-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-theme-primary-menu a,
.nav-theme-resource-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  color: #263246;
  font-size: .82rem;
  font-weight: 760;
}

.nav-theme-primary-menu a::after,
.nav-theme-resource-menu a::after { content:"→"; color:#9aa6b5; }
.nav-theme-primary-menu a:hover,
.nav-theme-resource-menu a:hover { color:var(--calorieai-nav-accent); background:#f3f7fa; }

.nav-theme-switcher {
  position: relative;
  flex: 0 0 auto;
}

.nav-theme-toggle {
  appearance: none;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #1b2738;
  box-shadow: 0 8px 24px rgba(26,48,63,.08);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-theme-toggle:hover,
.nav-theme-toggle[aria-expanded="true"] {
  transform: translateY(-1px);
  background: rgba(255,255,255,.94);
}

.nav-theme-toggle__swatches {
  display: inline-flex;
  align-items: center;
}

.nav-theme-toggle__swatches i {
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(26,48,63,.18);
}

.nav-theme-toggle__swatches i:first-child { background: #95d8c8; }
.nav-theme-toggle__swatches i:last-child { margin-left: -4px; background: #f3a080; }

.nav-theme-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 12px);
  right: 0;
  width: min(286px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid rgba(215,225,233,.95);
  border-radius: 20px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 54px rgba(12,28,44,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-theme-switcher.is-open .nav-theme-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-theme-option {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 46px 1fr 20px;
  gap: 11px;
  align-items: center;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #172235;
  text-align: left;
  cursor: pointer;
}

.nav-theme-option:hover,
.nav-theme-option[aria-checked="true"] { background: #f3f7fa; }

.nav-theme-option__preview {
  width: 46px;
  height: 38px;
  border: 1px solid rgba(205,217,226,.8);
  border-radius: 11px;
  background-position: center;
  background-size: cover;
}

.nav-theme-option[data-nav-theme-option="aqua"] .nav-theme-option__preview { background-image: url("nav-aqua-garden.png"); }
.nav-theme-option[data-nav-theme-option="grapefruit"] .nav-theme-option__preview { background-image: url("nav-grapefruit-glass.png"); }
.nav-theme-option strong { display:block; font-size:.86rem; }
.nav-theme-option small { display:block; margin-top:2px; color:#7a8798; font-size:.72rem; font-weight:650; }
.nav-theme-option__check { color:var(--calorieai-nav-accent); font-size:1rem; opacity:0; }
.nav-theme-option[aria-checked="true"] .nav-theme-option__check { opacity:1; }

@media (max-width: 980px) {
  .nav-theme-toggle { width:42px; justify-content:center; padding:0; }
  .nav-theme-toggle__label { display:none; }
  body > :is(.site-nav, .nav, .navwrap.nav) > :is(.wrap, .nav-inner),
  body > :is(.nav, .navwrap.nav) { min-height:74px; }
  body > :is(.site-nav, .nav, .navwrap.nav) .brand > img {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px;
  }
  body > :is(.site-nav, .nav, .navwrap.nav) .brand .brand-mark {
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px;
  }
}

@media (max-width: 640px) {
  .nav-theme-switcher { order:-1; }
  .nav-theme-menu { position:fixed; top:76px; right:14px; }
  body > :is(.site-nav, .nav, .navwrap.nav) .nav-actions { gap:7px; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
  body > :is(.site-nav, .nav, .navwrap.nav),
  .nav-theme-menu { transition:none; }
}

/* Current app identity, shared by the public website. */
img[src$="logo-nextgood-app-v1.png"] { border-radius:22%; }