:root{
  --colAud_1: #eaff8d;
  --colAud_2: #ffc7c7;
  --colAud_3: #005b03;
}

.seccMP3 *{
  color: #0d312b;
  font-size: clamp(0.9rem, 1vw, 1rem);
}

.seccMP3 .mp3-play{
  background: #005b03;
}

.seccMP3 .mp3-play .eleAud_ico{
  background: var(--colAud_1);
}

.seccMP3 .mp3-play .eleAud_titulo *{
  color: #fff;
}
.seccMP3 .mp3-play .eleAud_subTitulo{
  color: var(--colAud_1);
}

.seccMP3 .mp3-play .eleAud_subSubTitulo{
  color: #ccc;
}

.seccMP3 .mp3-play .mp3_ico *{
  color: #800;
}

.seccMP3 .mp3-pause{
  background: #D8CDAD;
}

.seccMP3 .mp3-pause .eleAud_ico{
  background: var(--colAud_2);
}

.seccMP3 .mp3-pause .eleAud_titulo *{
  color: var(--colAud_3);
}


.seccMP3 .mp3-pause .eleAud_subSubTitulo{
  color: #888;
}

.seccMP3 .mp3-pause *{
  color: #005b03;
}

.seccMP3 .mp3-pause .mp3_ico *{
  color: #ff9500;
}

.seccMP3 .mp3-pause .mp3_ico{
  background: #fff;
}

.seccMP3 ul{
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

.seccMP3 li{
  padding-top: 2px;

  position: relative;
  display: block;
  width: 100%;
  min-height: 40px;

  border-radius: 5px;
  background-color: #fafafa;
  border: 1px solid #800;
  margin-bottom: 10px;
  cursor: pointer;
}

.seccMP3 li.mp3-hov:hover{
  background: #800;
}

.seccMP3 li.mp3-hov:hover .eleAud_ico{
  background: var(--colAud_1);
}

.seccMP3 li.mp3-hov:hover .eleAud_titulo *{
  color: #fff;
}
.seccMP3 li.mp3-hov:hover .eleAud_subTitulo{
  color: var(--colAud_1);
}

.seccMP3 li.mp3-hov:hover .eleAud_subSubTitulo{
  color: #ccc;
}

.seccMP3 .mp3_box{
  position: relative;
  overflow: hidden;
}

.seccMP3 .mp3_ico{
  position: absolute;
  display: block;
  top: -10px;
  right: -10px;
  background: #fff;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  padding-right: 5px;

}

.seccMP3 .mp3_ico *{
  font-size: 30px;
}

/* Estilo del "pulgar" o "thumb" que se arrastra */
    .seccMP3 input[type="range"]{
      width: 100% !important;
    }
    .seccMP3 input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #f00;
      cursor: pointer;
    }

    .seccMP3 input[type="range"]::-moz-range-thumb {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #f00;
      cursor: pointer;
    }

    /* Estilo de la "pista" o "track" de fondo */
    .seccMP3 input[type="range"]::-webkit-slider-runnable-track {
      width: 100%;
      background: transparent;
      z-index: 2;
    }

    .seccMP3 input[type="range"]::-moz-range-track {
      width: 100%;
      background: transparent;
      z-index: 2;
    }

    .seccMP3 .mp3_barraAcc{
      position: absolute;
      display: block;
      overflow: hidden;

      width: 100%;
      height: 6px;
      bottom: 16px;
      left: 0;
      border-radius: 5px;
      border: 1px solid #fff8;
      padding: 0;
      margin: 0;
      z-index: 1;
    }

    .seccMP3 .mp3_barraAcc div{
      background: var(--colAud_1);
      width: 0;
      height: 100%;
    }

    /* *** elemento de audio *** */
    .seccMP3 .eleAud_ico i{
      font-size: 20px !important;
    }

    .seccMP3 .eleAud_ico{
      position: relative;
      display: block;
      background: transparent;
      width: 30px;
      height: 30px;
      text-align: center;
      overflow: hidden;
      margin: 2px 10px 0 5px;
      border-radius: 50%;
    }
    .seccMP3 .eleAud_titulo{
      font-weight: 600;
    }
    .seccMP3 .eleAud_subTitulo{
      color: #800;
    }
    .seccMP3 .eleAud_subSubTitulo{
      color: #444;
      font-size: clamp(0.8rem, 1vw, 1.5rem);
    }