.audiogrid { width: 100%; max-width: 100%;
             margin-bottom: 25px;
                display: flex; 
                    -webkit-display: flex; 
                    -ms-display: flex; 
                    flex-flow: row wrap;
                    -webkit-flex-flow: row wrap;
                    -ms-flex-flow: row wrap;
                    justify-content: flex-start;
                    -webkit-justify-content: flex-start;
                    -ms-justify-content: flex-start; 
                    align-items: flex-start;
                    -webkit-align-items: flex-start;
                    -ms-align-items: flex-start;
                    align-content: center; }

.audioitem { width: 100%; max-width: 25%;
             margin-right: 5%; }

.leadaudio { 
    font-size: 1.1em;
    font-weight: 600;
    padding-bottom: 10px; }  

.custom-audio-player {
    width: 100%; max-width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    display: flex; 
        -webkit-display: flex; 
        -ms-display: flex; 
        flex-flow: column nowrap;
        -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
        justify-content: flex-end;
        -webkit-justify-content: flex-end;
        -ms-justify-content: flex-end; 
        align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-content: center; 
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 12px;
  overflow: hidden;
  font-family: sans-serif;
  margin-bottom: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  margin-right: 0; }

    .custom-audio-player.playing {
      background-blend-mode: multiply;
      filter: brightness(0.8) blur(1px); }

.custom-controls { 
        width: 100%; max-width: 100%;
        margin: 0 auto;
        display:flex; 
            -webkit-display:flex; 
            -ms-display:flex; 
            flex-flow:row nowrap;
            -webkit-flex-flow:row nowrap; 
            -ms-flex-flow:row nowrap;
            justify-content:space-between;
            -webkit-justify-content:space-between;
            -ms-justify-content:space-between;
            align-items:center;
            -webkit-align-items:center;
            -ms-align-items:center;
            align-content:center;        
        height: 50px;        
        background: rgba(0,0,0,.7);
        color: white; }

.playPause { max-width: 20%;
             padding-left: 7px; }

.rightcontrols { max-width: 80%;
                 display:flex; 
                    -webkit-display:flex; 
                    -ms-display:flex; 
                    flex-flow:row nowrap;
                    -webkit-flex-flow:row nowrap; 
                    -ms-flex-flow:row nowrap;
                    justify-content:flex-end;
                    -webkit-justify-content:flex-end;
                    -ms-justify-content:flex-end;
                    align-items:center;
                    -webkit-align-items:center;
                    -ms-align-items:center;
                    align-content:center; }

            .audiodots:hover { stroke: #0a8a87;
                               filter: drop-shadow(1px 1px 2px #0a8a87);  }

                     
    .dots-menu { width: 100%; max-width: 100%; 
                 background: rgba(0,0,0,.7);
                 margin-top: 10px;
                 padding-top: 8px;
                 padding-left: 20px;
                 padding-bottom: 7px;
                 padding-right: 10px;
                 position: absolute;
                  opacity: 1;
                  transition: opacity 0.3s ease;
                  pointer-events: auto;                 
                 right: 0;
                 bottom: 50px;
                 z-index: 1;
                 display: none; 
                    -webkit-display: none; 
                    -ms-display: none; 
                    flex-flow: column nowrap;
                    -webkit-flex-flow: column nowrap; 
                    -ms-flex-flow: column nowrap;
                    justify-content: flex-start;
                    -webkit-justify-content: flex-start;
                    -ms-justify-content: flex-start;
                    align-items: flex-end;
                    -webkit-align-items: flex-end;
                    -ms-align-items: flex-end;
                    align-content: center; }
                
                .dots-menu.fade-out {
                  opacity: 0;
                  pointer-events: none; }

                .dots-menu div { width: 100%; max-width: 100%;
                                 margin-bottom: 7px;
                                 display: flex; 
                                    -webkit-display: flex; 
                                    -ms-display: flex; 
                                    flex-flow: row nowrap;
                                    -webkit-flex-flow: row nowrap; 
                                    -ms-flex-flow: row nowrap;
                                    justify-content: space-between;
                                    -webkit-justify-content: space-between;
                                    -ms-justify-content: space-between;
                                    align-items: center;
                                    -webkit-align-items: center;
                                    -ms-align-items: center;
                                    align-content: center; }

                .dots-menu div:last-of-type { margin-bottom: 0; }

                .audiolegend { font-size: .75em;
                               padding-right: 10px;
                               color: #CCCCCC;
                               font-family: Menlo, monospace;
                               font-weight: 550;
                               width: 100%; max-width: 100%;
                               text-align: right; } 

                .audioshare { width: 24px !important; padding-top: 2px; }
                .audioembed { width: 27px !important; }

                        .audiodots:hover { fill: white !important; }
                        .audiocontrols:hover,
                        .audiomenu:hover { fill: #0cada9; }

.duraciones,
.leadcontrol { max-width: 100%; }

.duraciones { font-size: 1em; padding-right: 5px; }
    .duracion { color: #CCCCCC; }

.audiocontrols,
.audiomenu { fill: #FFFFFF;
             aspect-ratio: 1/1; }

.audiocontrols { width: 40px; }
.audiomenu { width: 35px; }          

.audiocontrols:hover,
.audiomenu:hover { cursor: pointer; }

.player-head { padding-left: 10px; }

/*Play/pause*/
    
    .audiocontrols { display: none; }
    .audiocontrols.visible { display: flex; }

/*Copy/download*/
    
    .dots-menu.visible { display: flex; }


/*Embed*/

.embed-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999; }

.embed-box {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); }

textarea#embed-code {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  font-family: monospace;
  font-size: 14px; }

.hidden {
  display: none; }


/*Embed toast*/

.custom-audio-player .toast-confirm {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #323232;
  color: white;
  padding: 0.6em 1em;
  border-radius: 5px;
  font-size: 0.85rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  z-index: 10;
}

.custom-audio-player .toast-confirm.show {
  opacity: 1;
}

.toast-confirm {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.toast-confirm.show {
  opacity: 1;
}

/********************/

.entradaaudio { font-size: 1.25em; }


.comentarios {  font-size: 1.1em; }

        .entradaaudio:first-letter { 
              float: left;
              line-height: 47px;
              font-size: 2.6em;
              font-weight: bold;
              margin-right: 0.1em;
              padding-bottom: 0;
              margin-top: 0;
              padding-top: 0; }

.relacionadoslead { padding-right: 7px; }

/********************/

.comment-wrapper { max-width: 100%; }

.relacionadas { font-size: 1.2em; }

.embedinfo .linkicon { fill: #FFFFFF;  }

/********************/

  .audio-playlist { max-width: 300px; margin: 1rem auto; font: 16px/1.4 system-ui, sans-serif; }
  .controls { display:flex; gap:.5rem; align-items:center; margin:.5rem 0; }
  #nowplaying { margin-left:auto; opacity:.8; }
  #playlist { list-style:none; padding:0; margin:.5rem 0 0; }
  #playlist li { padding:.5rem .75rem; cursor:pointer; border-radius:.5rem; }
  #playlist li:hover { background:#f2f2f2; }
  #playlist li.active { background:#e8f0ff; font-weight:600; }