/* ═══════════════════════════════════════════════════════════
   nav-shell.css — Layout compartido de sidebar/drawer/header
   Se carga en todas las páginas que usan nav-shell.js.
   Duplica estilos mínimos ya presentes en dashboard.html para
   que las páginas hermanas (calidad, roadmap, medición) tengan
   la misma chrome sin depender del HTML inline del dashboard.
   ═══════════════════════════════════════════════════════════ */

.ns-desktop-sidebar {
  display: none;
  position: fixed;
  left: 0; top: 0;
  width: 256px; height: 100%;
  background: var(--surface, #0f0f12);
  z-index: 40;
  flex-direction: column;
  padding: 2rem 0;
  gap: 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.ns-desktop-header {
  display: none;
  position: fixed;
  top: 0; right: 0;
  height: 64px;
  background: var(--glass-bg, rgba(15,15,18,0.7));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 30;
  align-items: center;
  justify-content: flex-end;
  padding: 0 3rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.ns-mobile-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--glass-bg, rgba(15,15,18,0.7));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding-top: env(safe-area-inset-top, 0px);
  font-family: 'Inter', system-ui, sans-serif;
}
.ns-mobile-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
}

.ns-sidebar-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  color: #737373;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}
.ns-sidebar-item:hover { background: rgba(115,115,115,0.1); color: var(--primary, #a78bfa); }
.ns-sidebar-item.active {
  color: var(--primary-container, #a78bfa);
  border-right: 2px solid var(--primary-container, #a78bfa);
  background: rgba(167,139,250,0.05);
}
.ns-sidebar-item .material-symbols-outlined { margin-right: 1rem; }

.ns-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 99;
}
.ns-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.ns-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 300px;
  max-width: 82vw;
  height: 100%;
  background: var(--surface, #0f0f12);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 2rem 0 1rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.ns-drawer.open { transform: translateX(0); }

.ns-drawer-brand { padding: 0 1.5rem 1rem; }
.ns-drawer-item {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.5rem;
  color: var(--on-surface, #e8e8e9);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  gap: 0.875rem;
}
.ns-drawer-item:active { background: rgba(255,255,255,0.05); }
.ns-drawer-item .material-symbols-outlined { color: var(--outline, #737373); }
.ns-drawer-divider {
  height: 1px;
  background: rgba(73,69,82,0.15);
  margin: 0.5rem 1.5rem;
}

/* ── Layout: cuando la página usa nav-shell, el contenido se desplaza ── */
body.ns-shelled {
  margin: 0;
}

@media (min-width: 1024px) {
  .ns-desktop-sidebar { display: flex; }
  .ns-desktop-header  { display: flex; left: 256px; }
  .ns-mobile-header   { display: none !important; }
  .ns-drawer-overlay, .ns-drawer { display: none !important; }

  body.ns-shelled > .ns-main,
  body.ns-shelled .ns-main {
    margin-left: 256px;
    padding-top: 4rem;  /* header height */
    min-height: 100vh;
    box-sizing: border-box;
  }
}

@media (max-width: 1023px) {
  .ns-desktop-sidebar, .ns-desktop-header { display: none !important; }
  body.ns-shelled > .ns-main,
  body.ns-shelled .ns-main {
    padding-top: 60px;  /* mobile header height */
  }
}