/* Tooltip de los controles. */
#control-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  width: max-content;
  max-width: min(288px, calc(100vw - 16px));
  padding: 9px 12px;
  border: 1px solid #a9c6db;
  border-radius: 10px;
  background: #244b68;
  color: var(--color-surface);
  box-shadow: 0 4px 15px #183b5b30;
  font:
    calc(12px * var(--text-scale, 1))/1.4 ui-rounded,
    "Trebuchet MS",
    sans-serif;
  z-index: 1000;
}
html[data-appearance="dark"] #control-tooltip {
  background: #e4eff8;
  color: #24445f;
  border-color: #8bb0cb;
}