/* Armá la escala — todo acotado a .clv-escala */

.clv-escala .ale-wrap{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:22px}

.clv-escala .ale-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 24px;border-top:1px solid var(--clv-line);border-bottom:1px solid var(--clv-line);padding-block:10px}
.clv-escala .ale-stats{display:flex;gap:16px;font-variant-numeric:tabular-nums;margin-left:auto}
.clv-escala .ale-stat{display:flex;flex-direction:column;align-items:flex-end}
.clv-escala .ale-stat b{font-family:var(--clv-serif);font-weight:600;font-size:22px;line-height:1}
.clv-escala .ale-stat span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--clv-ink-faint)}

.clv-escala .ale-settings{flex:1 1 280px}
.clv-escala .ale-settings summary{cursor:pointer;font-size:14px;color:var(--clv-ink-soft);list-style:none;display:flex;gap:8px;align-items:center;padding:4px 0}
.clv-escala .ale-settings summary::-webkit-details-marker{display:none}
.clv-escala .ale-settings summary::before{content:"+";font-family:var(--clv-mono);width:14px}
.clv-escala .ale-settings[open] summary::before{content:"–"}
.clv-escala .ale-setgrid{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.clv-escala .ale-setrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.clv-escala .ale-setrow > .ale-lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--clv-ink-faint);width:100%}
.clv-escala .ale-chip{border:1px solid var(--clv-line);background:var(--clv-surface);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--clv-ink)}
.clv-escala .ale-chip[aria-pressed="true"]{background:var(--clv-pink);border-color:var(--clv-pink);color:var(--clv-pink-deep);font-weight:600}
.clv-escala .ale-note-small{font-size:13px;color:var(--clv-ink-faint)}

.clv-escala .ale-game{background:var(--clv-surface);border:1px solid var(--clv-line);border-radius:16px;box-shadow:0 0 0 1px rgba(236,72,153,.06),0 18px 40px -24px rgba(236,72,153,.35);padding:20px;display:flex;flex-direction:column;gap:18px}
.clv-escala .ale-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--clv-teal);margin:0 0 4px}
.clv-escala .ale-prompt{font-family:var(--clv-serif);font-weight:600;font-size:clamp(24px,5.2vw,34px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.clv-escala .ale-prompt .ale-tonic{color:var(--clv-pink)}
.clv-escala .ale-staffbox{overflow-x:auto;margin-inline:-6px}
.clv-escala .ale-staffbox svg{display:block;width:100%;min-width:340px;height:auto}

.clv-escala .ale-slots{display:grid;gap:6px}
.clv-escala .ale-slot{border:1.5px solid var(--clv-line);background:var(--clv-bg);border-radius:10px;padding:6px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;color:var(--clv-ink)}
.clv-escala .ale-slot .ale-deg{font-family:var(--clv-mono);font-size:11px;color:var(--clv-ink-faint)}
.clv-escala .ale-slot .ale-nm{font-weight:500;font-size:clamp(14px,3.6vw,19px);min-height:1.3em;white-space:nowrap}
.clv-escala .ale-slot .ale-fix{font-size:12px;color:var(--clv-ok);min-height:1em;white-space:nowrap}
.clv-escala .ale-slot.is-locked{background:transparent;border-style:dashed;cursor:default}
.clv-escala .ale-slot.is-locked .ale-nm{color:var(--clv-ink-faint)}
.clv-escala .ale-slot.is-active{border-color:var(--clv-pink);box-shadow:0 0 0 3px var(--clv-pink-soft)}
.clv-escala .ale-slot.is-ok{border-color:var(--clv-ok);background:var(--clv-ok-soft)}
.clv-escala .ale-slot.is-bad{border-color:var(--clv-bad);background:var(--clv-bad-soft)}
.clv-escala .ale-slot.is-bad .ale-nm{text-decoration:line-through;text-decoration-color:var(--clv-bad)}

.clv-escala .ale-pad{display:flex;flex-direction:column;gap:8px}
.clv-escala .ale-accrow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.clv-escala .ale-letrow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.clv-escala .ale-key{border:1px solid var(--clv-line);background:var(--clv-bg);color:var(--clv-ink);border-radius:9px;padding:10px 0;font-size:16px;font-weight:700;min-width:0}
.clv-escala .ale-key:hover{border-color:var(--clv-pink)}
.clv-escala .ale-accrow .ale-key{padding:6px 0;font-weight:400}
.clv-escala .ale-accrow .ale-key[aria-pressed="true"]{background:var(--clv-pink-soft);border-color:var(--clv-pink);color:var(--clv-pink)}
.clv-escala .ale-accrow .ale-key .clv-acc{font-size:20px}
.clv-escala .ale-padhint{font-size:13px;color:var(--clv-ink-faint)}
.clv-escala .ale-pad[aria-disabled="true"]{opacity:.45;pointer-events:none}

.clv-escala .ale-actions{display:flex;flex-wrap:wrap;gap:8px}
.clv-escala .ale-btn{border:1px solid var(--clv-line);background:var(--clv-surface);color:var(--clv-ink);border-radius:10px;padding:10px 14px;font-weight:700;font-size:15px}
.clv-escala .ale-btn:hover{border-color:var(--clv-pink)}
.clv-escala .ale-btn.ale-primary{background:var(--clv-pink);border-color:var(--clv-pink);color:var(--clv-pink-deep)}
.clv-escala .ale-btn.ale-primary:hover{background:var(--clv-pink-hover)}
.clv-escala .ale-btn.ale-help{border-color:var(--clv-pink);color:var(--clv-pink)}
.clv-escala .ale-btn:disabled{opacity:.4}
.clv-escala .ale-spacer{flex:1}

.clv-escala .ale-feedback{border-radius:10px;padding:12px 14px;font-size:15px}
.clv-escala .ale-feedback.is-ok{background:var(--clv-ok-soft);border-left:4px solid var(--clv-ok)}
.clv-escala .ale-feedback.is-bad{background:var(--clv-bad-soft);border-left:4px solid var(--clv-bad)}
.clv-escala .ale-feedback p + p{margin-top:6px}

.clv-escala .ale-hints{display:flex;flex-direction:column;gap:10px}
.clv-escala .ale-hint{border:1px solid var(--clv-pink-soft);background:var(--clv-bg);border-radius:10px;padding:12px 14px}
.clv-escala .ale-hint h3{margin:0 0 6px;font-family:var(--clv-sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--clv-pink);font-weight:700}
.clv-escala .ale-hint p + p{margin-top:6px}
.clv-escala .ale-steps{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 2px}
.clv-escala .ale-st{font-family:var(--clv-mono);font-size:13px;padding:3px 8px;border-radius:6px;border:1px solid var(--clv-line);background:var(--clv-surface)}
.clv-escala .ale-st.is-semi{background:var(--clv-teal);border-color:var(--clv-teal);color:var(--clv-teal-ink);font-weight:700}
.clv-escala .ale-st.is-aug{border-color:var(--clv-teal);color:var(--clv-teal)}

.clv-escala .ale-ref h2{font-size:28px;margin:8px 0 4px}
.clv-escala .ale-ref > p{margin:0 0 14px;color:var(--clv-ink-soft);font-size:15px}
.clv-escala .ale-tablewrap{overflow-x:auto;border:1px solid var(--clv-line);border-radius:12px;background:var(--clv-surface)}
.clv-escala .ale-tablewrap table{width:100%;min-width:560px;font-size:14px}
.clv-escala .ale-tablewrap th,
.clv-escala .ale-tablewrap td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--clv-line);vertical-align:top;color:var(--clv-ink-soft)}
.clv-escala .ale-tablewrap td b{color:var(--clv-ink)}
.clv-escala .ale-tablewrap tr:last-child td{border-bottom:0}
.clv-escala .ale-tablewrap th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--clv-ink-faint);font-weight:700}
.clv-escala td.ale-pat{font-family:var(--clv-mono);font-size:13px;white-space:nowrap;color:var(--clv-ink)}
.clv-escala td.ale-pat em{font-style:normal;color:var(--clv-teal);font-weight:700}

.clv-escala .ale-refgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px;align-items:start}
@media (max-width:640px){.clv-escala .ale-refgrid{grid-template-columns:1fr}}
.clv-escala .ale-circle svg{width:100%;max-width:360px;height:auto;display:block;margin:0 auto}
.clv-escala .ale-circle figcaption{font-size:13px;color:var(--clv-ink-faint);text-align:center;margin-top:6px}
.clv-escala .ale-hacks{display:flex;flex-direction:column;gap:12px}
.clv-escala .ale-hacks li{border-left:3px solid var(--clv-pink);padding-left:12px}
.clv-escala .ale-hacks b{display:block;font-family:var(--clv-serif);font-weight:600;font-size:16px}
.clv-escala .ale-hacks span{font-size:14px;color:var(--clv-ink-soft)}
.clv-escala .ale-cof-key{cursor:pointer}
.clv-escala .ale-cof-key:hover .ale-cof-bg{fill:var(--clv-pink-soft)}

@media (prefers-reduced-motion: no-preference){
  .clv-escala .ale-slot,.clv-escala .ale-chip,.clv-escala .ale-key{transition:border-color .15s,background .15s,box-shadow .15s}
}