/* guitar.css — diagramas de guitarra (acordes + diapasón)
   Madera oscura, trastes sepia, cuerdas hueso: el aire del cartel.
   Los ROLES usan los mismos colores que el piano (tónica/seguras/paso). */

/* ── Diapasón (escala) ── */
.gtr-fret { width: 100%; height: auto; display: block; user-select: none; }
.gtr-wood { fill: #1d1611; stroke: var(--west-sepia-dim); stroke-width: 1; }
.gtr-fretline { stroke: #4a4038; stroke-width: 2; }
.gtr-nut { stroke: var(--west-bone); stroke-width: 5; }
.gtr-inlay { fill: rgba(233, 223, 199, 0.16); }
.gtr-str { stroke: var(--west-sepia); stroke-width: 1; opacity: 0.75; }
.gtr-str-0 { stroke-width: 2.4; } .gtr-str-1 { stroke-width: 2.1; }
.gtr-str-2 { stroke-width: 1.8; } .gtr-str-3 { stroke-width: 1.5; }
.gtr-str-4 { stroke-width: 1.2; } .gtr-str-5 { stroke-width: 1; }
.gtr-strname, .gtr-fretnum {
  font-family: var(--font-mono), monospace; font-size: 11px;
  fill: var(--ink-composer-faint);
}

/* Notas por rol — la misma leyenda que el piano */
.gtr-note circle { stroke: rgba(0, 0, 0, 0.45); stroke-width: 1; }
.gtr-root  circle { fill: var(--fn-tonic-dark); }
.gtr-safe  circle { fill: var(--fn-subdominant-dark); }
.gtr-scale circle { fill: var(--fn-dominant-dark); }
.gtr-notelbl {
  font-family: var(--font-mono), monospace; font-size: 8.5px; font-weight: 700;
  fill: var(--bg-composer); pointer-events: none;
}
.gtr-note.gtr-hl circle {
  stroke: var(--accent); stroke-width: 3;
  filter: drop-shadow(0 0 6px var(--accent-primary-glow));
}
.gtr-note:hover circle { filter: brightness(1.15); }

/* ── Diagrama de acorde (caja) ── */
.gtr-chord { width: 100%; max-width: 190px; height: auto; display: block; }
.gtr-chord .gtr-string { stroke: var(--west-sepia); stroke-width: 1.2; opacity: 0.8; }
.gtr-chord .gtr-fretline { stroke: #4a4038; stroke-width: 1.6; }
.gtr-chord .gtr-nut { stroke: var(--west-bone); stroke-width: 5; }
.gtr-dot { fill: var(--accent); stroke: rgba(0, 0, 0, 0.4); stroke-width: 1; }
.gtr-barre { fill: var(--accent); stroke: rgba(0, 0, 0, 0.4); stroke-width: 1; opacity: 0.92; }
.gtr-open { fill: none; stroke: var(--west-bone); stroke-width: 1.6; }
.gtr-mute { font-family: var(--font-mono), monospace; font-size: 12px; fill: var(--ink-composer-faint); }
.gtr-baselabel { font-family: var(--font-mono), monospace; font-size: 11px; fill: var(--west-sepia); }
.gtr-chordname {
  font-family: 'Permanent Marker', var(--font-display), cursive; font-size: 15px;
  fill: var(--west-bone);
}

/* Layout en páginas de acorde */
.gtr-forms { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: flex-start; }
.gtr-form { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gtr-form-click { cursor: pointer; border-radius: 12px; padding: 8px 10px; transition: background-color .15s ease, transform .15s ease; }
.gtr-form-click:hover { background: rgba(233, 223, 199, 0.05); transform: translateY(-2px); }
.gtr-formname { font-size: 11px; color: var(--ink-composer-faint); font-style: italic; }

/* Diapasón dentro de la consola (reemplaza al piano cuando 🎸) */
.jam-fretboard { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
.jam-fretboard .gtr-fret { max-height: 100%; }
.tocala-app.inst-guitar #improv-piano-container { display: none !important; }
.tocala-app:not(.inst-guitar) .jam-fretboard { display: none; }