/* ─── Portfolio back-nav injected into all project doc pages ──── */
:root {
  --bg:         #0a0c0e !important;
  --bg-alt:     #0f1214 !important;
  --surface:    #141820 !important;
  --surface-2:  #1a2030 !important;
  --border:     #1e2530 !important;
  --text:       #e2e8f0 !important;
  --muted:      #7a8fa6 !important;
  --faint:      #3d4f63 !important;
  --accent:     #4ade80 !important;
  --accent-dim: #166534 !important;

  /* aliases used by free-code docs */
  --c-bg:       #0a0c0e !important;
  --c-surface:  #141820 !important;
  --c-border:   #1e2530 !important;
  --c-text:     #e2e8f0 !important;
  --c-muted:    #7a8fa6 !important;
  --c-accent:   #4ade80 !important;
}

/* Back nav bar */
#portfolio-back-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10, 12, 14, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #1e2530;
  padding: 0 1.5rem;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
}

#portfolio-back-nav a.back-link {
  color: #7a8fa6;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s;
}

#portfolio-back-nav a.back-link:hover {
  color: #4ade80;
  text-decoration: none;
}

#portfolio-back-nav .back-sep {
  color: #3d4f63;
}

#portfolio-back-nav .back-project {
  color: #e2e8f0;
  font-weight: 500;
}

#portfolio-back-nav .back-logo {
  margin-left: auto;
  color: #3d4f63;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Language toggle inside the back-nav bar (segmented EN | ES) */
#portfolio-back-nav .lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #141820;
  border: 1px solid #252e3d;
  border-radius: 999px;
  padding: 2px;
  margin-left: 1rem;
}

#portfolio-back-nav .lang-toggle-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: #7a8fa6;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

#portfolio-back-nav .lang-toggle-btn:hover {
  color: #e2e8f0;
}

#portfolio-back-nav .lang-toggle-btn.active {
  background: #4ade80;
  color: #0a0c0e;
  font-weight: 600;
}

/* Also support a standalone lang-toggle outside the back-nav */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #141820;
  border: 1px solid #252e3d;
  border-radius: 999px;
  padding: 2px;
}

.lang-toggle-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: #7a8fa6;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

.lang-toggle-btn:hover {
  color: #e2e8f0;
}

.lang-toggle-btn.active {
  background: #4ade80;
  color: #0a0c0e;
  font-weight: 600;
}