@font-face {
  font-family: "DMSans";
  src: url("fuentes/DM_Sans/DMSans-VariableFont_opsz\,wght.ttf");
}

* {
  font-family: DMSans;
}

body {
  min-height: 100vh;
}

canvas {
  width: 100%;
  object-fit: contain;
}

#wrapper-botones-barra {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

#boton-barra-lateral {
  border-radius: 0;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  background-color: var(--bs-primary);
  border: none;
}

#boton-barra-lateral:hover {
  filter: brightness(0.9);
}

#boton-dashboard {
  border-radius: 0 0 10px 0;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  background-color: var(--bs-primary);
  border: none;
}

#boton-dashboard:hover {
  filter: brightness(0.9);
}

#barra-lateral {
  border: none !important;
  width: 300px;
}

#barra-lateral a {
  padding: 0.25rem;
  text-decoration: none;
  background-color: #5d367d;
}

#barra-lateral a:hover {
  background-color: #9c6aad;
}

#barra-lateral img {
  width: 32px;
  height: 32px;
}

main {
  transform: translateX(-5%);
  opacity: 0.1;
  transition: all 0.75s;
}

main.cargado {
  transform: none;
  opacity: 1;
}