/* lab.css — Componentes del Laboratorio (V1): tarjeta de acorde, notas, teclado SVG, selectores. */

.lab { display: flex; flex-direction: column; gap: 32px; }
.lab__top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 860px) { .lab__top { grid-template-columns: 1fr; gap: 26px; } }

/* — Anillo de intervalos — */
.lab__ring { display: flex; justify-content: center; }
.ring { width: 100%; max-width: 260px; height: auto; overflow: visible; }
.ring__base { fill: none; stroke: var(--line); stroke-width: 1; }
.ring__tick { fill: var(--line); }
.ring__poly { fill: color-mix(in srgb, var(--live) 12%, transparent); stroke: var(--live); stroke-width: 1; stroke-opacity: 0.5; }
.ring__string { stroke-width: 2; stroke-linecap: round; transition: stroke var(--d-3) var(--ease); }
.ring__node { fill: var(--pc, var(--live)); stroke: var(--paper); stroke-width: 1.5; }
.ring__node.is-root { fill: var(--live); }
.ring__label { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-dim); }

/* — Lente afectivo — */
.lab__lens { display: flex; flex-direction: column; gap: 14px; }
.meter__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t--2); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 5px;
}
.meter__label b { color: var(--ink); font-size: var(--t--1); font-weight: 500; }
.meter__track {
  position: relative; height: 8px; border-radius: 6px;
  background: var(--paper-sunk); border: 1px solid var(--line); overflow: visible;
}
.meter__track--bright {
  background: linear-gradient(90deg, var(--dark-2), var(--dark-1) 28%, var(--paper-sunk) 50%, var(--bright-0) 72%, var(--bright-2));
}
.meter__fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  background: var(--tense); border-radius: 6px;
  transition: width var(--d-4) var(--ease);
}
.meter__dot {
  position: absolute; top: 50%; width: 13px; height: 13px; margin-left: -6px;
  transform: translateY(-50%); border-radius: 50%;
  background: var(--ink); border: 2px solid var(--paper);
  transition: left var(--d-4) var(--ease);
}
.lens__color { font-size: var(--t--1); margin: 4px 0 0; }
.lens__color em { color: var(--ink); }
.lens__val { color: var(--ink-dim); font-size: var(--t--2); letter-spacing: 0.08em; margin: 0; cursor: help; }
.lens__hint { color: var(--live); }

/* — Tarjeta del acorde — */
.chordcard__symbol {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(56px, 12vw, var(--t-mega));
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.chordcard__es {
  font-style: italic;
  color: var(--ink-dim);
  font-size: var(--t-0);
  margin: 4px 0 18px;
}
.chordcard__notes {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px;
}
.notepill {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pc, var(--live));
  border-radius: var(--radius);
  font-size: var(--t--1);
  background: var(--paper-sunk);
}
.notepill small { color: var(--ink-dim); font-size: var(--t--2); }

.playbtn {
  background: var(--live); color: var(--paper);
  border: none; border-radius: var(--radius);
  padding: 10px 22px; font-family: var(--font-mono);
  font-size: var(--t--1); letter-spacing: 0.06em;
  transition: background var(--d-2) var(--ease), transform var(--d-1) var(--ease);
}
.playbtn:hover { background: var(--live-bright); }
.playbtn:active { transform: translateY(1px); }

/* — Teclado SVG — */
.lab__keyboard { display: flex; justify-content: center; }
.keyboard { width: 100%; max-width: 560px; height: auto; }
.keyboard .key {
  transition: fill var(--d-2) var(--ease);
  cursor: pointer;
}
.keyboard .key--white { fill: var(--paper-sunk); stroke: var(--line); stroke-width: 1; }
.keyboard .key--black { fill: var(--ink); stroke: var(--paper); stroke-width: 1; }
.keyboard .key--white.is-active { fill: var(--live-bright); }
.keyboard .key--black.is-active { fill: var(--live); }
.keyboard .key:hover { fill: var(--live-bright); }
.keyboard .key__label {
  font-family: var(--font-mono); font-size: 13px; fill: var(--ink-dim);
}

/* — Selectores (chips tipográficos, sin cards) — */
.picker { margin: 18px 0; }
.picker__label {
  display: block; font-size: var(--t--2); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px;
}
.qgroup { margin: 14px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink-dim);
  padding: 6px 12px; font-size: var(--t--1); min-width: 40px;
  transition: border-color var(--d-2) var(--ease), color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink-dim); }
.chip.is-active {
  color: var(--paper); background: var(--live); border-color: var(--live);
}