/* ===========================================================================
   Acordes — the chord laboratory of the Ejercicios module.
   Loaded after music-lab.css and practice-lab.css: it reuses the player
   shell (.ml-pl__*), the segmented controls, the fretboard SVG classes and
   the drum grid, and only adds what a chord needs — the instrument tabs, the
   chord picker, the chord box, the keyboard. No colour is
   defined here; everything composes the shared tokens (--ml-root-* for the
   notes, the accents for the rest), so both themes just work.
   =========================================================================== */

/* ── Exercise select: the whole category in one field ─────────────────── */

.ml-ch__field--exercise { flex: 1 1 100%; }

/* ── Instrument selector: the song page's pills, inline and with icons ── */

.ml-ch__instr-bar {
  position: static; padding: 0; margin: 0; max-width: none;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.ml-ch__instr-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; }
.ml-ch__instr-tab svg { flex: none; }
.ml-ch__instr-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Chord and key picker ─────────────────────────────────────────────── */

/* The flex/grid displays above would beat the UA's [hidden] rule. */
.ml-pl__field[hidden], .ml-seg[hidden], .ml-ch__row[hidden] { display: none; }

.ml-ch__field--chord { flex: 1 1 260px; min-width: 0; }
.ml-ch__chordpick { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
.ml-ch__chordpick .ml-input { width: 100%; min-width: 0; }
.ml-ch__field--search { flex: 1 1 200px; min-width: 0; }
.ml-ch__field--search .ml-input { width: 100%; }
.ml-ch__field-hint { margin-top: 2px; }
.ml-input:disabled { opacity: .55; cursor: not-allowed; }
.ml-input[aria-invalid="true"] { border-color: var(--ml-coral); }
.ml-ch__err { color: var(--ml-coral); margin-top: 4px; }
.ml-ch__err[hidden] { display: none; }
.ml-ch__field-hint[hidden] { display: none; }
.ml-ch__scale-line { flex: 1 1 100%; margin: 2px 0 0; font-size: 13px; color: var(--ml-muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.ml-ch__scale-line strong { color: var(--ml-text); font-family: "Space Grotesk", sans-serif; }
.ml-ch__steps { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--ml-dim); }

/* "Cómo suena" lives in the deck, under the tools. */
.ml-ch__style { gap: 6px; }
.ml-ch__style .ml-seg { align-self: flex-start; }

/* ── Stage: the instrument ────────────────────────────────────────────── */

.ml-ch__stage-title { font-size: 15px; margin: 0; letter-spacing: .01em; }
.ml-ch__stage-title .ml-chord { font-size: 1.1em; }
.ml-ch__stage-body { display: flex; flex-direction: column; gap: 14px; min-height: 160px; }
.ml-ch__stage-body[data-view="neck"] .ml-pl__fretboard, .ml-ch__stage-body[data-view="scale"] .ml-pl__fretboard { margin-top: 2px; }

/* A stage row: the main diagram plus its side list. */
.ml-ch__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 640px) { .ml-ch__row--split { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } }
.ml-ch__side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ml-ch__side h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-dim); margin: 0; }

/* Voicing / position / groove switchers: a wrapping row of chips. */
.ml-ch__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-ch__chips .ml-chip { cursor: pointer; font-family: inherit; }
.ml-ch__chips .ml-chip.is-active { background: var(--ml-grad); color: #fff; border-color: transparent; }
.ml-ch__chips .ml-chip:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; }
.ml-ch__omit { font-size: 12px; color: var(--ml-dim); margin: 0; }

/* The three tips tabs wrap on a narrow phone instead of overflowing the card. */
.ml-ch .ml-pl__tips-tabs { flex-wrap: wrap; }

/* Tone legend: the chord tones as coloured pills (1 · C, 3 · E…). */
.ml-ch__tones { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* The pill's colour is the note's (ml-root-*): the disc takes it, the text stays readable. */
.ml-ch__tone { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ml-line); background: var(--ml-bg-2); font-size: 12.5px; }
.ml-ch__tone > span { color: var(--ml-text); }
.ml-ch__tone b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: currentColor; font: 700 11px Inter, sans-serif; }
/* The text on a note-coloured disc: the page background flips per theme (dark on the bright night swatches, light on the dark day ones). */
.ml-ch__tone b span { color: var(--ml-bg); }
.ml-ch__tone.is-active { border-color: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent); }

/* Chord box (the classic 6×5 diagram), coloured by note. */
.ml-cd { width: 100%; max-width: 300px; height: auto; display: block; color: var(--ml-text); }
.ml-cd--mini { max-width: 120px; }
.ml-cd__nut { fill: var(--ml-text); }
.ml-cd__pos { fill: var(--ml-muted); font: 700 10px "Space Grotesk", sans-serif; }
.ml-cd__line { stroke: var(--ml-line-strong); stroke-width: 1; }
.ml-cd__string { stroke: color-mix(in srgb, var(--ml-muted) 70%, transparent); stroke-width: 1; }
.ml-cd__mark { fill: var(--ml-muted); font: 700 10px Inter, sans-serif; }
.ml-cd__mark--mute { fill: var(--ml-dim); }
.ml-cd__barre { fill: currentColor; opacity: .35; }
.ml-cd__dot { color: var(--ml-muted); }
.ml-cd__disc { fill: currentColor; stroke: var(--ml-bg); stroke-width: 1.2; }
.ml-cd__dot.is-root .ml-cd__disc { stroke: var(--ml-text); stroke-width: 2; }
.ml-cd__finger { fill: var(--ml-bg); font: 700 8px Inter, sans-serif; }
.ml-cd__name { fill: var(--ml-text); font: 700 8.5px "Space Grotesk", sans-serif; }
.ml-cd__sname { fill: var(--ml-dim); font: 600 7.5px Inter, sans-serif; }
.ml-cd__dot.is-active .ml-cd__disc { stroke: var(--ml-coral); stroke-width: 2.4; }
.ml-cd__dot.ml-root-c { color: var(--ml-root-c); } .ml-cd__dot.ml-root-cs { color: var(--ml-root-cs); }
.ml-cd__dot.ml-root-d { color: var(--ml-root-d); } .ml-cd__dot.ml-root-ds { color: var(--ml-root-ds); }
.ml-cd__dot.ml-root-e { color: var(--ml-root-e); } .ml-cd__dot.ml-root-f { color: var(--ml-root-f); }
.ml-cd__dot.ml-root-fs { color: var(--ml-root-fs); } .ml-cd__dot.ml-root-g { color: var(--ml-root-g); }
.ml-cd__dot.ml-root-gs { color: var(--ml-root-gs); } .ml-cd__dot.ml-root-a { color: var(--ml-root-a); }
.ml-cd__dot.ml-root-as { color: var(--ml-root-as); } .ml-cd__dot.ml-root-b { color: var(--ml-root-b); }

/* TAB strip for the current voicing. */
.ml-ch__tab { font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ml-muted); display: grid; gap: 2px; margin: 0; }
.ml-ch__tab span { display: flex; gap: 6px; }
.ml-ch__tab b { color: var(--ml-text); }

/* Keyboard, two octaves, notes coloured on the keys. */
.ml-kb { width: 100%; height: auto; display: block; color: var(--ml-text); }
.ml-kb--mini { max-width: 160px; }
.ml-kb__white { fill: var(--ml-key-white); stroke: var(--ml-line-strong); stroke-width: .8; }
.ml-kb__black { fill: var(--ml-key-black); stroke: var(--ml-line-strong); stroke-width: .8; }
.ml-kb__label { fill: var(--ml-dim); font: 600 7px Inter, sans-serif; }
.ml-kb__key.is-on .ml-kb__white, .ml-kb__key.is-on .ml-kb__black { fill: color-mix(in srgb, currentColor 32%, var(--ml-key-white)); }
.ml-kb__key.is-on.is-bass .ml-kb__white { fill: color-mix(in srgb, currentColor 18%, var(--ml-key-white)); }
.ml-kb__dot { fill: currentColor; stroke: var(--ml-bg); stroke-width: 1; }
.ml-kb__key.is-root .ml-kb__dot { stroke: var(--ml-text); stroke-width: 1.8; }
.ml-kb__key.is-scale:not(.is-on) .ml-kb__dot { opacity: .35; }
.ml-kb__text { fill: var(--ml-bg); font: 700 7.5px Inter, sans-serif; }
.ml-kb__note { fill: var(--ml-text); font: 700 7.5px "Space Grotesk", sans-serif; }
.ml-kb__key.is-active .ml-kb__dot { stroke: var(--ml-coral); stroke-width: 2.2; }
.ml-kb__key.ml-root-c { color: var(--ml-root-c); } .ml-kb__key.ml-root-cs { color: var(--ml-root-cs); }
.ml-kb__key.ml-root-d { color: var(--ml-root-d); } .ml-kb__key.ml-root-ds { color: var(--ml-root-ds); }
.ml-kb__key.ml-root-e { color: var(--ml-root-e); } .ml-kb__key.ml-root-f { color: var(--ml-root-f); }
.ml-kb__key.ml-root-fs { color: var(--ml-root-fs); } .ml-kb__key.ml-root-g { color: var(--ml-root-g); }
.ml-kb__key.ml-root-gs { color: var(--ml-root-gs); } .ml-kb__key.ml-root-a { color: var(--ml-root-a); }
.ml-kb__key.ml-root-as { color: var(--ml-root-as); } .ml-kb__key.ml-root-b { color: var(--ml-root-b); }
.ml-ch__hands { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ml-muted); margin: 0; }
.ml-ch__hands b { color: var(--ml-text); font-weight: 600; }

/* Fretboard extras: the root gets a ring, scale notes outside the chord dim. */
.ml-fb__dot.is-root .ml-fb__disc { stroke-width: 3.5; }
.ml-fb__dot.is-dim { opacity: .45; }
.ml-fb__dot.is-dim .ml-fb__disc { fill: var(--ml-bg-2); stroke-dasharray: 3 2; }

/* Drum stage: the groove grid and the bars it sits over. */
.ml-ch__bars { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ml-ch__bar { flex: 1 0 96px; display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--ml-line); background: var(--ml-bg-2); }
.ml-ch__bar small { color: var(--ml-dim); font-size: 11px; }
.ml-ch__bar strong { font: 700 1.05rem "Space Grotesk", sans-serif; }
.ml-ch__bar.is-active { border-color: transparent; background: var(--ml-grad); }
.ml-ch__bar.is-active small, .ml-ch__bar.is-active strong { color: #fff; }
.ml-ch__bar.is-change::after { content: "cambio"; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-coral); }
.ml-ch__bar.is-active.is-change::after { color: rgba(255, 255, 255, .85); }
.ml-drumgrid--stage .ml-cell { min-width: 26px; height: 32px; }
.ml-drumgrid--stage .ml-cell.is-beat { border-color: var(--ml-line-strong); }
.ml-ch__count { flex: 1; min-width: 26px; text-align: center; font: 600 11px Inter, sans-serif; color: var(--ml-dim); }
.ml-drumgrid--mini { gap: 4px; }
.ml-drumgrid--mini .ml-drumrow__name { width: 44px; font-size: 10.5px; }
.ml-drumgrid--mini .ml-cell { min-width: 12px; height: 14px; border-radius: 4px; }

/* ── Progression cells: wider than a single note ─────────────────────── */

.ml-pl__cell--chord { width: auto; min-width: 84px; flex: 0 0 auto; padding: 10px 12px; }
.ml-pl__cell--chord .ml-pl__cell-note { font-size: 1.15rem; }
.ml-pl__cell-deg { font: 700 12px "Space Grotesk", sans-serif; color: var(--ml-muted); }
.ml-pl__cell.is-active .ml-pl__cell-deg { color: #fff; }
.ml-pl__cell.is-next { border-color: color-mix(in srgb, var(--ml-coral) 60%, transparent); }

/* ── Información card ─────────────────────────────────────────────────── */

.ml-ch__info, .ml-ch__others { border: 1px solid var(--ml-line); border-radius: 16px; background: var(--ml-surface); padding: 14px 16px; }
.ml-ch__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; margin: 0; }
.ml-ch__facts div { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--ml-line); padding-bottom: 8px; }
.ml-ch__facts dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-dim); font-weight: 600; }
.ml-ch__facts dd { margin: 0; color: var(--ml-text); font-weight: 600; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
.ml-ch__note { font: 700 15px "Space Grotesk", sans-serif; }
.ml-ch__iv { font-weight: 500; font-size: 13px; color: var(--ml-muted); }
.ml-ch__iv b { color: var(--ml-text); }
.ml-ch__reason { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.ml-ch__to-scale { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 40px; font-weight: 600; font-size: 13.5px; color: var(--ml-pink); text-decoration: none; }
.ml-ch__to-scale:hover { text-decoration: underline; }
.ml-ch__to-scale:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; border-radius: 6px; }
.ml-ch__to-scale[hidden] { display: none; }
.ml-ch__family-tip { color: var(--ml-muted); font-size: 13.5px; margin: 0 0 10px; }
.ml-ch__mistakes { border-top: 1px solid var(--ml-line); padding-top: 10px; }

/* The key's diatonic chords, as buttons that load the chord. */
.ml-ch__diatonic { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.ml-ch__deg { display: grid; gap: 2px; justify-items: center; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--ml-line); background: var(--ml-bg-2); cursor: pointer; font-family: inherit; color: var(--ml-text); }
.ml-ch__deg:hover { border-color: color-mix(in srgb, var(--ml-pink) 50%, transparent); }
.ml-ch__deg:disabled { cursor: default; opacity: .8; }
.ml-ch__deg.is-current { border-color: transparent; box-shadow: 0 0 0 2px var(--ml-pink); }
.ml-ch__deg-num { font: 700 12px "Space Grotesk", sans-serif; color: var(--ml-muted); }
.ml-ch__deg strong { font-size: 15px; }
.ml-ch__deg small { font-size: 10.5px; color: var(--ml-dim); }

/* ── Ver en otros instrumentos ────────────────────────────────────────── */

.ml-ch__others-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ml-ch__other { display: grid; gap: 8px; justify-items: center; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--ml-line); background: var(--ml-bg-2); cursor: pointer; font-family: inherit; color: var(--ml-text); text-align: center; }
.ml-ch__other:hover { border-color: color-mix(in srgb, var(--ml-pink) 50%, transparent); transform: translateY(-1px); }
.ml-ch__other:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; }
.ml-ch__other strong { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ml-ch__other small { color: var(--ml-muted); font-size: 11.5px; }
.ml-ch__other .ml-fb { min-width: 0; }

/* ── Catalog page: the Acordes block ──────────────────────────────────── */

.ml-ch-home { margin: 0 0 26px; }
.ml-ch-home .ml-pl__seq-head h2 { font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--ml-text); }
.ml-ch-home .ml-pl__seq-sub { text-decoration: none; }
.ml-ch-home__row { margin-bottom: 0; }
.ml-ch-home__digit { font-size: 1.05rem; margin: 0 0 12px; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Finger-sized chips and small segmented buttons. */
  .ml-ch__chips .ml-chip { min-height: 40px; padding: 9px 13px; }
  .ml-ch .ml-seg--sm .ml-seg__b { min-height: 40px; padding: 9px 12px; }
  .ml-ch__instr-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-ch__chordpick { grid-template-columns: 84px minmax(0, 1fr); }
  .ml-ch__facts { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .ml-ch__instr-tab { padding: 10px 6px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ml-ch__other { transition: none; }
}