/* Código CSS para generar el piano que se utilizará en la página dedicada a los acordes */
#selector-escala-etiquetas {
  display: flex;
  justify-content: center;
  width: 100%;
  font-family: "NotoMusic";
  font-size: 1.5em;
  font-weight: bold;
  color: var(--segundo-color);
}

#selector-escala {
  display: flex;
  justify-content: center;
  margin: -2em 0 3em 0;
  width: 70em;
}

fieldset {
  display: flex;
  justify-content: space-around;
  font-family: "NotoMusic";
  font-size: 1.2em;
  font-weight: bold;
  border-color: var(--segundo-color);
  border-radius: 2em;
  color: var(--segundo-color);
}

#escalas-mayores {
  width: 15em;
  height: 4em;
  margin-right: 1em;
}

#escalas-menores {
  width: 20em;
  height: 4em;
  margin-left: 1em;
}

.panel-acordes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 3em;
}

.mostrar-acordes {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: -2em;
}

.acordes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 35em;
  height: 100%;
}

#imagenTonalidad {
  width: 32em;
  height: 8em;
  background-image: url('../images/tonalidadDo.svg');
  background-size: cover;
  margin-top: 5em;
  border: none;
}

.piano {
  position: relative; /* Contenedor para las teclas */
  width: 21.8em;
  height: 9.2em;
  padding: 0 0.1em;
}

.tecla-blanca {
  position: absolute;
  background-color: white;
  border: 0.1em solid var(--segundo-color);
  width: 3em;
  height: 8.8em;
  top: 0.1em;
  border-radius: 0 0 0.5em 0.5em;
  cursor: pointer;
  box-shadow: 0.25em 0.25em 0.25em 0.12em rgba(0, 0, 0, 0.4);
}

.tecla-negra {
  position: absolute;
  background-color: var(--segundo-color);;
  width: 2em;
  height: 5.5em;
  top: 0.1em;
  border-radius: 0 0 0.5em 0.5em;
  cursor: pointer;
}

#do {
  left: 0.1em;
  background-color: var(--sexto-color);
}

#do-sostenido {
  left: 2.2em;
}

#re {
  left: 3.2em;
}

#re-sostenido {
  left: 5.35em;
}

#mi {
  left: 6.3em;
}

#fa {
  left: 9.4em;
}

#fa-sostenido {
  left: 11.5em;
}

#sol {
  left: 12.5em;
}

#sol-sostenido {
  left: 14.65em;
}

#la {
  left: 15.6em;
}

#la-sostenido {
  left: 17.7em;
}

#si {
  left: 18.7em;
}

#tonalidad {
  text-align: center;
  color: var(--segundo-color);
  font-family: "NotoMusic";
  font-size: 2em;
  margin: -1em 0 0.5em 0;
}
.contenedor-acordes-mayores, .contenedor-acordes-menores {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.listado-acordes {
  display: flex;
  justify-content: center;
  align-items: center;
}

.listado-acordes button {
  font-family: "NotoMusic";
  font-size: 1.5em;
  text-align: center;
  padding: 0.2em 0.5em 0.2em 0.5em;
  margin: 0 0.5em 0 0.5em;
  border: none;
  border-radius: 0.5em;
  box-shadow: 0.15em 0.15em 0.15em 0.075em rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.listado-acordes button:active {
  box-shadow: 0.075em 0.075em 0.075em 0.037em rgba(0, 0, 0, 0.4);
}

#modo-mayor {
  font-family: "NotoMusic";
  font-size: 2em;
  text-align: center;
  border-radius: 0.5em;
  color: var(--segundo-color);
  margin-top: 1.5em;
}

#grado1 {
  background-color: var(--sexto-color);
}

#grado2 {
  background-color: var(--septimo-color);
}

#grado3 {
  background-color: var(--octavo-color);
}

#grado4 {
  background-color: var(--noveno-color);
}

#grado5 {
  background-color: var(--decimo-color);
}

#grado6 {
  background-color: var(--undecimo-color);
}

#grado7 {
  background-color: var(--duodecimo-color);
}

#modo-menor {
  font-family: "NotoMusic";
  font-size: 2em;
  text-align: center;
  border-radius: 0.5em;
  color: var(--segundo-color);
}

#grado1m {
  background-color: var(--undecimo-color);
}

#grado2m {
  background-color: var(--duodecimo-color);
}

#grado3m {
  background-color: var(--sexto-color);
}

#grado4m {
  background-color: var(--septimo-color);
}

#grado5m {
  background-color: var(--octavo-color);
}

#grado6m {
  background-color: var(--noveno-color);
}

#grado7m {
  background-color: var(--decimo-color);
}

#listado-otros-acordes button {
  text-align: center;
  border-radius: 0.5em;
  background-color: var(--decimotercer-color);
  border: none;
}

.circulo-quintas {
  position: relative;
  width: 30em;
  height: 30em;
}

.circulo-quintas img {
  width: 30em;
  height: 30em;
  position: absolute;
  transition: transform 0.5s ease; /* Transición suave para la rotación */
}

.circulo-quintas img:nth-child(2) {
  top: 0;
  left: 0;
  z-index: 1;
  transform-origin: center center;
  transform: rotate(0deg);
}

.acordes-triadas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  width: 50em;
  height: 10em;
  margin: 0;
}

#acordes-triadas-mayores {
  background-image: url("../images/acordesDoMayor.svg");
}

#acordes-triadas-menores {
  background-image: url("../images/acordesLaMenor.svg");
}