/* ═══════════════════════════════════════════════════════════════════════════
   HEAVENSY — LO QUE EL PLAN NO PERMITE
   ── BITÁCORA ──
   [v2026.10.23-1] hvy-permisos.css
   2026-10-23 | .hvy-tip (el globo de todo el sitio, data-globo) del ancho de su texto (width: max-content), con el ancho de antes como máximo: con un texto corto ya no queda
     una caja ancha con espacio vacío (Alberto, 23-10, con captura: «el globo debe adaptarse al mensaje»).
     En celular, lo mismo con el ancho de la pantalla como máximo.
   [v2026.10.11-1] hvy-permisos.css
   2026-10-11 | + .hvy-tip .g-titulo: el título en negrita de un data-globo-titulo (hvy-permisos.js
     [v2026.10.11-1]); lo usan los distintivos de la lista de Conversaciones.
   [v2026.10.08-1] hvy-permisos.css
   2026-10-08 | + .hvy-globo-abre-der: el globo se abre hacia la DERECHA desde el borde izquierdo
     del elemento (opción abreDerecha / data-hvy-abre-der de hvy-permisos.js [v2026.10.08-2]),
     para lo que está pegado a la izquierda, como la primera pestaña de una pantalla.
     Y se anota bajo la REGLA de abajo que ya no rige como está escrita (desde el 10-09 lo que
     niega el cargo también va con candado).
   [v2026.10.04-1] hvy-permisos.css
   2026-10-04 | .hvy-candado-globo con width: max-content: en un botón chico (solo un ícono, como
     el + de nueva sala del chat) el globo se medía sin el candadito y este bajaba a una segunda
     línea. Donde ya se fija un ancho (.hvy-globo-izq, celular) sigue mandando ese ancho.
   [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.
   [08-10-2026] YA NO RIGE: desde el 10-09 (regla de Alberto) lo que niega el cargo también
   se muestra con candado, nunca escondido; el globo dice si lo niega el plan o el cargo.
   ═══════════════════════════════════════════════════════════════════════════ */

.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;
  /* [04-10-2026] Del ancho de su texto y el candadito juntos. Sin esto, en un botón chico (solo un
     ícono) el globo tomaba el ancho del texto y el candadito bajaba a otra línea. */
  width: max-content;
  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; }
/* [08-10-2026] Hacia la DERECHA, desde el borde izquierdo (la primera pestaña de una pantalla). */
.hvy-globo-abre-der .hvy-candado-globo { left: 0; right: auto; }
.hvy-globo-abre-der .hvy-candado-globo::before { left: 16px; right: auto; }

@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: max-content;      /* [23-10-2026] del ancho del texto… */
  max-width: 238px;        /* …hasta el ancho de antes */
  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; }

/* [11-10-2026] El título de un data-globo-titulo (hvy-permisos.js [v2026.10.11-1]): en negrita, sobre
   el texto. */
.hvy-tip .g-titulo { display: block; color: #1e2d5a; font-size: 11.5px; font-weight: 700; margin-bottom: 2px; }

/* 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 { max-width: calc(100vw - 24px); max-height: 50vh; }
}