.score {
  width: 190px;
  height: 80px;
}
/* ===== TECLADO COMPACTO CORRECTO ===== */
.keyboard {
  position: relative;
  width: 182px;       
  height: 60px;
  padding:6px 0px;
}

/* blancas */
.white-keys {
  display: flex;
}

.white-key {
  width: 26px;
  height: 60px;
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  border: 1px solid #bbb;
  box-sizing: border-box;
}

.white-key.active {
  background: #6d7d91;
}

/* negras */
.black-keys {
  position: absolute;
  padding:6px 0px;
  top: 0;
  left: 0;
  width: 100%;
  height: 38px;
  pointer-events: none;
}

.black-key {
  position: absolute;
  width: 16px;
  height: 38px;

  background: #111;              /* negro uniforme */
  border: 1px solid #000;        /* borde fino y liso */
  border-radius: 0 0 2px 2px;    /* casi recto */

  box-shadow: none;              /* 🔑 sin relieve */
  z-index: 10;
}

.black-key.active {
  background: #6d7d91;
  border-color: #ffffff;
}

.db { left: 18px; }   /* entre C (0) y D (26) */
.eb { left: 44px; }   /* entre D (26) y E (52) */
.gb { left: 96px; }   /* entre F (78) y G (104) */
.ab { left: 122px; }  /* entre G (104) y A (130) */
.bb { left: 148px; }  /* entre A (130) y B (156) */

.keyboard.extended {
  width: 234px; /* 9 × 26px */
}

.db2 {
  left: 174px; /* entre C2 y D2 */
}

/* grid */
.interval-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.interval-block {
  width: auto;
  padding: 8px;
  border-radius: 8px;
}
.interval-name:hover{ background:#e6e4e3; }

.selector{
  display:inline-block;
  align-items: center;
  gap: 12px;

  background: var(--panel);
  color: var(--text);

  border: 1px solid var(--border);
  border-radius: 2px;

  padding: 8px 16px;
  margin: 30px 0;

  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;

  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.selector button{
  margin:2px;
  padding:6px 10px;
}
/* SEPARADOR 2*/
.section-separator-teclado{
margin: 28px 0 22px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border),
    transparent
  );
}