/*
 * Dayma — Shell canónico de navegación
 * DAYMA-UNIFIED-DASHBOARD-GROWTH-001
 * ─────────────────────────────────────────────────────────────
 * FUENTE ÚNICA de la barra de navegación de Dayma. Antes vivía
 * dentro de dayma.css, que sólo cargan las páginas del sistema de
 * diseño; marketing.html y business.html traían su propia barra
 * inline y por eso Marketing se sentía una aplicación aparte.
 *
 * Se extrajo aquí para que TODAS las páginas —las del diseño
 * Dayma y las que tienen estilos propios— compartan exactamente
 * la misma barra sin arrastrar el resto del sistema de diseño.
 *
 * Cada token se declara con valor de reserva: este fichero
 * funciona solo, y cuando dayma.css está presente hereda sus
 * variables sin duplicarlas.
 *
 * Dos variantes de la misma barra:
 *   .d-nav-bar                → superficie pública (dayma.com.co)
 *   .d-nav-bar.d-nav-interna  → shell operativo (requiere sesión)
 */

.d-nav-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--d-nav-bg, rgba(6,15,30,.90));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--d-borde, rgba(200,216,232,.12));
  padding: 0 32px;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}

.d-nav-brand { display: flex; flex-direction: row; align-items: center; gap: 10px; text-decoration: none; }
.d-nav-brand:hover { opacity: .88; }
.d-nav-logo {
  height: 40px; width: 40px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.d-nav-brand-text { display: flex; flex-direction: column; gap: 1px; }
.d-nav-brand-name {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  color: var(--d-blanco, #FFFFFF); white-space: nowrap;
}
.d-nav-brand-sub {
  font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--d-coral, #E8735A);
}

.d-nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.d-nav-links a {
  font-size: .8rem; color: var(--d-txt-2, #A8B8C8); padding: 6px 12px;
  border-radius: var(--d-r-sm, 6px); border: 1px solid transparent;
  text-decoration: none;
  transition: var(--d-tr, all .18s ease);
}
.d-nav-links a:hover  { color: var(--d-blanco, #FFFFFF); background: rgba(255,255,255,.06); }
.d-nav-links a.active { color: var(--d-blanco, #FFFFFF); border-color: var(--d-borde-md, rgba(200,216,232,.22)); background: rgba(46,109,164,.18); }
.d-nav-links a.d-nav-fumi {
  color: var(--d-txt-3, #6B8099); border-color: var(--d-borde, rgba(200,216,232,.12));
  font-size: .75rem;
}
.d-nav-links a.d-nav-fumi:hover { color: var(--d-txt-2, #A8B8C8); }

/* ── Separador de grupo ───────────────────────────────────────
   El shell interno agrupa operación (leads, cotizador, pricing,
   inventario, etiquetas) y analítica (marketing, business). Un
   menú plano de ocho enlaces se lee como una lista; el separador
   es lo que lo convierte en dos grupos sin exigir desplegables. */
.d-nav-sep {
  width: 1px; align-self: stretch;
  margin: 14px 8px;
  background: var(--d-borde-md, rgba(200,216,232,.22));
}

/* El módulo de analítica se distingue sin dejar de pertenecer a la
   misma barra: mismo tamaño y misma caja, distinto acento. */
.d-nav-links a.d-nav-growth.active {
  border-color: var(--d-borde-coral, rgba(232,115,90,.30));
  background: rgba(232,115,90,.14);
}

/* No pintar rutas sensibles antes de que el servidor devuelva el
   conjunto permitido para la sesión actual. */
.d-nav-interna[data-dayma-authz="pending"] [data-dayma-module],
.d-nav-interna[data-dayma-authz="unavailable"] [data-dayma-module] {
  visibility: hidden;
}

@media (max-width: 768px) {
  .d-nav-bar     { padding: 0 16px; }
  .d-nav-links a { padding: 5px 8px; font-size: .75rem; }
}

/* Por debajo de 480px la barra se desplaza en horizontal.
   Antes se ocultaba por completo (`display:none`), lo que dejaba
   el panel interno sin ninguna navegación en un teléfono: había
   que volver atrás con el navegador. Ocultar no es responsive. */
@media (max-width: 480px) {
  .d-nav-bar {
    height: auto; flex-direction: column; align-items: stretch;
    gap: 8px; padding: 10px 16px;
  }
  .d-nav-links {
    flex-wrap: nowrap; overflow-x: auto; gap: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .d-nav-links::-webkit-scrollbar { display: none; }
  .d-nav-links a { white-space: nowrap; }
  .d-nav-sep { display: none; }
}