.tu { --tu-color: var(--muted); display: grid; gap: 22px; }
.tu[data-state='flat'], .tu[data-state='sharp'] { --tu-color: var(--err); }
.tu[data-state='tune'] { --tu-color: var(--ok); }
.tu .kv-msg { margin: 0; }
.tu-inst { max-width: 420px; }
.tu-inst .kv-input { width: 100%; max-width: none; }

/* Cordas */
.tu-strings-wrap { display: grid; gap: 8px; }
.tu-strings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tu-auto { align-self: stretch; }
.tu-str {
  position: relative; display: grid; justify-items: center; min-width: 56px; padding: 6px 10px 5px;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.tu-str:hover { background: var(--sunken); }
.tu-str[aria-pressed='true'] { background: var(--ink); color: var(--surface); }
.tu-str-note { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.tu-str-n { font-size: 0.78rem; font-weight: 650; opacity: 0.75; }
.tu-str.is-tuned::after {
  content: '✓'; position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 0.75rem; font-weight: 800;
}
.tu-hint { margin: 0; }

/* Mostrador */
.tu-stage { display: grid; gap: 12px; justify-items: center; text-align: center; }
.tu-meter { width: min(100%, 460px); }
.tu-gauge { display: block; width: 100%; height: auto; overflow: visible; }
.tu-zone { fill: var(--ok); opacity: 0.22; }
.tu[data-state='tune'] .tu-zone { opacity: 0.45; }
.tu-tick { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.tu-tick--big { stroke: var(--ink); stroke-width: 3.5; }
.tu-mark { fill: var(--muted); font-size: 22px; font-weight: 800; text-anchor: middle; }
.tu-needle { transform-box: view-box; transform-origin: 160px 166px; transition: transform 0.14s ease-out; }
.tu-needle line { stroke: var(--tu-color); stroke-width: 5; stroke-linecap: round; }
.tu-needle circle { fill: var(--tu-color); }
.tu[data-state='idle'] .tu-needle, .tu[data-state='listen'] .tu-needle { opacity: 0.35; }

.tu-readout { display: grid; gap: 4px; justify-items: center; }
.tu-readout p { margin: 0; }
.tu-note { font-size: clamp(3.4rem, 2.4rem + 6vw, 5rem); font-weight: 800; line-height: 1; color: var(--tu-color); }
.tu[data-state='idle'] .tu-note, .tu[data-state='listen'] .tu-note { color: var(--line); }
.tu-note sub { font-size: 0.36em; font-weight: 700; vertical-align: baseline; margin-left: 2px; color: var(--muted); }
.tu-string { min-height: 1.4em; font-weight: 650; color: var(--muted); }
.tu-numbers { display: flex; gap: 18px; justify-content: center; min-height: 1.4em; font-variant-numeric: tabular-nums; color: var(--muted); }
.tu-status { font-size: 1.2rem; font-weight: 750; color: var(--tu-color); min-height: 1.5em; }
.tu[data-state='idle'] .tu-status, .tu[data-state='listen'] .tu-status { color: var(--ink); font-weight: 650; }
.tu-stage .kv-btn--big { min-width: 240px; margin-top: 4px; }
.tu-privacy { margin: 0; max-width: 460px; }

/* Ajustes */
.tu-settings { border-top: 2px solid var(--line); padding-top: 18px; }
.tu-settings summary { cursor: pointer; font-size: 1.1rem; font-weight: 720; padding: 4px 0; }
.tu-settings-body { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; align-items: end; }
.tu-num { width: 110px; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }