:root{
  --f0:var(--mx-fondo); --f1:var(--mx-fondo); --f2:var(--mx-sup); --l1:var(--mx-linea); --l2:var(--mx-linea-2);
  --t1:var(--mx-texto); --t2:var(--mx-sec); --t3:var(--mx-apagado);
  --sans:var(--mx-sans);
  --mono:var(--mx-sans);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html, body{margin:0;height:100%;background:var(--f0);color:var(--t1);font:13px/1.35 var(--sans);-webkit-font-smoothing:antialiased}
button, input, textarea{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:1.5px solid var(--t1);outline-offset:2px}

.app{display:grid;grid-template-columns:minmax(0,1fr) 356px;height:100vh;height:100dvh}

/* escena */
.escena{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 54px;min-width:0;background:#0b0b0a}
.area{position:relative;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;padding:22px 22px 8px}
.marco{position:relative;overflow:hidden;background-color:var(--c1,#f2f2ef);flex:none}
.marco.cuadros{background:repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%) 0 0/var(--cuad,22px) var(--cuad,22px)}
.capa-fondo{position:absolute;inset:0;overflow:hidden}
.capa-fondo img, .capa-fondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
canvas#lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.suelta{position:absolute;inset:12px;display:flex;align-items:center;justify-content:center;border:1px dashed #000;background:rgba(255,255,255,.82);color:var(--mx-fondo);font-size:13px}
.pie-marco{position:absolute;left:24px;right:24px;top:4px;display:flex;justify-content:space-between;gap:12px;white-space:nowrap;color:var(--t3);font:12px/18px var(--sans);z-index:2;pointer-events:none}
.sello{opacity:.6}
.pista-dedo{color:var(--t3)}
.yema{position:absolute;left:0;top:0;border:1px solid #fff;mix-blend-mode:difference;border-radius:50%;pointer-events:none}
canvas#lienzo{touch-action:none;cursor:none}

/* partitura: una línea de tiempo con cada letra en el momento en que se escribe */
.partitura{display:flex;align-items:center;gap:8px;padding:0 22px;border-top:1px solid var(--l1);min-width:0}
.pista{position:relative;flex:1;height:38px;min-width:0}
.letras{position:absolute;inset:0 0 14px;overflow:hidden;color:var(--t2);font:12px/24px var(--sans);pointer-events:none}
.letras span{position:absolute;top:0;transform:translateX(-50%)}
.letras i{position:absolute;bottom:0;width:1px;height:5px;background:var(--t3)}
.reloj{width:52px;text-align:right;font:12px var(--mono);color:var(--t2);font-variant-numeric:tabular-nums}
.rango-tiempo{position:absolute;left:0;right:0;bottom:0;width:100%;margin:0;height:22px;background:none;-webkit-appearance:none;appearance:none;cursor:ew-resize}
.rango-tiempo::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,var(--t1) var(--p,0%),var(--l2) var(--p,0%))}
.rango-tiempo::-moz-range-track{height:1px;background:var(--l2)}
.rango-tiempo::-moz-range-progress{height:1px;background:var(--t1)}
.rango-tiempo::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:34px;margin-top:-30px;background:var(--t1);border:0;box-shadow:0 0 0 .5px var(--t1)}
.rango-tiempo::-moz-range-thumb{width:1px;height:34px;background:var(--t1);border:0;border-radius:var(--mx-r)}

/* panel */
.panel{background:var(--f1);border-left:1px solid var(--l1);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--l2) transparent}
.grupo{padding:9px 14px 10px;border-bottom:1px solid var(--l1)}
.grupo:last-child{border-bottom:0}
.cabeza{display:grid;grid-template-columns:auto 1fr;align-items:center;row-gap:8px}
h1{margin:0;;;}
.acciones{display:flex;justify-content:flex-end;gap:5px}
.ajustes{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--l1);border:1px solid var(--l1);border-radius:var(--mx-r);overflow:hidden}
.ajustes button{height:28px;background:var(--f1);border:0;cursor:pointer;color:var(--t2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.ajustes button:hover{color:var(--t1);background:var(--f2)}
.ajustes button[aria-pressed=true]{background:var(--t1);color:var(--mx-fondo)}
.tit{color:var(--t2);font-size:12px;display:block}

textarea{display:block;width:100%;margin-top:4px;padding:6px 8px;background:var(--f0);border:1px solid var(--l1);resize:none;font-size:14px;line-height:1.25;border-radius:var(--mx-r);height:36px}
textarea:focus{border-color:var(--t3);outline:none}
.fuentes{margin-top:6px;height:124px;overflow-y:auto;border:1px solid var(--l1);border-radius:var(--mx-r);background:var(--f0);scrollbar-width:thin;scrollbar-color:var(--l2) transparent}
.fuentes .sec{padding:6px 8px 2px;color:var(--t3);font:12px var(--sans)}
.fuentes button{display:block;width:100%;height:30px;padding:0 8px;text-align:left;background:none;border:0;color:var(--t2);cursor:pointer;font-size:18px;line-height:30px;white-space:nowrap;overflow:hidden}
.fuentes button:hover{color:var(--t1);background:var(--f2)}
.fuentes button[aria-selected=true]{background:var(--t1);color:var(--mx-fondo)}

/* deslizador: línea fina y una marca */
.des{display:grid;grid-template-columns:86px minmax(0,1fr) 44px;align-items:center;height:25px;column-gap:8px}
.des label{color:var(--t2);font-size:12px;white-space:nowrap}
.des output{text-align:right;font:12px var(--mono);color:var(--t1);font-variant-numeric:tabular-nums}

.fila-sel, .fila-color{display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:center;column-gap:8px;min-height:27px}
.seg{display:flex;gap:1px;background:var(--l1);border:1px solid var(--l1);border-radius:var(--mx-r);overflow:hidden;min-width:0}
.seg button{flex:1;min-width:0;height:23px;padding:0 1px;background:var(--f1);border:0;color:var(--t2);font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button:hover{color:var(--t1);background:var(--f2)}
.seg button[aria-checked=true]{background:var(--t1);color:var(--mx-fondo)}
input[type=color]{-webkit-appearance:none;appearance:none;width:44px;height:23px;padding:0;border:1px solid var(--l2);background:none;cursor:pointer;border-radius:var(--mx-r);overflow:hidden}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:var(--mx-r)}
input[type=color]::-moz-color-swatch{border:0}
.fila-color input[type=color]{width:100%}
.val{font:12px var(--mono);width:52px;text-align:right}
.nota{margin:6px 0 0;color:var(--t3);font-size:12px;line-height:1.4}
.nota.ok{color:var(--t1)}
.nota.mal{color:#ff8a70}

.materia summary{cursor:pointer;color:var(--t2);font-size:12px;line-height:22px}
.materia[open] summary{margin-bottom:2px}
.btn, .btn-mini{background:none;border:1px solid var(--l2);cursor:pointer;color:var(--t1);border-radius:var(--mx-r)}
.btn:hover, .btn-mini:hover{background:var(--f2)}
.btn:active, .btn-mini:active{background:var(--t1);color:var(--mx-fondo)}
.btn-mini{width:26px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.btn-mini.ancho{width:auto;padding:0 8px}
.btn-mini svg{width:12px;height:12px;fill:currentColor}
.botones{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}
.btn{height:32px;font-size:12.5px;font-weight:500}
.btn:disabled{opacity:.35;cursor:default;background:none;color:var(--t1)}
.avance{display:flex;align-items:center;gap:8px;margin-top:7px}
.avance[hidden]{display:none}
.barra{flex:1;height:2px;background:var(--l2)}
.barra i{display:block;height:100%;width:0;background:var(--t1)}

.sin-gl{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:32px;background:var(--f0);text-align:center;font-size:14px;z-index:9}
.sin-gl[hidden]{display:none}

@media (max-height:930px) and (min-width:901px){
  .fuentes{height:92px}
  .des{height:23px}
  .grupo{padding:7px 14px 8px}
}
@media (max-width:900px){
  .app{display:block;height:auto}
  .escena{height:auto;grid-template-rows:62vh 54px;position:sticky;top:0;z-index:3}
  .area{padding:18px 12px 6px}
  .partitura{padding:0 12px}
  .panel{border-left:0;overflow:visible}
  .pie-marco{left:12px;right:12px}
  .des{height:34px}
  .seg button{height:28px}
  .fila-sel, .fila-color{min-height:36px}
  .btn{height:40px}
}
@media (max-width:420px){
  #rotulo{display:none}
  .pista-dedo{font-size:12px;white-space:nowrap}
  .escena{grid-template-rows:52vh 54px}
  .des{grid-template-columns:76px minmax(0,1fr) 42px}
  .fila-sel, .fila-color{grid-template-columns:76px minmax(0,1fr) auto}
  .seg button{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ── Moxen: lo propio de esta herramienta ── */
.val { width: 60px; }