/* Burbujas del plano de institucional.php (también las usa tour-editor.php, así se ven igual).
   La punta va en el centro del marker; .an-bubble--{left|right|up|down} es hacia dónde apunta.
   El tamaño escala con el ancho del plano (--tw, lo pone el JS) para que no se mueva respecto del dibujo. */
.an-bubble {
  --tip: .5em;
  position: absolute;
  z-index: 2;
  font-size: calc(var(--tw, 1100px) * .0115);
  font-weight: 600;
  line-height: 1.25;
  white-space: pre;
  text-align: center;
  color: #013183;
  background: #fff;
  padding: .45em .8em;
  border: 0;
  border-radius: .6em;
  filter: drop-shadow(0 .15em .3em rgba(1, 49, 131, .25));
}
button.an-bubble { cursor: pointer; }
.an-bubble::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: calc(var(--tip) * 1.414);
  height: calc(var(--tip) * 1.414);
  background: inherit;
}
.an-bubble--left  { transform: translate(var(--tip), -50%); }
.an-bubble--right { transform: translate(calc(-100% - var(--tip)), -50%); }
.an-bubble--up    { transform: translate(-50%, var(--tip)); }
.an-bubble--down  { transform: translate(-50%, calc(-100% - var(--tip))); }
.an-bubble--left::after  { left: 0;   top: 50%;  transform: translate(-50%, -50%) rotate(45deg); }
.an-bubble--right::after { right: 0;  top: 50%;  transform: translate(50%, -50%) rotate(45deg); }
.an-bubble--up::after    { top: 0;    left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.an-bubble--down::after  { bottom: 0; left: 50%; transform: translate(-50%, 50%) rotate(45deg); }