/* ═══════════════════════════════════════════════════════════════════════════
   HEAVENSY — LO QUE EL PLAN NO PERMITE
   ── BITÁCORA ──
   [v2026.09.10-1] hvy-permisos.css
   2026-09-10 | EL GLOBO ES DE TODO EL SITIO, Y ES ESTILO HEAVENSY (Alberto, 10-09):
     fondo blanco solido, letras gris suave, borde fino lila, pildora redonda, candadito
     ambar delante del texto. Se retira el azul oscuro del 09-09.
     Y el apagado del elemento bloqueado deja de ser `opacity` en el padre: el globo
     lo heredaba y se veia translucido por mucho que su fondo fuera blanco. Ahora se
     apaga solo el CONTENIDO (todo hijo que no sea el globo).
     + .hvy-bloqueado-seccion: para las cabeceras de seccion de un panel (conversaciones
     y las que vengan): pierde el contador y muestra el candadito junto al chevron.
     + variantes de posicion del globo: .hvy-globo-arriba (compositor, barras
     inferiores) y .hvy-globo-izq (botones pegados al borde derecho).
   [v2026.09.12-2] hvy-permisos.css
   2026-09-12 (2) | RENOMBRE: .hvy-globo → .hvy-tip. Ese nombre YA ESTABA EN USO por un
     componente propio del sistema (.hvy-globo-wrap, .hvy-globo--abajo, .hvy-globo--izq)
     con z-index 60, que carga despues y ganaba: el globo del menu quedaba debajo del
     contenido. Ademas, usar el mismo nombre le pisaba el estilo a ese componente.
   [v2026.09.12-1] hvy-permisos.css
   2026-09-12 | + .hvy-globo: el globo FLOTANTE, uno solo en el <body>. Reemplaza a
     .hvy-candado-globo, que vivia dentro del elemento y por eso lo recortaba cualquier
     contenedor: con el texto largo no aparecia, en el cajon del celular no cabia al
     lado, y en el stepper del asistente lo tapaba el panel. Este se coloca donde quepa
     (hvy-permisos.js [v2026.09.12-1]).
     Mismo aspecto: blanco, letras gris suave, borde lila, candadito ambar cuando toca.
   [v2026.09.11-1] hvy-permisos.css
   2026-09-11 | + .hvy-sin-plan: el aviso de una pantalla cuyo modulo el plan no trae.
     Lo pinta hvyPantallaSinPlan() (hvy-permisos.js [v2026.09.11-4]) y queda igual en
     todas: mismo icono, mismo texto y CENTRADO. Antes estaba escrito a mano en cada
     pantalla y el de seguimiento salia pegado a la izquierda, porque su contenedor es
     el panel lateral y no el ancho completo — por eso lleva width:100% y el centrado
     propio, sin depender de como sea el contenedor.
   [v2026.09.09-1] hvy-permisos.css — archivo nuevo
   2026-09-09 | El aspecto de un botón que el plan de la empresa no permite. Va aparte
     porque lo usan varias pantallas (empresas, usuarios, y lo que venga en la Fase 4) y
     repetirlo en cada CSS del módulo garantiza que se vean distintos con el tiempo.
     Lo aplica hvyCandado() de hvy-permisos.js.

   REGLA: lo que el PLAN no incluye se muestra con candado, no se esconde — es el
   catálogo del propio dueño y el camino natural para subir de plan. Lo que el CARGO
   no da sí se esconde: el usuario no puede hacer nada al respecto.
   ═══════════════════════════════════════════════════════════════════════════ */

.hvy-bloqueado {
  position: relative;
  cursor: not-allowed !important;
  /* El texto DIRECTO del elemento ("Nueva empresa") no es un hijo: se apaga por color. */
  color: rgba(107, 114, 128, .55) !important;
}

/* El apagado va sobre el CONTENIDO, no sobre el elemento: si fuera `opacity` en el
   padre, el globo lo heredaria y se veria translucido. */
.hvy-bloqueado > *:not(.hvy-candado-globo) {
  opacity: .45;
  filter: grayscale(.6);
}
.hvy-bloqueado:hover { background: inherit; }

/* Boton solido bloqueado (enviar, primarios): gris en vez del degradado apagado. */
button.hvy-bloqueado.btn-primary,
button.hvy-bloqueado.u-btn-primary,
.hvy-bloqueado.hvy-btn-solido { background: #d1d5db !important; box-shadow: none !important; }

/* El candado va despues del texto en los botones con texto. */
.hvy-bloqueado.hvy-con-texto::after {
  content: "\f023";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  margin-left: 7px;
  font-size: .9em;
  opacity: .5;
}

/* Cabecera de seccion de un panel: sin contador, con candadito junto al chevron. */
.hvy-bloqueado-seccion .hvy-contador { display: none; }
.hvy-cand-seccion { font-size: 9px; color: #b7791f; margin-right: 4px; }

/* ── EL GLOBO: blanco, gris suave, borde lila, pildora, candadito ambar ── */
.hvy-candado-globo {
  display: none;
  position: absolute;
  right: 6px;
  top: calc(100% + 8px);
  background: #fff;
  color: #6b7280;
  border: 1.5px solid #c9b8ff;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(153, 97, 255, .22), 0 2px 6px rgba(30, 45, 90, .10);
  pointer-events: none;
  opacity: 1 !important;
  filter: none !important;
  text-transform: none;
  letter-spacing: 0;
}
.hvy-candado-globo::before {
  content: "";
  position: absolute;
  right: 16px;
  top: -7px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1.5px solid #c9b8ff;
  border-top: 1.5px solid #c9b8ff;
  transform: rotate(45deg);
}
.hvy-candado-globo::after {
  content: "\f023";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  margin-right: 7px;
  font-size: 10px;
  color: #b7791f;
  float: left;
  margin-top: 1px;
}
.hvy-bloqueado:hover .hvy-candado-globo { display: block; }
.hvy-bloqueado:hover { z-index: 210; }

/* Globo hacia ARRIBA (compositor, barras pegadas al borde inferior). */
.hvy-globo-arriba .hvy-candado-globo { top: auto; bottom: calc(100% + 8px); right: auto; left: 50%; transform: translateX(-50%); }
.hvy-globo-arriba .hvy-candado-globo::before { top: auto; bottom: -7px; left: 50%; right: auto; transform: translateX(-50%) rotate(225deg); }
/* Globo alineado a la DERECHA pero hacia arriba (interruptor de IA del header). */
.hvy-globo-arriba.hvy-globo-der .hvy-candado-globo { left: auto; right: 0; transform: none; }
.hvy-globo-arriba.hvy-globo-der .hvy-candado-globo::before { left: auto; right: 12px; transform: rotate(225deg); }
/* Globo que se abre hacia la izquierda (elementos pegados al borde derecho). */
.hvy-globo-izq .hvy-candado-globo { right: 0; left: auto; white-space: normal; width: 210px; }

@media (max-width: 640px) {
  .hvy-candado-globo { white-space: normal; width: 210px; }
}

/* ══ [11-09] EL MODULO ENTERO FUERA DEL PLAN ════════════════════════════════
   No se esconde: se muestra que es y desde que plan se consigue. Ese es el sentido de
   poner candado en vez de ocultar. */
.hvy-sin-plan {
  display: flex;
  flex-direction: column;
  align-items: center;      /* centrado propio: no depende del contenedor */
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 320px;
  padding: 56px 24px;
  color: #9ca3af;
  font-size: 12.5px;
  line-height: 1.6;
  box-sizing: border-box;
}
.hvy-sin-plan i {
  font-size: 30px;
  color: #e0e7ff;
  margin-bottom: 13px;
}
.hvy-sin-plan b {
  color: #6b7280;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.hvy-sin-plan span {
  display: block;
  max-width: 430px;
}

/* ══ [12-09] EL GLOBO FLOTANTE ══════════════════════════════════════════════
   Uno solo en el <body>. `position: fixed` y el JS lo coloca donde quepa: nada lo
   recorta y no hay que pelear el overflow ni el z-index de cada contenedor. */
.hvy-tip {
  display: none;
  position: fixed;
  z-index: 10000;
  background: #fff;
  color: #6b7280;
  border: 1.5px solid #c9b8ff;
  border-radius: 14px;
  padding: 10px 13px;
  width: 238px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(153, 97, 255, .22), 0 2px 8px rgba(30, 45, 90, .10);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  line-height: 1.45;
  pointer-events: none;
  text-align: left;
}
.hvy-tip.ver { display: block; }

/* Una sola línea: el globo se ajusta y no parece una caja vacía. */
.hvy-tip .g-simple { font-size: 11.5px; font-weight: 600; }

/* Con título: el nombre del módulo y, si es parcial, su cuenta. */
.hvy-tip .g-ttl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #1e2d5a;
  margin-bottom: 8px;
}
.hvy-tip .g-ttl i { color: #b7791f; font-size: 11px; }
.hvy-tip .g-n {
  background: #eef1ff;
  color: #7d84c1;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 800;
  margin-left: auto;
}

/* Las dos listas: lo incluido y lo que falta. */
.hvy-tip .g-si,
.hvy-tip .g-no {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.hvy-tip .g-si { color: #16a34a; }
.hvy-tip .g-no { color: #b7791f; margin-top: 9px; }
.hvy-tip ul { list-style: none; margin: 0; padding: 0; }
.hvy-tip li { font-size: 11px; font-weight: 500; padding: 1px 0; }
.hvy-tip li::before { content: "\00b7"; margin-right: 5px; color: #c9c9d4; }

/* En pantalla angosta el globo ocupa casi todo el ancho: 238 px fijos se saldrian. */
@media (max-width: 480px) {
  .hvy-tip { width: calc(100vw - 24px); max-height: 50vh; }
}