/* =========================================================
   Mi Piano — el cancionero
   ---------------------------------------------------------
   La sección a pantalla completa (como el salón de juegos) y la barra
   de canción que sustituye a la cabecera del ejercicio mientras se
   toca una canción (body.cancion-on).
   ========================================================= */

/* ---------- la sección ----------
   REEMPLAZA a <main> (no se apila encima), como el salón de juegos */
.canciones{display:none;background:var(--paper);padding:14px 18px 40px}
body.canciones-on .canciones{display:block}
body.canciones-on .layout main{display:none}

.cancionlista{max-width:760px;margin:0 auto}
.can-grupo{margin:22px 0 8px;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--soft)}

.cancioncard{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;margin:0 0 8px;padding:13px 16px;
  background:#fff;border:1px solid #e3ded2;border-radius:12px;cursor:pointer;
  font:inherit}
.cancioncard:hover{border-color:var(--gold);transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(34,29,20,.08)}
.cancioncard.bloqueada{opacity:.6}
.cc-tit{font-weight:700}
.cc-datos{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--soft)}
.cc-datos i{font-style:normal;background:#f4efe4;border-radius:8px;padding:2px 8px}
.cc-datos .cc-sabida{background:#eaf5ec;color:#2c6b3a}

/* ---------- las canciones de casa ----------
   Ver js/mis-canciones.js. La tarjeta de añadir es la única puerta al
   editor, así que se ve distinta de las canciones de verdad: discontinua
   y sin fondo, como un hueco que se puede llenar. */
.cancioncard.anadir{background:transparent;border-style:dashed;border-color:#cdc5b4;
  color:var(--soft);font-weight:600}
.cancioncard.anadir:hover{border-color:var(--gold);color:var(--ink)}
.cc-editar,.cancioncard.anadir .cc-datos i{cursor:pointer;background:#f4efe4}
.cc-editar:hover,.cancioncard.anadir .cc-datos i:hover{background:#e8dfc9}

/* ---------- el editor ---------- */
.miafila{display:flex;gap:10px;flex-wrap:wrap}
.miafila .miacampo{flex:1;min-width:130px}
.miafila .miacampo.ancho{flex-basis:100%}
.miacampo{display:block;margin:10px 0 0}
.miacampo>span{display:block;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.7px;color:var(--soft);margin-bottom:4px}
.miacampo input,.miacampo select,.miacampo textarea{width:100%;box-sizing:border-box;
  padding:9px 11px;border:1px solid #ddd6c6;border-radius:10px;background:#fffdf8;
  font:inherit;font-size:.92rem}
.miacampo textarea{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.88rem;line-height:1.6;resize:vertical}
.miacampo input:focus,.miacampo textarea:focus,.miacampo select:focus{outline:none;
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,160,72,.18)}

/* el aviso de «así no se escribe»: ocupa sitio SIEMPRE (min-height), si no
   el diálogo pega un salto cada vez que aparece un error */
.miaaviso{min-height:1.2em;margin:10px 0 0;font-size:.85rem;font-weight:600}
.miaaviso.bien{color:#2c6b3a}
.miaaviso.mal{color:#a8321f}

.miaayuda{margin:12px 0 0;font-size:.84rem;line-height:1.7}
.miaayuda summary{cursor:pointer;font-weight:600;color:var(--soft)}
.miaayuda div{margin-top:8px;padding:10px 12px;background:#faf6ec;border-radius:10px}
.miaayuda code{background:#fff;border:1px solid #e3ded2;border-radius:5px;
  padding:1px 5px;font-size:.85em}
.mialegal{margin-top:12px;font-size:.76rem;line-height:1.5}

/* ---------- la barra de canción sobre el visor ---------- */
.cancionbar{display:none;align-items:center;gap:8px;margin:2px 0 10px;
  padding:8px 10px;background:#fff;border:1px solid #e3ded2;border-radius:12px}
body.cancion-on .cancionbar{display:flex}
.canciontit{flex:1;font-weight:700;font-size:1.05rem}
#cancionsabida.done{background:var(--ok);color:#fff;border-color:var(--ok)}

/* mientras se toca una canción, la cabecera del ejercicio se aparta:
   el visor (partitura, herramientas, teclado, reproductor) se queda */
/* el !important es necesario: render() pone display en línea al sharenote
   (el aviso del Do central) y se colaba encima del ejercicio anterior */
body.cancion-on .eyebrow,
body.cancion-on .title,
body.cancion-on .goal,
body.cancion-on .sharenote,
body.cancion-on .navbtns,
body.cancion-on .card{display:none!important}