/* MyMusicSoul — compositor único, menciones con @, hojas y toast
   (web/composer.js y web/cancion.js). Rediseño de Hugo, 2026-10-27.
   Usa los tokens de cada página (--paper, --paper-2, --line, --ink, --ink-2,
   --live, --soul, --err y --soul-ink de mms-logo.css); los valores tras la
   coma son los mismos por si una página no los define. Mobile-first. */

/* no todas las páginas ponen border-box: estas piezas lo traen consigo */
.mmsc,.mmsc *,.mmssh,.mmssh *,.mmstoast,.mmstoast *,.cancion,.cancion *,button.mmsrec{box-sizing:border-box}
.mmsc-ic{display:inline-flex;width:18px;height:18px;flex:none}
.mmsc-ic svg{width:100%;height:100%}

/* ---------- una canción (feed, mensajes, hojas y Mi cuenta) ---------- */
.cancion{display:flex;align-items:center;gap:10px;background:var(--paper-2,#EEEAE3);border:1px solid var(--line,#DAD5CC);
  border-radius:12px;padding:8px 10px;margin-top:6px}
.cancion img,.cancion .noart{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:var(--line,#DAD5CC)}
.cancion .txt{display:flex;flex-direction:column;min-width:0;flex:1}
.cancion .et{font-size:12.5px;font-weight:600;color:var(--soul-ink,#5B45B8)}
.cancion .ti{font-weight:600;font-size:15px;color:var(--ink,#23262B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cancion .ar{font-size:14px;color:var(--ink-2,#55595F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cancion .play,.mmssh__fila .play{flex:none;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;font:inherit;font-size:14px;
  font-weight:600;white-space:nowrap;border:1.5px solid var(--live,#1F6F6B);background:transparent;color:var(--live,#1F6F6B);cursor:pointer}
.cancion .play.on,.mmssh__fila .play.on{background:var(--live,#1F6F6B);color:#fff}
.cancion .play:focus-visible,.mmssh__fila .play:focus-visible{outline:3px solid var(--soul,#7A63D6);outline-offset:2px}

/* ---------- el compositor ---------- */
.mmsc{display:flex;flex-direction:column;gap:8px}
.mmsc__lbl{font-size:14px;font-weight:600;color:var(--ink-2,#55595F)}
.mmsc__campo{position:relative}
.mmsc__ta{display:block;width:100%;font:inherit;font-size:16px;line-height:1.4;padding:10px 12px;resize:none;overflow-y:hidden;
  border:1.5px solid var(--line,#DAD5CC);border-radius:12px;background:#fff;color:var(--ink,#23262B)}
.mmsc__ta::placeholder{color:var(--ink-2,#55595F);opacity:.85}
.mmsc__ta:focus{outline:none;border-color:var(--soul,#7A63D6);box-shadow:0 0 0 3px rgba(122,99,214,.18)}
.mmsc__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.mmsc .mmsc__btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;font:inherit;font-size:14px;
  font-weight:600;border:1.5px solid var(--line,#DAD5CC);background:#fff;color:var(--ink,#23262B);cursor:pointer}
.mmsc .mmsc__btn:hover{border-color:var(--soul,#7A63D6)}
.mmsc .mmsc__btn .mmsc-at{font-weight:800;color:var(--soul-ink,#5B45B8);font-size:16px;line-height:1}
.mmsc .mmsc__btn .mmsc-ic{color:var(--soul-ink,#5B45B8)}
.mmsc__cnt{font-size:14px;color:var(--ink-2,#55595F);white-space:nowrap}
.mmsc__cnt.over{color:var(--err,#B3452F);font-weight:700}
.mmsc .mmsc__send{margin-left:auto;min-height:44px;padding:0 22px;border-radius:999px;font:inherit;font-size:15px;font-weight:700;
  border:1.5px solid var(--soul,#7A63D6);background:var(--soul,#7A63D6);color:#fff;cursor:pointer}
.mmsc .mmsc__send[disabled]{opacity:.5;cursor:not-allowed}
.mmsc button:focus-visible{outline:3px solid var(--soul,#7A63D6);outline-offset:2px}
.mmsc__err{margin:0;font-size:14px;color:var(--err,#B3452F)}
.mmsc__err:empty{display:none}
.mmsc__cancion:empty{display:none}
.mmsc__cancion .cancion{margin-top:0;background:rgba(122,99,214,.07);border-color:#C7BDF0}
.mmsc .mmsc__quita{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;
  border-radius:999px;background:transparent;color:var(--ink-2,#55595F);cursor:pointer}
.mmsc .mmsc__quita svg{width:20px;height:20px}
.mmsc .mmsc__quita:hover{background:rgba(35,38,43,.07)}
/* hoja: el botón de publicar va ancho, bajo el error */
.mmsc--sheet .mmsc__send{margin-left:0;width:100%;min-height:50px;font-size:16px}
.mmsc--sheet .mmsc__cnt{margin-left:auto}
/* DM: fijo abajo de la conversación */
.mmsc--dm{position:sticky;bottom:0;background:var(--paper,#F7F5F1);padding:8px 0 calc(6px + env(safe-area-inset-bottom));z-index:3}

/* lista de @ (combobox) */
.mmsc__pop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid var(--line,#DAD5CC);
  border-radius:14px;box-shadow:0 12px 32px -12px rgba(35,38,43,.35);padding:6px 0;max-height:min(320px,46vh);overflow-y:auto}
.mmsc__campo--arriba .mmsc__pop{top:auto;bottom:calc(100% + 4px)}
.mmsc__pop[hidden]{display:none}
.mmsc__popt{margin:0;padding:4px 14px 6px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2,#55595F)}
.mmsc__lista{list-style:none;margin:0;padding:0}
.mmsc__op{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px;cursor:pointer}
.mmsc__op[aria-selected="true"]{background:rgba(122,99,214,.10)}
.mmsc__op img{width:36px;height:36px;border-radius:10px;flex:none}
.mmsc__opt{flex:1;min-width:0;display:flex;flex-direction:column}
.mmsc__al{font-size:15px;color:var(--ink,#23262B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmsc__al b{color:var(--soul-ink,#5B45B8);font-weight:800}
.mmsc__et{font-size:14px;color:var(--ink-2,#55595F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmsc__af{flex:none;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 10px}
.mmsc__af--soulmate{background:rgba(122,99,214,.14);color:var(--soul-ink,#5B45B8)}
.mmsc__af--alta{background:rgba(31,111,107,.12);color:var(--live,#1F6F6B)}
.mmsc__af--media,.mmsc__af--baja{background:var(--paper-2,#EEEAE3);color:var(--ink-2,#55595F)}
.mmsc__vacio{margin:0;padding:8px 14px 10px;font-size:14px;color:var(--ink-2,#55595F)}
.mmsc__vacio[hidden]{display:none}

/* menciones pintadas en publicaciones y mensajes */
a.men{color:var(--soul-ink,#5B45B8);font-weight:650;text-decoration:none}
a.men:hover{text-decoration:underline}

/* ---------- hojas ---------- */
html.mmssh-lock{overflow:hidden}
.mmssh{position:fixed;inset:0;z-index:1100;background:rgba(35,38,43,.5);display:flex;align-items:flex-end;justify-content:center}
.mmssh__box{position:relative;display:flex;flex-direction:column;width:100%;height:86vh;height:86dvh;background:var(--paper,#F7F5F1);
  color:var(--ink,#23262B);border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom);animation:mmssh-sube .2s ease-out;
  font-family:inherit;font-size:16px;line-height:1.45}
@keyframes mmssh-sube{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.mmssh__box{animation:none}}
@media (min-width:768px){
  .mmssh{align-items:center;padding:24px}
  .mmssh__box{width:520px;height:auto;max-height:min(86vh,720px);border-radius:20px;box-shadow:0 24px 60px rgba(35,38,43,.3)}
  .mmssh .mmssh__asa{display:none}
}
.mmssh__asa{display:block;width:40px;height:5px;border-radius:999px;background:var(--line,#DAD5CC);margin:8px auto 0;flex:none}
.mmssh__cab{flex:none;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 18px}
.mmssh__t{flex:1;margin:0;font-size:19px;font-weight:700;color:var(--ink,#23262B);letter-spacing:-.01em}
.mmssh .mmssh__x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--ink-2,#55595F);cursor:pointer}
.mmssh .mmssh__x svg{width:22px;height:22px}
.mmssh .mmssh__x:hover{background:rgba(35,38,43,.07)}
.mmssh button:focus-visible,.mmssh a:focus-visible{outline:3px solid var(--soul,#7A63D6);outline-offset:2px}
.mmssh__cuerpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 18px 18px;display:flex;flex-direction:column;gap:10px}
.mmssh__q{width:100%;font:inherit;font-size:16px;min-height:48px;padding:0 14px;border:1.5px solid var(--line,#DAD5CC);border-radius:12px;
  background:#fff;color:var(--ink,#23262B)}
.mmssh__q:focus{outline:none;border-color:var(--soul,#7A63D6);box-shadow:0 0 0 3px rgba(122,99,214,.18)}
.mmssh__vacio{margin:4px 0;font-size:15px;color:var(--ink-2,#55595F)}
.mmssh .mmssh__re{min-height:44px;padding:0 16px;margin-left:4px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;
  border:1.5px solid var(--live,#1F6F6B);background:transparent;color:var(--live,#1F6F6B);cursor:pointer}
.mmssh__res{list-style:none;margin:0;padding:0}
.mmssh__fila{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line,#DAD5CC)}
.mmssh__fila:last-child{border-bottom:0}
.mmssh .mmssh__elige{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 4px;border:0;border-radius:0;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mmssh .mmssh__elige:hover{background:rgba(122,99,214,.05)}
.mmssh__elige img,.mmssh__elige .noart{width:44px;height:44px;border-radius:8px;flex:none;object-fit:cover;background:var(--line,#DAD5CC)}
.mmssh__elige .txt{display:flex;flex-direction:column;min-width:0}
.mmssh__elige .ti{font-size:15px;font-weight:500;color:var(--ink,#23262B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmssh__elige .ti b{font-weight:800;color:var(--soul-ink,#5B45B8)}
.mmssh__elige .ar{font-size:14px;color:var(--ink-2,#55595F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmssh__nota{margin:0;font-size:14px;color:var(--ink-2,#55595F);background:rgba(31,111,107,.08);border-radius:10px;padding:8px 12px}
.mmssh__pie{margin:0;font-size:14px;color:var(--ink-2,#55595F);text-align:center}
.mmssh__cuerpo>.cancion{margin-top:0}

/* ---------- «Recomendar» (Mi cuenta) ---------- */
button.mmsrec{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 14px;border-radius:999px;font:inherit;
  font-size:14px;font-weight:600;white-space:nowrap;border:1.5px solid var(--soul,#7A63D6);background:transparent;color:var(--soul-ink,#5B45B8);cursor:pointer}
button.mmsrec .mmsc-ic{width:16px;height:16px}
button.mmsrec.on{background:rgba(31,111,107,.12);border-color:transparent;color:var(--live,#1F6F6B)}
button.mmsrec:focus-visible{outline:3px solid var(--soul,#7A63D6);outline-offset:2px}

/* ---------- toast ---------- */
.mmstoast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1200;display:flex;align-items:center;gap:10px;
  max-width:520px;margin:0 auto;padding:6px 6px 6px 16px;border-radius:14px;background:#23262B;color:#fff;font-size:15px;line-height:1.35;
  box-shadow:0 14px 40px rgba(0,0,0,.3);animation:mmssh-sube .2s ease-out}
@media (prefers-reduced-motion:reduce){.mmstoast{animation:none}}
.mmstoast__t{flex:1;min-width:0}
.mmstoast__a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:#C3B5F5;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mmstoast .mmstoast__x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;
  border-radius:999px;background:transparent;color:#fff;cursor:pointer}
.mmstoast .mmstoast__x svg{width:20px;height:20px}
.mmstoast a:focus-visible,.mmstoast button:focus-visible{outline:3px solid #C3B5F5;outline-offset:2px}

/* una publicación a la que se llegó por enlace (/comunidad#post-<id>) */
.feed li.destacado{background:rgba(122,99,214,.08);border-radius:12px}