/* ── BITÁCORA ──
   [v2026.10.27-3] hvy-ayuda.css
   2026-10-27 (3) | + .sa-video-audio («Con audio» junto al título del video abierto) y .sa-btn-video-audio (el parlante del
     botón «Ver el video»).
   [v2026.10.27-2] hvy-ayuda.css
   2026-10-27 (2) | + .sa-cab-video: la cámara del encabezado, junto a la ✕ (abre el video del tema o el general del
     módulo). Con el panel abierto, la burbuja de la Secretaria Heavensy (.hva-wrap) se corre a la izquierda del panel
     para no tapar su pie (en el celular, donde el panel ocupa todo el ancho, se esconde). Si la burbuja se arrastró a
     otro lugar (left/top propios), se queda donde está.
   [v2026.10.27-1] hvy-ayuda.css
   2026-10-27 | TODAS LAS AYUDAS SOLO CON «?» (Alberto, 27-10: «Debemos igualar todas las ayudas solo con el símbolo "?"»).
     − .hvy-ayuda-btn y .hvy-ayuda-btn--vacio: el botón «Ayuda» ya no lo usa nadie (Seguimiento, Embudos y Calendario
       pasan al «?»). + Dos tamaños del «?»:
     · .hvy-ayuda-mini--titulo: el que va junto al título de un módulo o de un panel y abre el índice de la ayuda; más
       grande y más visible que el de los detalles, como el de Empresas. En la fila del título de un módulo (.hv-titulo)
       va sin margen propio: lo separa el gap de la fila, y así el título cabe entero en los paneles de 256px.
     · .hvy-ayuda-mini--col: el de las filas del panel del contacto, en una columna fija a la derecha (sin margen propio:
       lo separa el gap de la fila), para que todos queden alineados.
   [v2026.10.25-1] hvy-ayuda.css
   2026-10-25 | NUEVO. Lo común de la ayuda de los módulos (hvy-ayuda.js [v2026.10.25-1]), sacado de seg-ayuda.css
     [v2026.10.24-1] sin cambiar cómo se ve: el botón «Ayuda» (.hvy-ayuda-btn), el «?» chico (.hvy-ayuda-mini), el panel
     (.hvy-ayuda-panel: índice, tema, marco del ejemplo, pie), las piezas comunes de los ejemplos, el candado, el foco de
     «Muéstrame dónde», el recorrido y el video. + .hvy-ay-oculto y .sa-icono-marca (un ícono en la lista de «Atajos»:
     lo usa Conversaciones para decir qué significa cada ícono).
───────────────────────────────────────────────────────── */

.hvy-ay-oculto { display: none !important; }
/* ── «?» chico junto a un título ── */
.hvy-ayuda-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; padding: 0; flex-shrink: 0;
  border-radius: 50%; border: 1px solid #c4b5fd; background: #fff; color: #8b5cf6;
  font-family: inherit; font-weight: 700; font-size: 9px; line-height: 1; cursor: pointer; vertical-align: middle;
  opacity: .55; transition: opacity .15s, background .15s;
}
.hvy-ayuda-mini:hover { opacity: 1; background: #f5f3ff; }
/* [27-10-2026] Junto al título de un módulo o de un panel: abre el índice de la ayuda. */
.hvy-ayuda-mini.hvy-ayuda-mini--titulo { width: 20px; height: 20px; margin-left: 7px; font-size: 11px; opacity: .75; }
.hvy-ayuda-mini.hvy-ayuda-mini--titulo:hover, .hvy-ayuda-mini.hvy-ayuda-mini--titulo:focus-visible { opacity: 1; }
/* En la fila del título de un módulo (.hv-titulo, hv-tarjeta.css) lo separa el gap de la fila: así el título cabe entero. */
.hv-titulo > .hvy-ayuda-mini.hvy-ayuda-mini--titulo { margin-left: 0; }
/* [27-10-2026] En la columna de acciones de una fila: el gap de la fila lo separa. */
.hvy-ayuda-mini.hvy-ayuda-mini--col { margin-left: 0; }

/* ── Panel ── */
.hvy-ayuda-panel {
  position: fixed; top: 60px; right: 8px; bottom: 8px; width: 420px; max-width: calc(100vw - 16px);
  z-index: 950; display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; border: 1px solid #ece9f8;
  box-shadow: 0 18px 50px rgba(30, 27, 75, .18), 0 2px 8px rgba(30, 27, 75, .06);
  transform: translateX(calc(100% + 24px)); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  font-size: 12.5px; color: #374151;
}
.hvy-ayuda-panel.abierto { transform: none; }
.hvy-ayuda-panel.abierto.sa-oculto { transform: translateX(calc(100% + 24px)); }

.sa-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f1eff9; }
.sa-cab-icono { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.sa-cab-txt { flex: 1; min-width: 0; }
.sa-cab-titulo { font-size: 14px; font-weight: 700; color: #1f2937; }
.sa-cab-sub { font-size: 11px; color: #9ca3af; }
.sa-cab-volver, .sa-cab-cerrar, .sa-cab-video { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
  color: #6b7280; cursor: pointer; flex-shrink: 0; }
.sa-cab-volver:hover, .sa-cab-cerrar:hover { background: #f3f4f6; color: #111827; }
.sa-cab-video { color: #7c3aed; background: #f3efff; }
.sa-cab-video:hover { background: #ebe3ff; color: #5b21b6; }
.sa-cab-video + .sa-cab-cerrar { margin-left: -4px; }

/* La burbuja de la Secretaria no tapa el pie del panel abierto */
body:has(.hvy-ayuda-panel.abierto:not(.sa-oculto)) .hva-wrap { right: 452px; transition: right .28s cubic-bezier(.2, .8, .2, 1); }

.sa-cuerpo { flex: 1; overflow-y: auto; padding: 12px 14px 0; display: flex; flex-direction: column; }
.sa-cuerpo > .sa-tema, .sa-cuerpo > .sa-indice { flex: 1; }

/* Índice */
.sa-buscar { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 34px; border-radius: 9px;
  border: 1px solid #e5e7eb; background: #fafafa; color: #9ca3af; }
.sa-buscar:focus-within { border-color: #c4b5fd; background: #fff; }
.sa-buscar input { flex: 1; border: none; outline: none; background: transparent; font: inherit; color: #111827; }
.sa-tour { margin-top: 10px; width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; border-radius: 11px; border: 1px solid #ddd6fe; background: #faf8ff; cursor: pointer; font: inherit;
  transition: background .15s, border-color .15s; }
.sa-tour:hover { background: #f5f3ff; border-color: #c4b5fd; }
.sa-tour-play { width: 28px; height: 28px; border-radius: 50%; background: #8b5cf6; color: #fff; font-size: 10px; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0; padding-left: 2px; box-sizing: border-box; }
.sa-tour-icono { width: 30px; height: 30px; border-radius: 9px; background: #ede9fe; color: #7c3aed;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sa-tour-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sa-tour-txt b { color: #4c1d95; font-size: 12.5px; }
.sa-tour-txt span { color: #6b7280; font-size: 11px; line-height: 1.35; }
.sa-pronto { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #a78bfa; background: #f5f3ff; border-radius: 999px; padding: 3px 7px; flex-shrink: 0; }

.sa-grupo { margin-top: 14px; }
.sa-grupo-titulo { font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; margin: 0 2px 6px; }
.sa-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.sa-item:hover { background: #faf8ff; border-color: #ede9fe; }
.sa-item--marcado { background: #f5f3ff; border-color: #ddd6fe; }
.sa-item--pronto { cursor: default; opacity: .6; }
.sa-item--pronto:hover { background: transparent; border-color: transparent; }
.sa-item-icono { width: 28px; height: 28px; border-radius: 8px; background: #f5f3ff; color: #7c3aed;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.sa-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sa-item-txt b { font-size: 12.5px; color: #1f2937; font-weight: 600; }
.sa-item-txt span { font-size: 11px; color: #6b7280; line-height: 1.35; }
.sa-item-flecha { color: #c4b5fd; font-size: 11px; }
.sa-vacio { padding: 24px 8px; text-align: center; color: #9ca3af; }

/* Tema */
.sa-tema-titulo { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; font-size: 16px; font-weight: 700; color: #1f2937; }
.sa-tema-intro { margin: 0 0 12px; line-height: 1.55; color: #4b5563; }
.sa-sec-titulo { margin: 16px 0 7px; font-size: 10px; font-weight: 700; color: #7c3aed; text-transform: uppercase; letter-spacing: .06em; }
.sa-pasos { margin: 0; padding: 0; list-style: none; counter-reset: sa; display: flex; flex-direction: column; gap: 7px; }
.sa-pasos li { counter-increment: sa; position: relative; padding-left: 28px; line-height: 1.5; }
.sa-pasos li::before { content: counter(sa); position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%;
  background: #ede9fe; color: #6d28d9; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sa-consejos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.sa-consejos li { display: flex; gap: 9px; line-height: 1.5; background: #fffbeb; border-radius: 9px; padding: 8px 10px; }
.sa-consejos li i { color: #f59e0b; margin-top: 3px; font-size: 11px; }
.sa-atajos { display: flex; flex-direction: column; gap: 8px; }
.sa-atajo { display: grid; grid-template-columns: 132px 1fr; gap: 10px; align-items: start; }
.sa-atajo b { display: block; font-size: 12px; margin-bottom: 1px; }
.sa-atajo span { color: #4b5563; line-height: 1.45; font-size: 11.5px; }
.sa-marca { display: inline-block; font: 600 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 4px 7px; border-radius: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 132px; box-sizing: border-box; }
.sa-marca--sintoma     { background: #fff5f5; color: #dc6b6b; border: 1px solid #fecaca; }
.sa-marca--diagnostico { background: #eff6ff; color: #3b82f6; border: 1px solid #bfdbfe; }
.sa-marca--hipotesis   { background: #fdf4ff; color: #a855c7; border: 1px solid #e9d5ff; }
.sa-atajo-nombre--sintoma { color: #e57373; } .sa-atajo-nombre--diagnostico { color: #4f9fe0; }
.sa-atajo-nombre--hipotesis { color: #ba68c8; } .sa-atajo-nombre--tecla { color: #374151; }
.sa-kbd { display: inline-block; font-family: inherit; font-weight: 600; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 6px; background: #fff;
  border: 1px solid #d1d5db; border-bottom-width: 2px; color: #374151; justify-self: start; }
.sa-rel { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-rel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid #e5e7eb;
  background: #fff; color: #4b5563; font-family: inherit; font-weight: 500; font-size: 11.5px; line-height: 1; cursor: pointer; }
.sa-rel-chip:hover { border-color: #c4b5fd; color: #6d28d9; }
.sa-rel-chip i { color: #a78bfa; }

.sa-pie { position: sticky; bottom: 0; margin: 14px -14px 0; padding: 10px 14px 12px; background: linear-gradient(transparent, #fff 14px);
  display: flex; flex-direction: column; gap: 8px; }
.sa-btn-donde { height: 38px; border-radius: 10px; border: none; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .25); }
.sa-btn-donde:hover { filter: brightness(1.06); }
.sa-aviso { font-size: 11.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; padding: 8px 10px; line-height: 1.45; }

/* Ejemplo */
.sa-ej { border: 1px solid #e9e4fb; border-radius: 12px; background: #fcfbff; overflow: hidden; }
.sa-ej-cab { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid #efebfb; background: #f7f4ff; }
.sa-ej-rotulo { font-size: 10px; font-weight: 700; color: #7c3aed; text-transform: uppercase; letter-spacing: .06em; }
.sa-ej-nota { font-size: 10.5px; color: #a1a1aa; flex: 1; }
.sa-ej-repetir { border: none; background: transparent; color: #7c3aed; font-family: inherit; font-weight: 600; font-size: 11px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.sa-ej-repetir:hover { background: #ede9fe; }
.sa-ej-caja { padding: 12px; }
.sa-ej-pie { margin-top: 10px; font-size: 11.5px; color: #4b5563; line-height: 1.45; min-height: 1px; }
.sa-ej-pie:empty { display: none; }
.sa-ej-pie i { color: #8b5cf6; margin-right: 4px; }

.sa-pop { animation: sa-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes sa-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }


/* Piezas comunes de los ejemplos */
.sa-sub { margin: 12px 0 6px; font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
.sa-sub:first-child { margin-top: 0; }
.sa-btn-falso { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid #e5e7eb;
  background: #fff; color: #4b5563; font-size: 11px; font-weight: 600; font-family: inherit; line-height: 1; cursor: default; white-space: nowrap; }
.sa-btn-falso--lila { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.sa-btn-falso--clic { cursor: pointer; }
.sa-btn-falso--clic:hover { border-color: #c4b5fd; color: #6d28d9; }
.sa-btn-falso--off { opacity: .55; }
.sa-flex { flex: 1; }
.sa-centro { display: flex; justify-content: center; margin-top: 10px; }
.sa-filtros { display: flex; gap: 6px; margin-bottom: 8px; }
.sa-filtro { padding: 4px 10px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280;
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.sa-filtro.activo { background: #f5f3ff; border-color: #c4b5fd; color: #6d28d9; }
.sa-form-in { padding: 7px 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; font-size: 11.5px; color: #374151;
  line-height: 1.45; white-space: pre-wrap; }
.sa-form-in--alto { min-height: 44px; }
.sa-leyenda--puntos span { display: inline-flex; align-items: center; gap: 5px; }

/* Permisos */
.sa-perm { display: flex; flex-direction: column; gap: 6px; }
.sa-perm-f { display: flex; gap: 9px; align-items: flex-start; }
.sa-perm-f > i { width: 22px; height: 22px; border-radius: 6px; background: #f5f3ff; color: #7c3aed; font-size: 10px; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.sa-perm-f b { display: block; font-size: 11.5px; color: #374151; }
.sa-perm-f small { font-size: 10.5px; color: #6b7280; }
.sa-candado { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sa-candado-i { color: #d97706; }
.sa-candado-globo { max-width: 280px; padding: 8px 10px; border-radius: 9px; background: #fff; border: 1px solid #e5e7eb; color: #6b7280;
  font-size: 11px; line-height: 1.4; box-shadow: 0 6px 16px rgba(0, 0, 0, .06); }
.sa-candado-globo i { color: #d97706; margin-right: 4px; }


/* ── Muéstrame dónde ── */
.sa-foco-capa { position: fixed; inset: 0; z-index: 960; }
.sa-foco-aro { position: fixed; z-index: 961; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(17, 24, 39, .45); outline: 3px solid #a78bfa; outline-offset: 0;
  transition: top .2s, left .2s, width .2s, height .2s; animation: sa-aro 1.6s ease-in-out infinite; }
@keyframes sa-aro { 50% { outline-color: #7c3aed; outline-offset: 3px; } }
.sa-foco-globo { position: fixed; z-index: 962; max-width: 320px; background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 14px 40px rgba(17, 24, 39, .25); font-size: 12.5px; color: #374151; line-height: 1.5; }
.sa-foco-acc { margin-top: 9px; display: flex; justify-content: flex-end; }
.sa-foco-volver { border: none; background: #f5f3ff; color: #6d28d9; font-family: inherit; font-weight: 600; font-size: 11.5px; line-height: 1; padding: 7px 11px; border-radius: 8px; cursor: pointer; }
.sa-foco-volver:hover { background: #ede9fe; }

.sa-foco-capa--pasa { pointer-events: none; }
/* Recorrido guiado */
.sa-foco-globo--paso { width: 300px; }
.sa-paso-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sa-paso-n { font-size: 10px; font-weight: 700; color: #8b5cf6; text-transform: uppercase; letter-spacing: .05em; }
.sa-paso-x { border: none; background: transparent; color: #9ca3af; cursor: pointer; width: 24px; height: 24px; border-radius: 6px; }
.sa-paso-x:hover { background: #f3f4f6; color: #374151; }
.sa-paso-tit { display: block; font-size: 14px; color: #1f2937; margin-bottom: 3px; }
.sa-paso-barra { height: 3px; border-radius: 3px; background: #f1f0f9; margin-top: 10px; overflow: hidden; }
.sa-paso-barra i { display: block; height: 100%; background: linear-gradient(90deg, #8b5cf6, #6366f1); border-radius: 3px; transition: width .3s; }
.sa-foco-acc { align-items: center; gap: 6px; }
.sa-r-btn { height: 30px; min-width: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; color: #4b5563;
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sa-r-btn:hover { border-color: #c4b5fd; color: #6d28d9; }
.sa-r-btn--sig { border: none; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; }
.sa-r-btn--sig:hover { color: #fff; filter: brightness(1.06); }
.sa-r-mas { border: none; background: transparent; color: #7c3aed; font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.sa-r-mas:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .hvy-ayuda-panel { top: 56px; right: 0; bottom: 0; width: 100vw; max-width: 100vw; border-radius: 14px 14px 0 0; }
  body:has(.hvy-ayuda-panel.abierto:not(.sa-oculto)) .hva-wrap { display: none; }
  .sa-atajo { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hvy-ayuda-panel, .sa-pop, .sa-foco-aro, .sa-cursor { transition: none; animation: none; }
}

/* Video tutorial sobre el panel */
.sa-btn-video { height: 36px; border-radius: 10px; border: 1px solid #ddd6fe; background: #fff; color: #6d28d9; font-family: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sa-btn-video:hover { background: #f5f3ff; }
.sa-video { position: absolute; inset: 0; z-index: 2; background: rgba(17, 24, 39, .92); border-radius: 14px; display: flex;
  flex-direction: column; padding: 12px; gap: 10px; }
.sa-video-cab { display: flex; align-items: center; justify-content: space-between; color: #fff; font-weight: 600; font-size: 13px; }
.sa-video-cab .sa-cab-cerrar { color: #e5e7eb; }
.sa-video-audio { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 7px; border-radius: 99px;
  background: rgba(255, 255, 255, .14); color: #e9e5ff; font-size: 10.5px; font-weight: 600; vertical-align: 1px; }
.sa-btn-video-audio { margin-left: 4px; opacity: .7; font-size: .9em; }
.sa-video-cab .sa-cab-cerrar:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sa-video video { width: 100%; border-radius: 10px; background: #000; margin: auto 0; }

/* Un ícono en la lista de «Atajos» (qué significa cada ícono) */
.sa-atajo--icono { grid-template-columns: 32px 1fr; }
.sa-icono-marca { width: 32px; height: 26px; border-radius: 7px; background: #f8f7fc; border: 1px solid #ece9f8; color: #6b7280;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; justify-self: start; }