/* =============================================================================
   SGE HELP HUB v1 -- panel lateral de ayuda (ORCH-GUIDED-02)
   SGE-INIT-0009 -- Guided Experience & SUSBI Navigator, blueprint §3.5

   El FAB universal (#chatFloatButton, chat_modal.html) abre este panel en
   vez del chat directo. Renderiza el screen_experience_manifest de la
   pantalla actual: resumen, acciones frecuentes, preguntas predefinidas,
   "Iniciar tour" y el chat como ultimo recurso. Glassmorphism de soporte
   (§22.5 -- overlay, no onboarding) con --sge-blur-xl (token "overlays
   modales, drawers"). Sin manifest: degrada a solo el acceso al chat.
   Animacion 100% CSS (--sge-t-*) -- no hizo falta GSAP, "si CSS alcanza,
   CSS gana" (blueprint §3.7).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. BACKDROP
   ----------------------------------------------------------------------------- */
.sge-help-hub-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10600;
  background: rgba(4, 9, 18, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sge-t-base, .25s) ease;
}

.sge-help-hub-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}


/* -----------------------------------------------------------------------------
   2. PANEL
   ----------------------------------------------------------------------------- */
.sge-help-hub-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10601;
  height: 100dvh;
  width: min(380px, 92vw);
  display: flex;
  flex-direction: column;
  background-color: var(--sge-surface-solid, #0d1b2e);
  background-image: linear-gradient(rgba(232, 244, 253, .04), rgba(232, 244, 253, .04));
  backdrop-filter: blur(var(--sge-blur-xl, 24px));
  -webkit-backdrop-filter: blur(var(--sge-blur-xl, 24px));
  border-left: 1px solid var(--sge-border, rgba(0, 229, 255, .14));
  box-shadow: -12px 0 32px rgba(0, 0, 0, .35);
  color: var(--sge-text, #e8f4fd);
  transform: translateX(100%);
  transition: transform var(--sge-t-slow, .4s) cubic-bezier(.4, 0, .2, 1);
}

.sge-help-hub-panel.show {
  transform: translateX(0);
}

[data-bs-theme="light"] .sge-help-hub-panel {
  background-color: rgba(255, 255, 255, .92);
  background-image: none;
  border-left-color: var(--sge-border, rgba(24, 95, 165, .14));
  box-shadow: -12px 0 32px rgba(24, 95, 165, .12);
  color: var(--sge-text, #1e293b);
}


/* -----------------------------------------------------------------------------
   3. HEADER
   ----------------------------------------------------------------------------- */
.sge-help-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--sge-border, rgba(0, 229, 255, .14));
  flex-shrink: 0;
}

[data-bs-theme="light"] .sge-help-hub-header {
  border-bottom-color: var(--sge-border, rgba(24, 95, 165, .14));
}

.sge-help-hub-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--sge-text-md, 1rem);
  font-weight: 800;
  color: var(--sge-cyan, #00E5FF);
}

[data-bs-theme="light"] .sge-help-hub-title {
  color: var(--sge-blue-600, #185FA5);
}

.sge-help-hub-close {
  background: transparent;
  border: none;
  color: var(--sge-kpi-label-color, rgba(226, 232, 240, .8));
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  transition: color var(--sge-t-fast, .15s);
}

.sge-help-hub-close:hover {
  color: var(--sge-cyan, #00E5FF);
}

[data-bs-theme="light"] .sge-help-hub-close:hover {
  color: var(--sge-blue-600, #185FA5);
}


/* -----------------------------------------------------------------------------
   4. BODY (secciones)
   ----------------------------------------------------------------------------- */
.sge-help-hub-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.1rem 1.25rem 1.5rem;
}

.sge-help-hub-section {
  margin-bottom: 1.4rem;
}

.sge-help-hub-section-title {
  font-size: var(--sge-text-xs, .65rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sge-kpi-label-color, rgba(226, 232, 240, .8));
  margin: 0 0 .6rem;
}

.sge-help-hub-summary {
  font-size: var(--sge-text-base, .875rem);
  line-height: 1.55;
  color: var(--sge-text, inherit);
  margin: 0;
}

.sge-help-hub-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.sge-help-hub-action {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border-radius: 12px;
  background: rgba(0, 229, 255, .06);
  border: 1px solid rgba(0, 229, 255, .14);
  color: var(--sge-text, inherit);
  text-decoration: none;
  font-size: var(--sge-text-sm, .8rem);
  font-weight: 600;
  transition: background var(--sge-t-fast, .15s), transform var(--sge-t-fast, .15s);
}

.sge-help-hub-action:hover {
  background: rgba(0, 229, 255, .12);
  transform: translateX(-2px);
  color: var(--sge-text, inherit);
}

.sge-help-hub-action iconify-icon {
  font-size: 1.1rem;
  color: var(--sge-cyan, #00E5FF);
  flex-shrink: 0;
}

[data-bs-theme="light"] .sge-help-hub-action {
  background: rgba(24, 95, 165, .05);
  border-color: rgba(24, 95, 165, .14);
}

[data-bs-theme="light"] .sge-help-hub-action:hover {
  background: rgba(24, 95, 165, .1);
}

[data-bs-theme="light"] .sge-help-hub-action iconify-icon {
  color: var(--sge-blue-600, #185FA5);
}

.sge-help-hub-faq-item {
  margin-bottom: .9rem;
}

.sge-help-hub-faq-item:last-child {
  margin-bottom: 0;
}

.sge-help-hub-faq-q {
  font-size: var(--sge-text-sm, .8rem);
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--sge-text, inherit);
}

.sge-help-hub-faq-a {
  font-size: var(--sge-text-sm, .8rem);
  line-height: 1.5;
  margin: 0;
  color: var(--sge-kpi-label-color, rgba(226, 232, 240, .8));
}

.sge-help-hub-tour-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-radius: var(--sge-radius-pill, 999px);
  border: 1px solid rgba(0, 229, 255, .28);
  background: rgba(0, 229, 255, .08);
  color: var(--sge-cyan, #00E5FF);
  font-size: var(--sge-text-sm, .8rem);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--sge-t-fast, .15s), box-shadow var(--sge-t-base, .25s);
}

.sge-help-hub-tour-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sge-glow-cyan, 0 0 0 1px rgba(0, 229, 255, .14), 0 4px 12px rgba(0, 229, 255, .08));
}

[data-bs-theme="light"] .sge-help-hub-tour-btn {
  border-color: rgba(24, 95, 165, .28);
  background: rgba(24, 95, 165, .08);
  color: var(--sge-blue-600, #185FA5);
}


/* -----------------------------------------------------------------------------
   5. CHAT (ultimo recurso) -- separado visualmente del resto
   ----------------------------------------------------------------------------- */
.sge-help-hub-chat-section {
  border-top: 1px solid var(--sge-border, rgba(0, 229, 255, .14));
  padding-top: 1.1rem;
  margin-top: .3rem;
}

[data-bs-theme="light"] .sge-help-hub-chat-section {
  border-top-color: var(--sge-border, rgba(24, 95, 165, .14));
}

.sge-help-hub-chat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: var(--sge-radius-pill, 999px);
  border: 1px solid var(--sge-clay-border-dark);
  background: transparent;
  color: var(--sge-kpi-label-color, rgba(226, 232, 240, .8));
  font-size: var(--sge-text-sm, .8rem);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--sge-t-fast, .15s), border-color var(--sge-t-fast, .15s);
}

.sge-help-hub-chat-btn:hover {
  color: var(--sge-text, inherit);
  border-color: var(--sge-cyan, #00E5FF);
}

[data-bs-theme="light"] .sge-help-hub-chat-btn {
  border-color: var(--sge-clay-border-light);
}

[data-bs-theme="light"] .sge-help-hub-chat-btn:hover {
  border-color: var(--sge-blue-600, #185FA5);
}


/* -----------------------------------------------------------------------------
   6. RESPONSIVE
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .sge-help-hub-panel {
    width: 100vw;
  }
}


/* -----------------------------------------------------------------------------
   7. REDUCED MOTION
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sge-help-hub-panel,
  .sge-help-hub-backdrop {
    transition-duration: .01ms !important;
  }
}