/* Adivina el intervalo — todo acotado a .clv-intervalos */

.clv-intervalos .iv-app{max-width:600px;margin:0 auto}

.clv-intervalos .iv-levelbar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1.25rem}
.clv-intervalos .iv-lvl{font-size:13px;font-weight:600;padding:10px 6px;border:1px solid var(--clv-line);border-radius:var(--clv-radius);background:var(--clv-surface);color:var(--clv-ink-soft);transition:all .14s}
.clv-intervalos .iv-lvl:hover{border-color:var(--clv-line-strong)}
.clv-intervalos .iv-lvl.is-active{background:var(--clv-pink);border-color:var(--clv-pink);color:var(--clv-pink-deep)}

.clv-intervalos .iv-scorebar{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--clv-ink-soft);margin-bottom:1.25rem}
.clv-intervalos .iv-scorebar b{font-weight:700;color:var(--clv-ink);margin-left:4px;font-variant-numeric:tabular-nums}
.clv-intervalos .iv-scorebar b.iv-ok{color:var(--clv-teal)}

.clv-intervalos .iv-card{background:var(--clv-surface);border:1px solid var(--clv-line);border-radius:var(--clv-radius-lg);padding:1.6rem 1.25rem;text-align:center;margin-bottom:1.25rem}
.clv-intervalos .iv-qlabel{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--clv-teal);font-weight:600;margin-bottom:12px}
.clv-intervalos .iv-notes{font-family:var(--clv-serif);font-size:34px;font-weight:600;letter-spacing:-.01em;color:var(--clv-ink);margin-bottom:14px;white-space:pre}
.clv-intervalos .iv-link{display:block;margin:12px auto 0;font-size:12px;font-weight:600;background:transparent;border:none;padding:4px;color:var(--clv-teal);text-decoration:underline;text-underline-offset:3px}
.clv-intervalos .iv-link:hover{color:var(--clv-ink)}
.clv-intervalos .iv-score-wrap{margin-top:14px;display:flex;justify-content:center}
.clv-intervalos .iv-staff{background:var(--clv-paper);border-radius:8px;padding:6px;max-width:100%;height:auto}

.clv-intervalos .iv-block{margin-bottom:1rem}
.clv-intervalos .iv-blabel{font-size:13px;color:var(--clv-ink-soft);margin-bottom:6px;font-weight:500}
.clv-intervalos .iv-opts{display:grid;gap:8px}
.clv-intervalos .iv-deg{grid-template-columns:repeat(auto-fit,minmax(58px,1fr))}
.clv-intervalos .iv-qual{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.clv-intervalos .iv-dir{grid-template-columns:repeat(2,1fr)}
.clv-intervalos .iv-opt{font-size:13px;font-weight:600;padding:10px 4px;border:1px solid var(--clv-line);border-radius:var(--clv-radius);background:var(--clv-surface);color:var(--clv-ink);transition:all .14s}
.clv-intervalos .iv-opt:hover{border-color:var(--clv-line-strong)}
.clv-intervalos .iv-opt.is-sel{background:var(--clv-raised);border-color:var(--clv-pink);color:var(--clv-pink-light)}
.clv-intervalos .iv-opt:disabled{opacity:.6}

.clv-intervalos .iv-actions{display:flex;gap:8px;margin:1.25rem 0 1rem}
.clv-intervalos .iv-primary{flex:1;font-size:14px;font-weight:700;padding:12px;border:none;border-radius:var(--clv-radius);background:var(--clv-pink);color:var(--clv-pink-deep);transition:all .14s}
.clv-intervalos .iv-primary:hover{background:var(--clv-pink-hover);transform:translateY(-1px)}
.clv-intervalos .iv-primary:active{transform:none}

.clv-intervalos .iv-ghost{font-size:13px;font-weight:600;padding:8px 16px;border:1px solid var(--clv-line);border-radius:var(--clv-radius);background:transparent;color:var(--clv-ink-soft);transition:all .14s}
.clv-intervalos .iv-ghost:hover{border-color:var(--clv-teal);color:var(--clv-teal)}
.clv-intervalos .iv-ico{font-size:11px}

.clv-intervalos .iv-feedback{text-align:center;font-size:14px;min-height:24px;margin-bottom:.9rem;font-weight:600}
.clv-intervalos .iv-feedback .iv-ok{color:var(--clv-ok)}
.clv-intervalos .iv-feedback .iv-bad{color:var(--clv-bad)}
.clv-intervalos .iv-feedback .iv-warn{color:var(--clv-warn)}
.clv-intervalos .iv-feedback .iv-aside{color:var(--clv-ink-faint);font-weight:400}

.clv-intervalos .iv-resources{margin-top:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.clv-intervalos .iv-piano-wrap{width:100%;margin-top:.4rem;background:var(--clv-surface);border:1px solid var(--clv-line);border-radius:var(--clv-radius-lg);padding:1rem}
.clv-intervalos .iv-piano-hint{font-size:12px;color:var(--clv-ink-soft);text-align:center;margin-bottom:12px}
.clv-intervalos .iv-piano{position:relative;height:130px;max-width:540px;margin:0 auto}
.clv-intervalos .iv-wkey{position:absolute;top:0;height:130px;border:1px solid #b8aede;border-radius:0 0 5px 5px;background:var(--clv-paper)}
.clv-intervalos .iv-wkey.is-mark{background:var(--clv-pink);border-color:var(--clv-pink)}
.clv-intervalos .iv-wkey .iv-lab{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:11px;color:#6b6390}
.clv-intervalos .iv-wkey.is-mark .iv-lab{color:var(--clv-pink-deep);font-weight:700}
.clv-intervalos .iv-bkey{position:absolute;top:0;height:80px;z-index:2;border-radius:0 0 4px 4px;background:#2b2350}
.clv-intervalos .iv-bkey.is-mark{background:var(--clv-pink);box-shadow:0 0 0 2px var(--clv-pink-light)}

.clv-intervalos .iv-table-wrap{width:100%;margin-top:.4rem;background:var(--clv-surface);border:1px solid var(--clv-line);border-radius:var(--clv-radius-lg);padding:.5rem 1rem 1rem}
.clv-intervalos .iv-table{width:100%;font-size:13px}
.clv-intervalos .iv-table th{text-align:left;color:var(--clv-ink-faint);font-weight:600;font-size:12px;padding:9px 6px;border-bottom:1px solid var(--clv-line);text-transform:uppercase;letter-spacing:.05em}
.clv-intervalos .iv-table td{padding:8px 6px;border-bottom:1px solid var(--clv-line);color:var(--clv-ink-soft)}
.clv-intervalos .iv-table tr:last-child td{border-bottom:none}
.clv-intervalos .iv-table td:first-child{color:var(--clv-ink);font-weight:600}
.clv-intervalos .iv-table .iv-dist{color:var(--clv-teal)}