/* ── BITÁCORA ──
   [v2026.11.03-1] hv-nav.css
   2026-11-03 | LA BARRA UNIFICADA (preview aprobado por Alberto el 03-11). Este archivo pasa a ser el ÚNICO estilo de la
     barra de las páginas públicas: portada, planes, buscador, detalle de programa, crear cuenta y opinar dejan sus
     copias (cada una divergía) y la barra la dibuja hv-nav.js. El portal del cliente ya lo usaba y toma el mismo look.
     · El menú del usuario pasa a blanco con letras oscuras (era azul oscuro translúcido), como en el preview.
     · + .hv-nav-link.on: la opción de la página donde estás; + el ícono de «Buscar servicios» (.hv-nav-link-buscar).
     · + .hv-nav-btn (Iniciar sesión, Volver al panel) y + .hv-nav-cta («Crear cuenta», con el degradado de las
       tarjetas de planes, pc-tarjeta.css).
     · El celular, de la portada (15-10): la barra nunca es más ancha que la pantalla. Hasta 760 px sin el nombre
       «Heavensy» ni el del usuario; hasta 600 px «Buscar servicios» queda como lupa, sin separadores y todo más
       compacto; si aun así no caben, los enlaces se deslizan de lado dentro de la barra.
     − .hv-nav-bell, .hv-nav-bell-dot y .hv-nav-status: eran el «IA ✓» y la campana con un «3» fijo de la portada,
       adornos de maqueta. La barra del panel es otra (layout/navbar.html con navbar.css) y no usa este archivo.
   [v2026.09.08-1] hv-nav.css
   2026-09-08 | Nace con el bloque <style> de la barra de navegación que estaba
     embebido en planes_heavensy_v6.html. Las mismas clases (.hv-nav*) están repetidas
     en portada, búsqueda, agendar_integracion, programa_detalle, demo y pagar: cada
     página lleva su copia y ya divergen entre sí. Este archivo es el lugar único al
     que migrarlas cuando se toque cada una; hoy solo lo enlaza planes.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── HEAVENSY NAV ── */
.hv-nav { position: sticky; top: 0; z-index: 9999; height: 54px; background: rgba(70,90,180,0.96); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(150,175,255,0.16); display: flex; align-items: center; padding: 0 24px; gap: 16px; box-shadow: 0 2px 20px rgba(10,20,70,0.4); box-sizing: border-box; }
.hv-nav *, .hv-nav *::before, .hv-nav *::after { box-sizing: border-box; }
.hv-nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.hv-nav-logo { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#9961FF,#5b8dee); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.hv-nav-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.hv-nav-name { font-size: 16px; font-weight: 400; color: #fff; font-family: 'Poppins',sans-serif; letter-spacing: .2px; }
.hv-nav-links { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hv-nav-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.78); text-decoration: none; padding: 5px 12px; border-radius: 8px; transition: background .2s,color .2s; white-space: nowrap; font-family: 'Poppins', sans-serif; }
.hv-nav-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.hv-nav-link:hover { background: rgba(255,255,255,0.10); color: #fff; }
.hv-nav-link.on { color: #fff; background: rgba(255,255,255,0.16); }
.hv-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.hv-nav-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.15); flex-shrink: 0; }
.hv-nav-user { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 8px 3px 4px; border-radius: 22px; transition: background .2s; }
.hv-nav-user:hover, .hv-nav-user.open { background: rgba(255,255,255,0.09); }
.hv-nav-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#9961FF,#5b8dee); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.25); font-family: 'Poppins', sans-serif; }
.hv-nav-user-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.88); white-space: nowrap; font-family: 'Poppins', sans-serif; }
.hv-nav-chevron { color: rgba(255,255,255,0.45); flex-shrink: 0; transition: transform .2s; }
.hv-nav-user.open .hv-nav-chevron { transform: rotate(180deg); }
.hv-nav-user-wrap { position: relative; }
/* [03-11-2026] El menú del usuario en blanco, como el preview aprobado. */
.hv-nav-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(15,25,80,.25); padding: 6px; z-index: 2000; }
.hv-nav-dropdown.open { display: block; }
.hv-nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #1E2140; text-decoration: none; transition: background .15s; font-family: 'DM Sans', sans-serif; }
.hv-nav-dropdown a:hover { background: #F3F1FD; }
.hv-nav-dropdown a.danger { color: #ef4444; }
.hv-nav-dropdown a.danger:hover { background: #FEF2F2; }
.hv-nav-dropdown-sep { height: 1px; background: #E7E8F2; margin: 4px 6px; }
/* [03-11-2026] Los botones de la derecha. */
.hv-nav-btn { display: inline-flex; align-items: center; gap: 7px; font: 600 13px 'DM Sans', sans-serif; color: #fff; text-decoration: none; padding: 7px 15px; border-radius: 9px; white-space: nowrap; transition: background .2s, transform .2s, box-shadow .2s, filter .2s; }
.hv-nav-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.hv-nav-btn-sec { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); }
.hv-nav-btn-sec:hover { background: rgba(255,255,255,0.25); }
.hv-nav-cta { background: linear-gradient(135deg,#7C6FF7,#4A9FD4); border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 6px 16px rgba(20,30,90,.35); }
.hv-nav-cta:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 10px 22px rgba(20,30,90,.45); }
/* [03-11-2026] En el celular, nunca más ancha que la pantalla (lo que la portada resolvió el 15-10). */
@media (max-width: 760px) {
  .hv-nav { padding: 0 14px; gap: 10px; }
  .hv-nav-name, .hv-nav-user-name { display: none; }
  .hv-nav-volver span { display: none; }
}
@media (max-width: 600px) {
  .hv-nav-links { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .hv-nav-links::-webkit-scrollbar { display: none; }
  .hv-nav-link { padding: 5px 9px; }
  .hv-nav-link-buscar span { display: none; }
  .hv-nav-right { gap: 7px; }
  .hv-nav-divider { display: none; }
  .hv-nav-btn { padding: 7px 11px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-nav-cta:hover { transform: none; }
}