/* Musica de la invitacion (2026-10-13). */

/* Paso 4: elegir cancion. */
.invitation-music{display:grid;gap:10px;width:min(560px,100%);margin:14px 0 4px;padding:12px;border:1px solid #e3d9ff;border-radius:14px;background:#fbf9ff}
.invitation-music-head{display:flex;align-items:flex-start;gap:10px}
.invitation-music-head>i{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#7c3cff,#e63891);color:#fff}
.invitation-music-head strong{display:block;color:var(--dark2);font-size:.8rem}
.invitation-music-head strong small{margin-left:6px;color:#7c3cff;font-size:.62rem;font-weight:850}
.invitation-music-head span{display:block;color:var(--muted);font-size:.66rem;line-height:1.35}
.invitation-music-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.invitation-music-option{position:relative;display:flex;align-items:center;gap:8px;margin:0;padding:7px 9px;border:1px solid #e9e4f7;border-radius:11px;background:#fff;cursor:pointer}
.invitation-music-option input{position:absolute;opacity:0;pointer-events:none}
.invitation-music-option:has(input:checked){border-color:#7c3cff;box-shadow:0 0 0 3px rgba(124,60,255,.15)}
.invitation-music-option:has(input:focus-visible){outline:3px solid rgba(124,60,255,.3)}
.invitation-music-play{display:grid;place-items:center;flex:0 0 32px;height:32px;padding:0;border:0;border-radius:50%;background:#efe9ff;color:#7c3cff;font-size:1rem;cursor:pointer}
.invitation-music-play.is-playing{background:#7c3cff;color:#fff}
.invitation-music-play.is-none{background:#f3f2f7;color:#9a97ad;cursor:inherit}
.invitation-music-copy{display:grid;min-width:0}
.invitation-music-copy b{overflow:hidden;color:var(--dark2);font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}
.invitation-music-copy small{color:var(--muted);font-size:.62rem}

/* Invitacion: boton para activar la musica. */
.public-music-toggle{position:absolute;z-index:6;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 13px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(18,14,44,.55);color:#fff;font-size:.72rem;font-weight:850;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(8,6,24,.25);animation:public-music-pulse 2.4s ease-in-out 3}
.public-music-toggle i{font-size:.95rem}
.public-music-toggle.is-on{background:rgba(124,60,255,.85);animation:none}
.public-music-toggle:focus-visible{outline:3px solid rgba(255,255,255,.6)}
@keyframes public-music-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.public-music-toggle{animation:none}}
.public-music-toggle{top:10px;right:10px;padding:7px 12px;transition:padding .25s ease,gap .25s ease}
.public-music-toggle span{max-width:140px;overflow:hidden;white-space:nowrap;transition:max-width .25s ease,opacity .25s ease}
.public-music-toggle.is-compact{gap:0;width:38px;height:38px;min-height:38px;padding:0;justify-content:center}
.public-music-toggle.is-compact span{max-width:0;opacity:0}