/* guitarra.css — Lámina VII: posiciones e inversiones en el mástil. */

.gtoggles { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 20px; }
.gtoggles .picker { margin: 6px 0; }

.voicings { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.voicing {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-sunk);
  padding: 12px 14px;
}
.voicing__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.voicing__sym { font-family: var(--font-display); font-size: var(--t-0); color: var(--ink); }
.voicing__bass { font-size: var(--t--2); color: var(--ink-dim); flex: 1; }
.voicing__bass b { color: var(--ink); }
.voicing__play {
  background: var(--live); color: var(--paper); border: none; border-radius: 50%;
  width: 34px; height: 34px; font-size: var(--t--1); transition: background var(--d-2) var(--ease);
}
.voicing__play:hover { background: var(--live-bright); }

/* — Diagrama de mástil — */
.fretboard { width: 100%; height: auto; }
.fb__fret { stroke: var(--line); stroke-width: 1; }
.fb__nut { stroke: var(--ink); stroke-width: 3; }
.fb__string { stroke: var(--line); stroke-width: 1; }
.fb__dot { fill: var(--live); }
.fb__dot--bass { fill: var(--ink); }
.fb__dotname { font-family: var(--font-mono); font-size: 10px; fill: var(--paper); }
.fb__open { fill: none; stroke: var(--ink-dim); stroke-width: 1.5; }
.fb__open--bass { stroke: var(--ink); stroke-width: 2.5; } /* el bajo al aire también dice la inversión */
.fb__mute { font-family: var(--font-mono); font-size: 13px; fill: var(--ink-dim); }
.fb__notelbl { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-dim); }
.fb__fretno { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-dim); }

.gt__caveat { margin-top: 22px; font-size: var(--t--2); font-style: italic; max-width: 66ch; }

/* En móvil el diagrama se pinta a ~0,9×: letra un punto mayor para no bajar de ~10 px reales (va AL FINAL: la
   regla base declarada después ganaría la cascada). */
@media (max-width: 640px) { .voicing { padding: 10px; } .fb__dotname, .fb__fretno, .fb__notelbl { font-size: 12px; } }